build website with gpt-4

Build a Website with GPT-4: What Works and How to Go Live

GPT-4 writes website code but can't host it. Learn how to prompt it, test the result, and get a live site or app with a connector and a full-stack backend.

You can build a website with GPT-4, but only the code: GPT-4 cannot publish it. OpenAI describes GPT-4 as a large multimodal model that accepts image and text inputs and emits text outputs. For a website, that text is code, and that is where its job ends. Someone still has to put the files on hosting, connect a domain, and handle forms, payments and data.

This guide shows both halves. First, how to get good pages out of GPT-4 with the right prompts. Second, how to get them live. With WebsitePublisher, the AI web platform for websites and apps, your AI assistant does the publishing for you through the WebsitePublisher connector.

TL;DR

GPT-4 turns a text description into HTML, CSS and JavaScript. It does not host, deploy or run a backend.
Specific prompts, given one section at a time, produce far better results than one long request.
If you copy code by hand, you also need hosting, a domain and your own forms, email and storage.
With WebsitePublisher, your AI assistant (ChatGPT, Claude, Gemini, Grok and others) builds and publishes websites and apps through the WebsitePublisher connector, and every change is live immediately.
WebsitePublisher is full-stack: hosting, auth, payments, forms, email, uploads and data are already built in.

What GPT-4 can and cannot do for a website
How to plan a site before you prompt
Prompts that work: build in small steps
Which model is best for building a website?
Getting access to GPT-4
Preview, test and improve before launch
The gap: from chat window to live site
A faster path: let your AI publish for you
Perspective
Start building websites and apps with WebsitePublisher
Who this approach fits
A simple first project, step by step
FAQ
Sources

What GPT-4 can and cannot do for a website

GPT-4 was released by OpenAI on March 14, 2023. It reads your text (and images) and writes text back. For websites, that text is code: page markup, styles and scripts.

What that means in practice:

It can draft page structure, write copy, suggest color palettes, generate CSS, and explain what each part of the code does.
It can revise its own work when you give it feedback, such as “make the header sticky” or “tighten the spacing on mobile.”
It cannot put files on a server, register a domain, or keep a database running.
It cannot see your site live unless you show it a screenshot or paste in what you see.

The result is a set of files in a chat window. To turn them into a site, you need a second step. That step is where most first attempts stall.

Note on names: OpenAI retired GPT-4 from ChatGPT in April 2025 and replaced it with newer models. Everything below works whichever model you use. The assistant is the writer. The platform is the place where the site lives.

How to plan a site before you prompt

A good prompt starts with a decision, not a design. Spend ten minutes on these five items before you open a chat.

Goal. One sentence: what should a visitor do? Book a call, buy a product, join a list.
Audience. Who is the visitor, and what do they already know?
Pages. List them. A small business site is often home, services, about, contact. A portfolio may be home, work, contact.
Content. Gather your real text, photos, and any facts you want shown. The model fills gaps with generic copy if you give it nothing.
Functions. Do you need a contact form, a payment button, a booking link, a members area? Write them down now. Functions are what separate a page from a site.

That last item matters most. A static page can be pasted onto hosting. A form that sends you an email, or a checkout that takes payment, needs a backend. Plan for it early so you do not rebuild later.

For a deeper look at how to organize pages so both people and AI tools can read them, see our guide on AI website architecture.

Prompts that work: build in small steps

Specific, short prompts beat one giant request. One practical test showed that GPT-4 produced a basic responsive landing page in four prompts and about ten minutes, with a navbar, call-to-action, gallery and footer, once the prompts were very specific. It is a single hands-on experiment, so treat it as an example of the pace, not a promise.

Here is a sequence you can reuse.

Step 1: Set the frame

Tell the model what it is building and for whom.

You are a front-end developer. Build a single-page site for a freelance photographer in Austin. Use semantic HTML and plain CSS. Mobile first. Do not use any external libraries.

Step 2: Ask for structure only

Create the page skeleton: header with logo text and four nav links, hero with one headline and one button, three service cards, a contact section, and a footer. No styling yet.

Step 3: Add style with limits

Style it with a dark gray background, off-white text, and one orange accent color. Use a system font stack. Keep the layout to a 1100px max width.

Give hard values. “Modern and clean” gives you whatever the model guesses. “One accent color, 1100px max width” gives you something you can judge.

Step 4: Add your real content

Paste your actual text and tell the model to use it word for word. Ask it to flag anything it changed.

Step 5: Refine one thing per message

Bad: “Fix the header, make the cards bigger, change the font, and add a footer link.”

Better: “The nav wraps on a 360px screen. Make it collapse into a menu button.”

One change per message makes it clear what broke when something breaks. Our prompt engineering guide for websites and apps goes further, with patterns for forms, data and multi-page projects.

A prompt checklist

✓ State the goal and the audience
✓ Name the pages and sections
✓ Give exact colors, widths and fonts
✓ Supply real text
✓ Ask for one change at a time
✓ Describe what the result should do, not only how it looks

Which model is best for building a website?

There is no single answer, and it changes as models change. What stays true is that the quality of your prompts matters as much as the model. Different assistants have different strengths, and many people switch between them within one project. A fair test is simple: give two assistants the same prompt and compare the pages side by side.

If you want to use more than one, the real risk is losing context. Each chat starts from nothing. Our write-up on a three-stage workflow with ChatGPT and Claude shows how to divide the work, and our piece on avoiding AI lock-in covers keeping your project portable.

Getting access to GPT-4

GPT-4 itself is no longer offered in ChatGPT; its newer successors are. Through OpenAI’s API, the availability of older models like GPT-4 changes as OpenAI retires them. Which models you can use, and whether they are free or paid, depends on your plan and changes over time, so check the current options on OpenAI’s own site before you start. Whatever you pick, the access question is separate from the publishing question. A free chat can still write code. It still cannot host it.

Preview, test and improve before launch

Code from a chat window looks right until you open it. Run this check before any visitor sees it.

Preview

Save the HTML as a file and open it in a browser. Look at every page. Then resize the window to phone width. If something looks wrong, take a screenshot and describe it to the model with the exact problem.

Test function

Click every link and button.
Submit every form. Does the message arrive somewhere you can read it?
Try the form with an empty field and with a typo in the email address.
If you take payments, run a full test purchase before you announce anything.

A plain HTML form does nothing by itself. It needs a place to send data. This is the point where generated code most often looks finished but is not.

Test on real devices

Check one phone and one laptop at minimum. Look at text size, tap targets, and whether images load quickly. Ask the model to compress or resize images if pages feel slow.

Test for accessibility

Every image has a short text description.
Text has strong contrast against its background.
You can reach every link and button with the Tab key.
Headings go in order, one main heading per page.

Ask the model to audit its own code against this list, then verify the fixes yourself in the browser.

Test for security

Never paste passwords or secret keys into a chat or into front-end code. Anything in the page source is public. Keys and logic that must stay private belong on a backend. Maintenance, security and performance still need a human in charge, whoever wrote the first draft.

The gap: from chat window to live site

If you take the manual route, the steps look like this:

Copy the code into files on your computer.
Upload them to a static host such as GitHub Pages or Netlify.
Buy a domain from a registrar and point its DNS at your host.
Add a separate service for forms, another for email, another for payments.
Come back to the chat every time you want an edit, then copy the new code over the old.

That works for a simple page. It becomes slow once you have a contact form, a store, or more than a handful of pages. Every edit is a copy and paste. Every function is another account to set up. See our guide on how to host an AI website for the full picture of hosting options and what each one needs.

A faster path: let your AI publish for you

WebsitePublisher removes the copy-and-paste step. It is a full-stack AI web platform for websites and apps. Your AI assistant connects to it, and the assistant builds and publishes for you.

Here is how that works.

Connect. Your AI assistant (ChatGPT, Claude, Gemini, Grok and others) connects to WebsitePublisher through the WebsitePublisher connector, which uses MCP, the Model Context Protocol. In ChatGPT, use the WebsitePublisher app (@WebsitePublisher), which works on ChatGPT Free and Plus. You can see the list of supported AI platforms.
Describe. You tell your assistant what you want in plain language: pages, content, functions.
Build. The assistant builds your website or app on the platform. It does not hand you code to paste.
Live. Every change on WebsitePublisher is live immediately. There is no separate deploy or publish step.
Refine. Ask your assistant for changes, or use the visual browser editor to adjust content and design yourself without regenerating the page.

Why full-stack matters

A prompt can describe a contact form. Something has to receive it. WebsitePublisher includes a built-in backend: hosting, auth, payments, forms, email, uploads and data. Your assistant snaps together 100+ tested integrations instead of generating untested glue code. That means a form is a working form, not a code sample.

Built-in backend features and tested integrations

This is also what lets you build apps and not only pages. Data, user accounts and payments are part of the platform, so the same conversation that creates a landing page can create something with logins and stored records.

Memory across sessions

Project memory and task history stay across sessions and assistants. If you start with one AI and want to continue with another, the project context carries over. You do not paste your brief again.

Want to see it applied? Our ChatGPT page explains the setup for that assistant, and our five-prompt guide to building a ChatGPT website walks through a build step by step.

Perspective

We built WebsitePublisher around one idea: the AI should do the whole job, not half of it.

A model like GPT-4 is very good at writing. Hand it a clear brief and you get a decent first draft of a page. The trouble starts after the draft. Hosting, forms, email, payments and data are separate problems, and each one pulls you out of the conversation and into setup screens.

So we made the backend part of the platform. Our AI web platform is full-stack, and your AI assistant builds and publishes websites and apps through the WebsitePublisher connector. The assistant works with 100+ tested integrations, so it assembles proven pieces rather than inventing new ones every time.

We also think you should not be tied to one assistant. Models change quickly. Your project should stay put while you switch tools. That is why project memory and task history are kept across sessions and assistants.

Our advice: start small, with one page and one function. Get it live. Then keep talking to your assistant and let the site grow.

Start building websites and apps with WebsitePublisher

If you already use ChatGPT, Claude, Gemini or Grok, you have most of what you need. Connect your assistant, describe the site or app you want, and it goes live as your assistant builds it. You can begin on the free plan and move up when you need more projects. See the current plans on our pricing page.

Websitepublisher

Want the overview first? Our AI web platform overview shows what the platform covers. Developers who want to run their own code can read about bringing your own code.

Who this approach fits

Freelancers who need a portfolio fast and want to edit it without touching code.
Small business owners who need a site with a working contact form or checkout.
Agencies that run several client sites and need quick setup. Our guide to AI for web agencies covers where AI saves time and where human review stays.
Founders and developers who want a backend without managing servers.

If you are after a quick timeline, our walkthrough of building a site in 90 minutes gives a concrete schedule.

A simple first project, step by step

To make this concrete, here is a first build for a small consulting business. The goal is one page that collects inquiries.

Write your goal: “Get inquiries from local clients.”
List sections: hero, three services, short bio, contact form.
Connect your assistant to WebsitePublisher.
Prompt: “Build a one-page site for a consulting business with a hero, three services, a short bio and a contact form that sends submissions to me by email.”
Review the live result in your browser, on desktop and on your phone.
Send your real text and photos. Ask for one change at a time.
Submit the form yourself and confirm the email arrives.
Use the visual browser editor for small text edits. Go back to the assistant for bigger changes, such as a new page.

Because changes are live immediately, you check the real result at each step instead of a local preview that may differ from production.

FAQ

Can GPT-4 build a website on its own?

GPT-4 can write the code for a website, including HTML, CSS and JavaScript. It cannot host the files, register a domain or run a backend. You need a hosting step, or a platform whose connector lets your AI assistant publish for you.

Which GPT is best for building a website?

There is no fixed winner, because models change often. Choose one that follows detailed instructions well, then judge it by the page it produces from your own prompt. With WebsitePublisher you can use ChatGPT, Claude, Gemini, Grok and others, so you are not locked to one.

Is GPT-4 free to use?

GPT-4 is no longer offered in ChatGPT, and access to its newer successors depends on OpenAI’s plans, which change over time. Check OpenAI’s current options on its site. Separately, WebsitePublisher has a free plan, and our pricing page lists the rest.

What do I need to publish a site made with GPT-4?

If you copy the code yourself, you need a host, a domain and separate services for forms, email and payments. If you use WebsitePublisher, hosting and those functions are built in, and your AI assistant publishes through the WebsitePublisher connector.