Lección 01

Setup: Next.js + API key + variables de entorno

Montamos el proyecto base con Next.js 15 y dejamos lista la API key de Claude para empezar a tirar requests.

Stack del proyecto

• Next.js 15 (App Router) — para tener frontend y endpoint API en un solo proyecto.
• TypeScript — porque el any es el camino del dolor.
• Tailwind CSS — para no perder tiempo con CSS.
• @anthropic-ai/sdk — SDK oficial de Claude.

Crear el proyecto

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

Obtén tu API key

1. Entra en console.anthropic.com.
2. Crea una cuenta. Te regalan ~5€ de crédito.
3. Ve a API Keys → Create Key. Cópiala (sólo se ve una vez).

Variables de entorno

Crea .env.local en la raíz del proyecto:

ANTHROPIC_API_KEY=sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Y un .env.example para git:

ANTHROPIC_API_KEY=sk-ant-api03-...

Añade .env.local a .gitignore (Next.js ya lo hace por defecto, pero verifica). Nunca commitees una API key real.

Tu primer endpoint

Crea 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: "Eres un asistente útil. Responde en español, en frases cortas.",
    messages,
  });

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

Pruébalo

npm run dev

Y desde otra terminal:

curl http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"messages":[{"role":"user","content":"Di hola en 3 idiomas"}]}'

Si recibes JSON con text: "Hola, Hello, Bonjour...", vas bien. En la siguiente lección montamos el state en el front y le damos memoria.