How to Build a Website With AI Tools Like Claude, Cursor, or ChatGPT

How to build a professional website with AI, using MCP.

Claude, ChatGPT, Cursor, Gemini, Grok, and Muse can now connect to a real website platform and build your site with you. Here is what MCP is, why it matters, and how to turn one conversation into a real site.

Most of us already use an AI assistant for the words. It drafts the About page, tightens the bio, and suggests a tagline. Then the work stops, because the assistant can't reach the website. You copy, you paste, you click through a builder, and you come back to ask the next question. The assistant does the thinking and you do the moving.

That gap is closing. A newer standard called MCP lets an assistant connect to the tools you use and do the work inside them, with your permission. For websites, that means you can describe the site you want and watch your assistant build it. This guide covers what MCP is, what a professional website actually needs, and how to build one with the assistant you already have.

What is MCP?

MCP stands for Model Context Protocol. It is an open standard that Anthropic introduced in late 2024, and it has since been adopted across the major AI assistants, including all six in this guide: Claude, ChatGPT, Cursor, Gemini, Grok, and Muse. A common way to describe it is a USB-C port for AI. Instead of every assistant needing a custom integration with every app, an app offers one MCP connection and any assistant that speaks MCP can plug into it.

In practice, an MCP connection gives your assistant three things:

• A list of what it can do. The app tells the assistant which actions are available, like "read the site's status" or "save the home page headline."

• A way to do them. When you ask for something, the assistant calls the right action and gets a real answer back, instead of guessing.

• Your permission. You sign in to the app, and the assistant can only act on your account, within your access, until you disconnect it.

The result is an assistant that can act, not only advise. You stay in the conversation, and the changes land in the actual product.

Three ways to build a website with AI

When people say they built a website with AI, they usually mean one of three things.

1. Ask the assistant to write the code

Ask ChatGPT or Claude for a website and you will get HTML, or a React app, in a few seconds. It can look great. But a file is not a website. You still need hosting, a domain, HTTPS, a contact form that actually sends, an email list, search metadata, a share image, accessibility, and someone to keep all of it updated. If you are a developer, that is a fine starting point. If you are a writer, an artist, a coach, or a small business, it is a pile of homework.

2. Ask the assistant for words, then paste them into a builder

This is how most people do it today, and it works. The assistant writes, and you carry everything across, field by field. The assistant never sees the page, so it can't tell you the headline is too long for the hero, or that your header has nine links in it.

3. Connect the assistant to a website platform with MCP

Here, the assistant works inside a real, hosted website. It asks what you want, saves each answer to the site, and moves to the next question. The platform handles hosting, security, speed, search, and email. The assistant handles the conversation. You make the decisions.

The third way is the one worth learning, because it gives you a site you can actually run.

What makes a website professional

Good writing and a nice color palette help, but they are not what separates a professional site from a weekend project. These are:

• Your own domain, with HTTPS. People trust an address that is yours. Here is why a custom domain matters.

• A consistent brand. The same logo in the browser tab, the header, and the preview card when someone shares your link. See how to turn one logo into a complete brand kit.

• Readable on every screen. Text with enough contrast, pages that work with a keyboard and a screen reader. Accessibility is part of looking professional, not an extra.

• Fast and secure. Slow pages lose readers, and a security warning loses them faster. Speed, security, and accessibility all build trust.

• Found in search, and good-looking when shared. A title and description on every page, a sitemap, and a share image.

• A way to stay in touch. A contact page, a newsletter sign-up, and ideally a place for readers to talk.

• A way to get paid, if you sell. A shop, bookings, or at least a clear link to where you sell.

An AI assistant is great at the words and the choices. It is not a hosting company, and it won't keep your certificates renewed. That is why the platform you connect it to matters as much as the assistant you pick.

How to build a website with an AI agent on Cardel

We built Cardel MCP so you can set up a Cardel site in conversation with Claude, ChatGPT, Cursor, Gemini, Grok, or Muse. Cardel takes care of the professional list above: hosting, HTTPS, your own domain, a brand kit from one logo, color schemes checked for readable contrast, search and share metadata, a sitemap, email, and a shop. Your assistant walks you through the rest. Here is how it works.

Step 1: Connect your assistant

Open the Cardel MCP page and choose Connect your agent. Cardel copies a one-line setup prompt:

Set up my Cardel site. Fetch https://www.cardel.io/mcp/get-started.md and follow it.

Paste it into your assistant. It reads Cardel's setup guide, adds the connection where it can, and asks you to sign in with your Cardel account. If you would rather add it by hand, the steps differ a little by product, and the Cardel MCP page lists each one:

• Claude: Customize, then Connectors, then add a custom connector named Cardel. Claude Code works from the command line too.

• ChatGPT: turn on Developer mode in Settings, then create the Cardel app from Apps. Codex works from the command line.

• Cursor: Cursor Settings, then Tools and MCP, then New MCP Server.

• Gemini: Settings, then Connected Apps, using a personal Google account. The Gemini CLI works too.

• Muse: Settings, then Connectors, then Add custom connector. Muse is available in the US and Canada.

• Grok: open grok.com/connectors, then choose New Connector, then Custom.

Whichever you use, the address is https://www.cardel.io/mcp, with the www.

Step 2: Tell it about your work

Once you are signed in, your assistant checks where your site stands. If you don't have a site yet, it creates one with you. Start the way you would with a designer: what you do, who it is for, and what you want visitors to do. "I'm a novelist with two books out and a third on the way. I want readers to find my books, join my newsletter, and follow along while I write the next one." That one paragraph gives your assistant most of what it needs.

Step 3: Answer one question at a time

Your assistant follows the same steps as Cardel's Guided Mode, in order:

1. The site name, and soft or sharp corners.

2. A color scheme and a font pairing.

3. Your logo and tagline, which Cardel turns into your tab icon, header logo, and share image.

4. Which pages belong: About, Contact, Newsletter, Blog, Community, and Videos.

5. Your own pages, like a Showcase for your books or portfolio, or a Shop for products, services, or bookings.

6. The words on each page, the header, the home page, and the footer.

7. Your email choices, like the From name subscribers see, and whether a new blog post emails your list.

It asks before adding a blog, a community, or a newsletter, and you can skip anything you are not ready to decide. Keep your site open in another tab and it refreshes as each step is saved, so you see the page change while you talk. If you would rather click through a step yourself, open Guided Mode. It saves to the same site, so you and your assistant can trade off.

Step 4: Add your photos

Your assistant asks for the photos it needs: a home page photo, an About portrait, your logo, and a photo for each Showcase or Shop item. In ChatGPT, you can attach the photo right in the chat. In Cursor, Claude Code, or the Gemini CLI, your assistant can send a photo straight from your computer. In Claude, Gemini, Grok, or Muse on the web, share a direct link to the image, or open the one-time upload link your assistant shows you and choose the file. Upload your logo and Cardel builds your brand kit from it automatically.

Step 5: Review it, then publish it yourself

This last part is deliberately yours. Your assistant can't publish your site. It hands you a link to look through your site and your Admin, choose a plan, review your Terms and Privacy, and publish. It can walk you through the Terms and Privacy and answer your questions, but you read them and you check the box. Connecting Stripe and setting up a custom domain happen in your browser too. Until you publish, your site stays private and out of search, and building it costs nothing.

Prompts that work well

You don't need special wording. Talk to your assistant the way you would brief a person. A few that get good results:

• "Set up a site for my photography business. I shoot weddings and portraits in Denver. I want a gallery, a way to book a consultation, and a contact page."

• "Suggest three color schemes that feel calm and literary, and tell me why each one fits."

• "Rewrite my About page so it sounds less formal. Keep it under 150 words."

• "Add a Showcase page called Books, with one item for each of my three novels."

• "Change my home page so the newsletter sign-up comes right after the hero."

• "How do workflows send email in Cardel?"

That last one matters more than it looks. Your assistant can read Cardel's own documentation, the same articles you see in your Admin, when you ask how something works, so the answer comes from how Cardel actually behaves, not a guess about a screen that might not exist.

Keep editing after launch

A website is never finished, and the connection doesn't end when you publish. Come back a month later and ask for a new headline, a reordered header, a new item in your Shop, a different theme for the season, or a fresh About page now that the third book is out. Your assistant makes the change, and it shows up on your live site the same way a save in Editor Mode does. Changing the name in your header doesn't change your address, so old links keep working.

What your assistant can't do, and why that's a good thing

An assistant that can act needs limits that are easy to understand. On Cardel:

• It can't publish your site or open your Admin.

• It never sees a card number. Payments run through Stripe, in your browser.

• It only reaches the sites you connected, and only within your own access. An Admin you invite can use it too, within the access you gave them.

• Settings shows every connected assistant, the sites it can edit, and when it was last used. Disconnect any of them whenever you want.

• Changing or resetting your password disconnects every assistant.

The assistant does the setup work, and the decisions that matter stay with you. We wrote more about that idea in what human-in-the-loop AI means for creators.

Claude, ChatGPT, Cursor, Gemini, Grok, or Muse: which should you use?

The one you already use. Every assistant follows the same steps on Cardel and builds the same site, so the best choice is the one where you already do your thinking. Here is what is worth knowing about each.

Building a website with Claude

Claude, from Anthropic, is a strong writer, which shows on the pages that need the most care: your About page, your tagline, and your home page hero. Add Cardel from Customize, then Connectors, on the web or in the desktop app. On a Team or Enterprise plan, the workspace owner adds the connector first, and members choose Connect. If you work in the terminal, Claude Code connects to the same address.

Building a website with ChatGPT

ChatGPT, from OpenAI, makes the photo step the quickest of the six, because you can attach a photo right in the chat and it goes straight onto your site. Turn on Developer mode in Settings, then create the Cardel app from Apps. On Business, Enterprise, or Edu, an admin turns on Developer mode first. Codex, OpenAI's coding agent, connects from the command line too.

Building a website with Cursor

Cursor is a code editor with an AI agent built in. It suits people who already spend their day in one and want their website in the same window as everything else. Add Cardel from Cursor Settings, then Tools and MCP. Cursor can send photos straight from your computer, and the same setup works in the Cursor CLI.

Building a website with Gemini

Gemini, from Google, fits naturally if you already work in Google's tools. Add Cardel from Settings, then Connected Apps, under Custom apps. For now, use a personal Google account, because work and school accounts can't add a custom app yet. The Gemini CLI connects too, and can send photos from your computer.

Building a website with Grok

Grok, from xAI, connects at grok.com/connectors. Choose New Connector, then Custom, and paste the Cardel address. On a Business or Enterprise plan, a team admin adds the address in the console first. The Grok CLI connects the same way, as a remote connector.

Building a website with Muse

Muse, from Meta, has a built-in connector, so it fits if you already use Meta AI. Add Cardel from Settings, then Connectors, then Add custom connector. Use that built-in connector rather than asking Muse to set one up inside its cloud computer, which can fail at sign-in. Muse is available in the US and Canada.

You can connect more than one, and one assistant can work on more than one of your sites. Start a site in ChatGPT and polish the copy in Claude, if that is how you like to work. They all save to the same place.

Common questions

Do I need to know how to code?

No. You talk, your assistant saves. There are no files to download and nothing to host.

Does it cost anything?

Connecting is free on Cardel, and so is building a private site. You choose a plan when you are ready to publish. See Cardel pricing for what each plan includes. Your assistant's own plan and limits come from that product.

Will my site look AI-generated?

Only if you let it read that way. You choose the theme, the fonts, the photos, and the words, and you can rewrite anything. Every Cardel color scheme is checked for readable contrast in light and dark mode, so the look stays clean whichever you pick. See how to choose website colors and fonts.

Can I use my own domain?

Yes. Your site starts on a Cardel address, and you can connect a domain you already own when you publish. Cardel checks that it is yours and sets up HTTPS for you, with no certificate to buy or renew.

Can I switch between my assistant and doing it myself?

Yes. Your assistant, Guided Mode, and Editor Mode all save to the same site. Use whichever fits the moment.

Try it with the assistant you already have

If you already talk through ideas with Claude, ChatGPT, Cursor, Gemini, Grok, or Muse, you are one paste away from a site of your own. Copy the setup prompt from the Cardel MCP page, tell your assistant what you make, and see how far one conversation gets you. Before you publish, use the creator website launch checklist to check everything is ready. Browse everything Cardel includes, and remember: you don't pay until you publish.