Behind the build
How this site was built
Prototype-first design, the stack, the security hardening, and the agentic build process — how this site went from wireframe to production.
Prototype first
Designed with Claude as a full HTML wireframe before any framework code: layout, typography, the purple identity, light/dark tokens — all locked in a single static prototype, then translated into components. Design decisions live in a design brief and architecture decision records, not in anyone's head.
Design system
CSS custom-property tokens drive both themes — flip one attribute and light/dark just works. JetBrains Mono for structure, Inter for prose, purple as the brand. CSS modules only; CopilotKit runs headless, its stylesheet aliased away at build so no foreign CSS ever ships.
The stack
Next.js 15 App Router + TypeScript on Vercel. "Ask Srinivasan" is a CopilotKit BuiltInAgent speaking AG-UI, with tiered models through Vercel AI Gateway (Groq fast, Cerebras balanced), retrieval over Postgres + pgvector (HNSW), and Upstash Redis rate limiting. Interactive answers render as MCP Apps in sandboxed iframes.
Security as a feature
Strict CSP with zero unsafe keywords — per-request nonces plus hashed inline scripts and styles. A guard pipeline (scope gate, canary, server-verified citations), three-tier rate limiting, and a read-only, stateless MCP server. The same application security reviews discipline from the day job, applied to the agent surface.
Built with Claude
The build itself was agentic: Claude Code planned against a locked implementation spec, spawned subagents for parallel workstreams — consistency audits, persona reviews, diagram design — and every change ran lint, build, and the test suite before push.
Shipped on Vercel
Push-to-deploy from main. Edge middleware stamps the per-request CSP nonce, features are environment-gated, and the whole thing is a static single page plus one chat runtime route. Small surface, fast pages, nothing to babysit.