Rag Chatbot Portfolio.zip

Overview

A RAG (retrieval-augmented generation) chatbot for the portfolio site: visitors ask questions about the projects, it retrieves the relevant case-study content, and Claude answers grounded in that content. Built to replace the Strapi-dependent content flow — this reuses the same project content as the source of truth for both the site and the chatbot.

Stack decisions:

• Embeddings: Voyage AI (Anthropic's recommended embedding partner, free tier covers this easily)
• Retrieval: no vector database — embeddings precomputed into a static JSON file, searched with in-memory cosine similarity at request time. Real RAG, zero extra infrastructure, zero recurring cost at this content scale.
• Generation: Claude API, Haiku model (fast, cheap, right-sized for a portfolio chatbot)
• Deploy target: Next.js App Router API route + chat component, deployed live on the site via Vercel (not just a demo)

Setup

1. Copy the files below into the existing Next.js project, preserving the folder structure (app/api/chat/, components/, content/, lib/, scripts/).
2. npm install — no new dependencies needed; everything uses plain fetch.
3. Fill in content/projects.json with real project data (the Rimo case studies — shadcn/ui migration, Playwright/PostHog/Linear pipeline — are natural first entries).
4. Add two env vars locally (.env.local) and in Vercel project settings:
   • ANTHROPIC_API_KEY — from console.anthropic.com
   • VOYAGE_API_KEY — from voyageai.com (free tier)
5. Generate embeddings: node --env-file=.env.local scripts/build-embeddings.mjs — re-run whenever content changes.
6. Add <ProjectChat /> to a page or layout.
7. Deploy.

Cost: effectively free at this scale — embeddings are a few cents' worth of API calls per content update, and Haiku is priced for lightweight high-volume use.

Interview talking points this demonstrates: end-to-end RAG pipeline (chunking, embeddings, retrieval, grounded generation); a deliberate infra tradeoff (static JSON + in-memory search vs. a vector database) made for actual scale rather than by default; secure server-side API key handling; practical LLM API integration in a production Next.js app.

(Note: I couldn't attach these as a downloadable zip directly to Notion — file uploads here require a public HTTPS URL or small UTF-8 text content, and a zip is binary. The zip is available to download from the chat where this was built. Pasting the full source below instead, which is also easier to reference directly from Notion.)

content/projects.json