How we build
the chatbot.

A chatbot used to be a two-week project. With an AI coding assistant sitting next to you — Claude Code, Cursor, Windsurf, whichever one you like — it's a Saturday afternoon. This is the workflow that actually works.

01The mindset shift

Stop thinking about how to write the code. Start thinking about what you want, one small chunk at a time, and let the AI write it. Your job is to describe the outcome, verify each step, and know when to move on. If a step doesn't work, you don't debug from scratch — you tell the AI what happened and it fixes it.

The trick is ordering the chunks so each one produces something you can test right now.

02What you need before you start

Three accounts and one tool: Anthropic (for the API key that powers the model), Supabase (for the database), and an IDE with an AI assistant (Cursor, Windsurf, or Claude Code in your terminal). Total signup time: under ten minutes.

03The stack

Next.js on the frontend, Supabase for the database, Claude as the model. Not because it's the only way — but because it's the fewest moving parts. One deploy target (Vercel), one database, one AI API key. You can swap any of them later.

Your job is to describe the outcome, verify each step, and know when to move on. The AI does the rest.

04Building it, one prompt at a time

Start with the shell. Ask the AI to spin up a fresh Next.js project with the SDKs you'll need and placeholder environment variables. Don't paste your real keys into the prompt — the AI writes the config, you paste the keys yourself into .env.local. Verify with npm run dev. If the dev server runs, move on. If not, tell the AI the exact error message and it fixes it.

Then the widget, with no brains. Describe the UI: a floating button, a slide-out panel, a message list, an input. Tell it to hard-code a dummy "hello" message so you can see something on screen. This step doesn't touch the AI or the database yet — it's just proving the visual shell renders.

Then the API endpoint, with no brains either. Ask the AI to create pages/api/chat.js that accepts a POST with a messages array and returns {answer: "Echo: " + last message}. Test with curl. This proves the plumbing between browser and server works before you complicate it.

Then wire them together. Tell the AI to have the widget POST to /api/chat when the user hits send, show a typing indicator while waiting, and render the response. Now you have a "chatbot" that echoes. Congratulations — the whole architecture works. Everything after this is swapping the echo for something smarter.

Then bring in Claude. Replace the echo with a real call to Anthropic. One prompt: "In pages/api/chat.js, use the @anthropic-ai/sdk to call Claude with the incoming messages. Use claude-sonnet-4-5. System prompt: you are a friendly assistant for {my company}." The AI writes the twenty lines of code. You test with a real question and get a real reply. This is the moment it feels like magic.

Then the database. Ask the AI to write the SQL migration for three tables: conversations, messages, and leads. Include row-level security. Run the SQL in Supabase's SQL Editor — one paste, one click. Now the schema exists. Then have the AI update your API route to insert every message into the database as it flows through. Suddenly you have a permanent record of every conversation, and you didn't write a single SQL query yourself.

Then lead capture. This is the clever bit. Extend the system prompt so Claude appends a hidden JSON block whenever a visitor gives their name or email. Then have the AI parse that block out of the response server-side, insert into the leads table, and strip it before returning the visible text. Now your chatbot doesn't just chat — it captures qualified prospects while they think they're just asking questions.

Then safety. Rate limits, input length caps, history truncation. One prompt covers all three. This is boring but it's the difference between a demo and a production tool. Test by spamming your own endpoint until it starts rejecting you.

Then deploy. Push to GitHub, connect to Vercel, paste your environment variables into the dashboard. Vercel builds automatically. Two minutes later your chatbot is live on the internet. Ask the AI: "Give me a checklist of every environment variable I need in Vercel." It hands you the list. You paste, redeploy, done.

05What actually makes this work

Small verifiable steps. Never let the AI write more than one chunk between tests. If step 4 fails, you know exactly what broke. If you asked for the whole app in one prompt and got a broken app back, you'd have no idea where to start debugging.

Real error messages. When something breaks, paste the exact error into the AI. Don't paraphrase. The AI can read a stack trace better than you can.

Verifying visually. After every step, look at the browser or hit the endpoint with curl. Don't trust that the code works because the AI says so — check it yourself.

Knowing when to stop. The chatbot doesn't need streaming, doesn't need Markdown rendering, doesn't need voice input on day one. Ship the boring version, put it in front of real users, then let their behavior tell you what to add next.

06The last thing

The hardest part of this build isn't the code. It's the system prompt — the instructions you give Claude about who it's supposed to be and how to talk. Spend more time there than anywhere else. Read a hundred real conversations from your logs, notice where the bot answered something wrong or missed a lead, and tune the prompt. That's the whole product.

You don't need to be a developer to do this. You need to be someone who can describe what they want clearly, verify the result honestly, and iterate until it's right. The AI does the rest.