Your first AI-assisted web app: from prompt to deploy

AI coding assistants are at their best when you treat them like a fast, capable pair programmer: you own the plan, they do a lot of the typing. This guide walks through building a small app end to end.

1. Start with a written plan

Before you open your editor, write down in plain language:

• What the app does — one or two sentences.
• The pages — e.g. a home page, a list page and a detail page.
• The data — what you store and where.
• What "done" means — it builds, it deploys, and the main flow works.

Paste that plan into your assistant and ask it to propose a file structure before writing code. Correcting a plan is much cheaper than correcting code.

2. Scaffold with the official tools

Let the framework's CLI do the boring setup:

npx create-next-app@latest my-app --ts --tailwind --eslint --app
cd my-app
npm run dev

Then ask your assistant to build one feature at a time. Small, reviewable steps beat one giant prompt.

3. Iterate in tight loops

A good loop looks like this:

1. Describe the change and the acceptance criteria.
2. Let the assistant make the edit.
3. Run it. Read the diff.
4. Commit when it works.

If you can't explain what a change does, don't commit it yet. Ask the assistant to walk you through it.

4. Verify before you ship

Run the same checks your CI will:

npm run lint
npm run build

Fix every error — ask the assistant to explain each one rather than just silencing it.

5. Deploy

Push to GitHub, import the repo into your host, add your environment variables, and deploy. Most modern hosts give you a preview URL for every branch, which is perfect for checking AI-generated changes before they reach production.

What's next

Once the basics feel comfortable, add a database and authentication — see the Supabase guide in this series.