After this lesson, you will be able to: Build and deploy a functional AI-powered tool using the Anthropic API and Next.js, then write the case study that goes with it.
This is the formal passion project for the AI track per Curriculum-Upgrade.md. Pick one of three project briefs, build it end-to-end with the Anthropic API + Next.js + Vercel, and produce the case study a hiring manager will read.
Anthropic's API is the most senior-engineer-friendly LLM API in 2026: predictable structured output, prompt caching for cost, computer use and tool calling baked in. Next.js is the dominant React framework for AI products; server components let you keep your API key off the browser, and Vercel deployment is sub-5-minutes. The combination is what most real AI features in 2026 production look like.
Pick the one that lights you up, you'll spend 10-20 hours on it.
Brief 1, Document Summariser: drop a PDF, get a structured summary (key points, action items, open questions, sentiment). Cost target: under $0.05 per document.
Brief 2, Custom Assistant: a chatbot with a system prompt tailored to one specific use case (e.g. a personal D&D dungeon master, a startup-pitch coach, a code-review buddy). User can save conversations.
Brief 3, Structured Data Extractor: paste unstructured text (job listings, recipes, RSVPs), get back a typed JSON object validated by Zod that downstream systems can consume.
Treat this as a real product launch, not a school project.
M1, Spec: write a 1-page spec covering user, problem, success metric, cost target. Get a peer to sign off before coding.
M2, Prompt prototype: build the prompt in the Anthropic Console. Iterate against 5 hand-picked test inputs until it works.
M3, Eval set: build a 20-case JSON eval set (use the cs-vuln-cve template style); run baseline pass rate.
M4, Next.js scaffolding: `npx create-next-app@latest`, add Tailwind, set up the API route at /api/generate that proxies Anthropic.
M5, UI: simple input form, streaming output, copy button. Don't over-design.
M6, Cost telemetry: log token counts per request to your own DB (SQLite or Vercel KV). You need to know your cost shape.
M7, Deploy to Vercel: connect to GitHub, add ANTHROPIC_API_KEY as env, push to main, custom domain.
M8, Three users: get three real people to use it. Watch over their shoulder. Take notes.
M9, Case study: write the README + a blog post (Markdown) covering the user problem, the prompt design choices, the failure modes you found, the metrics. Link the eval set.
This is the canonical shape. Read it carefully.
// app/api/generate/route.tsimport Anthropic from "@anthropic-ai/sdk";import { NextResponse } from "next/server";const client = new Anthropic(); // reads ANTHROPIC_API_KEY from envexport async function POST(req: Request) {const { input } = await req.json();// Stream for snappy UXconst stream = await client.messages.stream({model: "claude-sonnet-4-6",max_tokens: 1024,system: "You are a concise document summariser. Respond with JSON: { key_points: string[], action_items: string[], open_questions: string[] }.",messages: [{ role: "user", content: input }],});// Server-Sent Events back to the browserreturn new NextResponse(stream.toReadableStream(), {headers: { "Content-Type": "text/event-stream" },});}
Treating it as a school project. The case study is the artefact; the working app is the demo. Skipping the deploy. A local-only build is invisible to hiring managers. Skipping the eval set. 'It worked for me when I tested it' is not a portfolio claim. Hiding the API key in the browser. The system prompt + API key in client code is a 30-second leak. Always proxy through your Next.js server route. Overscoping. Brief 1 in one weekend beats Brief 1 + 2 + 3 half-finished.
Sign in and purchase access to unlock this lesson.