Home Files
Build With Claude Code · Session 2 Handout

Add a grounded chatbot

A chat box on your live site, grounded in your resume, with the secret key kept safely off the public page.

1. Two prompts you'll paste

Open your Session 1 project in Claude Code, then send these one at a time.

First, build the bot's knowledge:

Read my resume PDF and fill in api/corpus.md with my real background,
experience, skills, and education, using only facts from the resume, public-safe.

Then add the chat box and the helper function:

Add a chat widget to my site, plus a serverless function at api/chat.js that
answers questions using only api/corpus.md. Use the @anthropic-ai/sdk package
with the model claude-sonnet-4-6, add a package.json with that dependency, and
add a vercel.json that bundles api/corpus.md with the function. The API key
must come from the ANTHROPIC_API_KEY environment variable, never in the page.
The whole guardrail is one line in the function: answer only from the context. That is why the bot can talk about you but not the open internet. And the key comes from an environment variable, so it is never written into the page. (The prompt looks technical: that is on purpose. It names the exact packages and files so everyone ends up with the same working setup.) Want to see what your project should end up matching? The templates (api/chat.js, chatbot.html, vercel.json, package.json) are all on the files page.
The chat box will not work in the local preview. The helper function only runs on Vercel's servers, so the preview on your computer can't answer. That is expected, not a bug. Deploy first, then test on the live site.

2. Put the key in Vercel (the safe box)

Your site is public, so the key can never live in the page. It goes in one box on Vercel's servers instead. You'll create your own Anthropic API key (walkthrough below) and paste it in.

  1. Open vercel.com → your project → Settings → Environment Variables.
  2. Add a variable named exactly ANTHROPIC_API_KEY (capital letters, underscores).
  3. Set the value to your Anthropic key (it looks like sk-ant-...).
  4. Click Save.
  5. Redeploy so the key takes effect. (Ask Claude Code "redeploy my site," or click Redeploy in Vercel.)
The #1 snag: the name must be exactly ANTHROPIC_API_KEY, and you must redeploy after adding it. A typo or a skipped redeploy is why the bot says "not configured yet." The full key guide, with the why: vercel-env-setup.md.

Cost, in plain numbers: a cent or two per message with a resume-sized corpus, a few cents once your Session 3 corpus is bigger (Haiku is ~5x cheaper). You set a small spend cap on your workspace in the Console (~$5 is plenty), so spend simply stops at the cap and cost can't run away.

3. Your checklist

Before you start: your Session 1 site is live, and you've created your own Anthropic API key with a spend cap (2-minute walkthrough: vercel-env-setup.md).

  1. Open your Session 1 project in the Claude Code desktop app.
  2. Build the corpus. Paste the first prompt above.
  3. Add the chatbot. Paste the second prompt above.
  4. Verify the file layout. Ask Claude Code: "Check that my project has api/chat.js reading api/corpus.md, a package.json with the @anthropic-ai/sdk dependency, and a vercel.json that bundles api/corpus.md with the function, and that vercel.json has no builds section left over from Session 1 (delete it if present, or the chatbot function won't deploy). Fix anything missing."
  5. Deploy the update to Vercel. (Don't test the chat box in the local preview; it can only answer on the live site.)
  6. Add the key in Vercel (section 2 above).
  7. Redeploy so the key takes effect.
  8. Test on the live site. Ask 3 real questions about you. Confirm the answers are accurate.
  9. Test the guardrail. Ask something off-topic ("what's the weather?"). It should politely decline.
  10. Confirm the key is hidden. On the live page, right-click, View Source, search for sk-ant. You should find nothing. That is the point.
Done when: a stranger can open your live site, ask "what does this person do?", and get an accurate answer, and the key is nowhere in the page source.