Lesson 01

Setup: Next.js + API key + environment variables

We bootstrap the project with Next.js 15 and wire up the Claude API key so we can start firing requests.

Project stack

• Next.js 15 (App Router) — frontend and API endpoint in a single project.
• TypeScript — because any is the road to pain.
• Tailwind CSS — no time wasted on CSS.
• @anthropic-ai/sdk — official Claude SDK.

Create the project

npx create-next-app@latest my-chatbot --typescript --tailwind --app --eslint --no-src-dir --import-alias "@/*"
cd my-chatbot
npm install @anthropic-ai/sdk

Get your API key

1. Go to console.anthropic.com.
2. Create an account. You get ~€5 in credit.
3. Go to API Keys → Create Key. Copy it (visible only once).

Environment variables

Create .env.local at the project root:

ANTHROPIC_API_KEY=sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxxxxxx

And a .env.example for git:

ANTHROPIC_API_KEY=sk-ant-api03-...

Add .env.local to .gitignore (Next.js does this by default, but verify). Never commit a real API key.

Your first endpoint

Create app/api/chat/route.ts:

import Anthropic from "@anthropic-ai/sdk";
import { NextRequest, NextResponse } from "next/server";

const client = new Anthropic();

export async function POST(req: NextRequest) {
  const { messages } = await req.json();

  const res = await client.messages.create({
    model: "claude-haiku-4-5",
    max_tokens: 1024,
    system: "You are a helpful assistant. Reply in short sentences.",
    messages,
  });

  return NextResponse.json({
    text: res.content[0].type === "text" ? res.content[0].text : "",
  });
}

Test it

npm run dev

From another terminal:

curl http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"messages":[{"role":"user","content":"Say hi in 3 languages"}]}'

If you get JSON with text: "Hi, Hola, Bonjour...", you are good. Next lesson: front-end state and memory.