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.
By the Astro Nursery team. Review lead: Ryan James, Founder & CEO, Seahawk MediaPublished 8 minute readComplete beginner
Tested on Astro 7.4
In this guide
ChatGPT is OpenAI’s AI helper. Like Claude, it can build an Astro site in two ways. In the first way, you chat and paste in the code yourself. In the second way, you use Codex. Codex is OpenAI’s coding agent. An agent is an AI that edits your project files for you.
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
Make the Astro project with the official tool. It is always up to date. It also 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. This is a note for AI tools. It tells them how the project works. Codex reads it on its own.
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. Why? 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. Check your site before you move on. Report back what you see. Paste any errors exactly as they appear.
Step 3: Ask it to explain
Does ChatGPT give you something you do not understand? Ask “what does this line do?” The answers are usually good. They are how you stop being a beginner.
Option 2: Build with Codex
Step 1: Install Codex
On a Mac or Linux, type this in your terminal:
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). On Windows, there is 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 recommends this 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. It asks you to approve. Check the page yourself after.
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. MCP is a way for AI tools to read live docs instead of using memory. The Astro docs have setup steps for Codex. For ChatGPT, they point you to OpenAI’s own MCP docs. 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 in a phone-sized window.
- Look for old patterns. Our list of mistakes AI makes with Astro covers the common ones. One is 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. It can write Astro code for you to paste in. Codex edits files for you. Its documentation says it is included with paid ChatGPT plans such as Plus and Pro.
Does ChatGPT know Astro 7?
Not always. Its training has a cutoff date. So always tell it your Astro version. You can also connect 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 the friendly people in the official Astro and EmDash Discords. How to ask so people can help.