How to Build an Astro Website With ChatGPT
Use ChatGPT to build an Astro site, either by chatting and pasting code, or with Codex, OpenAI's coding agent that works inside your project.
Tested on Astro 7.4
In this guide
ChatGPT is OpenAI’s AI assistant. Like Claude, it can build an Astro site in two ways: you chat and paste the code yourself, or you use Codex, OpenAI’s coding agent, which edits your project directly.
Which way should you use?
| Chat at chatgpt.com | Codex | |
|---|---|---|
| Where it runs | In your browser | In your terminal, editor, or the Codex app |
| Who edits the files | You | Codex, with your approval |
| Can it run commands? | No | Yes |
| Cost | Free plan available | Included with paid ChatGPT plans |
| Best for | Learning, small changes | Building and changing whole sites |
Before you start: create the project yourself
Create the Astro project with the official tool. It’s always current, and it saves the AI from guessing at the setup:
npm create astro@latest my-site -- --template basicsNew to this? Our free course covers it. The project comes with an AGENTS.md file, which is a note for AI tools about how the project works. Codex reads it automatically.
Option 1: Build with the chat
Step 1: Set the scene
Tell ChatGPT your version and your goal in the first message. This matters more than anything else, because Astro’s content system, Tailwind setup and page transitions all changed in recent versions:
I'm a beginner using Astro 7.4, created with "npm create astro@latest" and
the basics template. I want a portfolio site with a home page, a projects
page and a contact page. Give me one step at a time, with the full contents
of each file. Use only current Astro APIs, and tell me if you're unsure.Step 2: One file at a time
Create each file as ChatGPT gives it to you, save, and check your site before moving on. Report back what you see, especially errors, pasted exactly.
Step 3: Ask it to explain
Whenever ChatGPT gives you something you don’t understand, ask “what does this line do?” The explanations are usually good, and they’re how you stop being a beginner.
Option 2: Build with Codex
Step 1: Install Codex
On a Mac or Linux:
curl -fsSL https://chatgpt.com/codex/install.sh | shYou can also install it with npm (npm install -g @openai/codex) or Homebrew (brew install --cask codex). Windows has a PowerShell command in the official README.
Step 2: Start it inside your project
cd my-site
codexChoose “Sign in with ChatGPT” and log in. The README says this is the recommended route for Plus, Pro, Business, Edu and Enterprise plans.
Step 3: Give it a task
Read AGENTS.md first. Add a projects page at /projects that lists three
projects from a simple array, each with a title, description and link.
Add it to the navigation. Start the dev server and confirm the page loads.Codex shows you what it wants to change and asks for approval. Check the page yourself afterwards.
Step 4: Keep tasks small and specific
- “Add a blog using content collections, with one sample post.”
- “Add Tailwind using the official astro add command, then style the header.”
- “Run the build and fix any errors it reports.”
Connect ChatGPT to the Astro docs
Both ChatGPT and Codex can use the official Astro docs MCP server, which gives them live documentation instead of memory. The Astro docs have setup instructions for Codex, and point ChatGPT users to OpenAI’s own MCP documentation. See how to connect Claude and ChatGPT to the Astro docs.
Check the work
- Run
npm run build. It must pass with no errors. - Open every page on a phone-sized window.
- Look for outdated patterns. Our list of mistakes AI makes with Astro covers the common ones, like the old content config location.
Where to go next
- Astro prompts for Claude and ChatGPT
- Claude vs ChatGPT for building websites
- How to build an EmDash site with AI, if you want a dashboard
Frequently asked questions
Is ChatGPT free to use for this?
ChatGPT has a free plan that can write Astro code for you to paste in. Codex, which edits files for you, is included with paid ChatGPT plans such as Plus and Pro, according to its documentation.
Does ChatGPT know Astro 7?
Not reliably. Its training has a cutoff date, so always tell it your Astro version, and consider connecting it to the Astro docs through MCP.
Which is better for Astro, ChatGPT or Claude?
Both can build an Astro site. The bigger difference is between chatting and using a coding agent. We compare them in our Claude vs ChatGPT guide.
Stuck on a step?
Check the common errors guide, look up a word in the glossary, or ask in the official Astro Discord, where the support channels are friendly to beginners.