Build With Claude Code · Session 2

Add a chatbot that answers questions about you

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

What is RAG?

The bot only answers from documents you give it, not the open internet.

Today the document is your resume. Ask it about you → it answers. Ask it about the weather → it declines. The bot is exactly as good as the document behind it.

The key problem

To talk to Claude, your site needs an API key, basically a password that costs money every time it's used.

Your website is public. Anyone can read its code. Put the key in the page, and anyone can steal it and spend on it.

The fix: keep the key on the server

Visitor's
browser

→

Your helper
on Vercel
(holds the key)

→

Claude

The browser asks; the helper holds the key and does the talking. The key never reaches the public page. This is your first client-and-server split.

What you do, step by step

Turn your resume into corpus.md (the bot's knowledge)
Add the chat box + a helper at api/chat.js
See how an API key & spend cap are made
Paste your Anthropic key into Vercel's safe box
Redeploy and test on your live site

The chat box only works on the live site. The helper runs on Vercel's servers, so the local preview can't answer. Deploy first, then test.

The two prompts that build it

You don't write code. You give Claude Code two plain-English prompts, in your Session 1 project.

1 · The 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."

2 · The chatbot: "Add a chat widget to my site, plus a serverless function at api/chat.js that answers using only api/corpus.md..." The full prompt also names the exact package, model, and config files, so everyone gets the same working setup. Copy it from the handout.

That second prompt builds the chat box visitors see and the helper that does the secret work, in one go. You stay the editor; Claude writes the code.

The safe box

In Vercel: Settings → Environment Variables, add one named exactly:

ANTHROPIC_API_KEY = your Anthropic API key

Spell the name exactly, and redeploy after saving; a new key only works after a redeploy. This is the #1 thing people miss.

Cost, in real numbers

A cent or two per message now; a few cents once your Session 3 corpus is bigger (cheaper on Haiku)
Your workspace has a spend cap you set (~$5 is plenty) in the Console
Hit the cap and the key stops, no runaway cost, ever
It's your own key, so you see and control every cent

The proof

Open your live page → View Source → search for the key.

You'll find nothing. The site is public; the key is invisible. That's the whole design working.

Your turn

Add the grounded chatbot to your Session 1 site
Wire in your key via Vercel, redeploy
Test 3 real questions + 1 off-topic (it should decline)
Share your live link with anyone

Follow the Session 2 handout (both prompts, copy buttons, and the key steps) to do it without the video.

Up next · Session 3

Give it a voice: build a rich personal corpus

Same bot, far better answers. You'll talk your way to a 20-page knowledge base.

Start Session 3