Hello There

Greet your friends using generative AI!

Visit /<their name> and Johnny greets them with a pun on their name. The first visit asks Claude Sonnet 5.5 to write the greeting, and every visit after that reads it back from Cloudflare KV.

Notable Tech Featured

• SvelteKit
• Cloudflare Workers, with a KV namespace storing greetings
• Claude via the Anthropic TypeScript SDK
• Tailwind CSS v4
• Vite+ for dev, build, test, lint and format
• Takumi to render each name's open-graph card

Related video content

Johnny often livestreams development over at YouTube

Check out the video tutorial specifically about this project! It covers the original 2023 version.

Running locally

You need the Node and pnpm versions in mise.toml (mise install sorts both out), then:

pnpm install
cp .env.example .env # then fill in your Anthropic API key and admin credentials
vp dev

Then visit http://localhost:5173 🚀

KV runs locally through Wrangler, so nothing touches your Cloudflare account until you deploy. Without an API key the site still works: greetings already stored in local KV render, and new names get a friendly "lost for words" message.

Before calling a change done, run everything CI runs:

vp run sanity

Deploying

pnpm wrangler kv namespace create hello-there --binding KV
pnpm wrangler secret put ANTHROPIC_API_KEY
pnpm wrangler secret put ADMIN_USERNAME
pnpm wrangler secret put ADMIN_PASSWORD
pnpm run deploy

The first command writes the namespace id into wrangler.jsonc: run vp fmt and commit that change.

After that, every push to main deploys from CI once the tests pass, using the CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID repository secrets.