⏱ Tiempo estimado: 25 minutos

🎯 Rama / Perfil: Frontend devs que ya construyeron el chatbot de terminal del curso y quieren llevarlo a una interfaz de producción

🧠 Conocimiento previo necesario: Haber activado streaming con la Claude API (clase 5 del curso). Bases de React/JavaScript.

💡 ¿Qué vas a lograr? Una página web en Next.js donde la respuesta de Claude aparece en tiempo real, token por token, igual que en Claude.ai — no en la consola, sino en el navegador.

🛠 Lo que necesitas antes de empezar

• Node.js 18+ y npm → 🔗 nodejs.org
• API key de Anthropic → 🔗 console.anthropic.com
• SDK oficial de JavaScript/TypeScript de Anthropic → 🔗 npmjs.com/package/@anthropic-ai/sdk

📋 Pasos

Paso 1 — Crea el proyecto Next.js

bash

npx create-next-app@latest chat-claude
cd chat-claude

🔗 Documentación de Next.js

Paso 2 — Instala el SDK de Anthropic

bash

npm install @anthropic-ai/sdk

Paso 3 — Crea una API Route que llame a Claude en modo streaming

En app/api/chat/route.ts, recibe el mensaje del usuario y llama a client.messages.stream({...}) con tu API key guardada en una variable de entorno (ANTHROPIC_API_KEY). Este es el mismo concepto de streaming de la clase 5, pero ahora del lado del servidor de Next.js en vez de un script de Python.

Paso 4 — Convierte el stream en una respuesta SSE

Envuelve el stream de Anthropic en un ReadableStream nativo de la Web API y devuélvelo como la respuesta de tu API Route con Content-Type: text/event-stream. Cada text_delta que llega del SDK se convierte en un chunk que se envía al navegador apenas se genera.

Paso 5 — Consume el stream desde el frontend

En tu componente de chat, en lugar de usar fetch().then(res => res.json()), usa fetch() y lee el body con getReader(), actualizando el estado de React con cada fragmento de texto que llega, para que el usuario vea la respuesta "escribiéndose" en vivo.

Paso 6 — Corre el proyecto y pruébalo

bash

npm run dev

Abre http://localhost:3000, escribe un mensaje y verifica que el texto aparece progresivamente, no todo de golpe.

✅ Resultado esperado

Una página web funcional con un input de chat donde la respuesta de Claude se renderiza en tiempo real en el navegador, replicando la experiencia de streaming de Claude.ai — sin backend en Python, todo en Next.js.

🔥 Tu reto (siguiente acción)

Agrega historial de conversación real: guarda los mensajes previos en el estado de React y envíalos todos en cada llamada (igual que la clase 3 del curso, "Conversaciones multi-turn", pero ahora persistiendo el historial en el navegador en vez de en una variable de Python).

📚 Recursos para ir más lejos

• Documentación de Next.js — App Router, API Routes y Server Components.
• SDK de TypeScript de Anthropic — Ejemplos de streaming en Node.js.
• Guía de streaming de la Claude API — Formato de eventos (content_block_delta, etc.).