Chat con la API de Claude

¿Qué vas a construir?

Una aplicación de chat funcional que se comunica con la API de Claude. Incluye historial de conversación, soporte para streaming (respuestas en tiempo real), y selector de modelo.

Lo que aprenderás

• •Obtener y gestionar tu API key de Anthropic de forma segura

• •Hacer llamadas a la API con el SDK oficial de Anthropic

• •Implementar streaming de respuestas con Server-Sent Events

• •Gestionar el historial de mensajes en el contexto

• •Calcular y mostrar el uso de tokens en tiempo real

Pasos principales

Paso 1 — Setup del proyecto

Crea un proyecto Next.js. Instala @anthropic-ai/sdk. Configura la API key en .env.local.

Paso 2 — API Route con streaming

// app/api/chat/route.ts
import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic();
export async function POST(req: Request) {
  const { messages } = await req.json();
  const stream = client.messages.stream({
    model: "claude-opus-4-5",
    max_tokens: 1024,
    messages,
  });
  return new Response(stream.toReadableStream());
}

Paso 3 — UI del chat

Interfaz con lista de mensajes, input de texto y botón de enviar. Claude Code genera los componentes.

Paso 4 — Historial de conversación

Mantén el array de mensajes en estado. Cada mensaje nuevo se añade al historial que se envía a la API.

Paso 5 — Streaming en el cliente

Lee el stream en el navegador con ReadableStream y actualiza el mensaje token a token.

Resultado esperado

App de chat funcional desplegada en Vercel con conversaciones persistentes en la sesión.