Streaming UI con Vercel AI SDK: chat y UI generativa en Next.js

Los modelos generan texto de forma incremental. Sin streaming, la aplicación espera a que se complete toda la respuesta antes de mostrar algo: el usuario percibe una pausa larga. Con streaming, los tokens aparecen a medida que se producen, reduciendo drásticamente el tiempo hasta el primer token (TTFT) y la sensación de espera.

Hay dos niveles. El streaming de texto transmite la respuesta como string que el cliente renderiza progresivamente. El streaming de UI estructurada o generativa va más allá: el modelo decide invocar herramientas y el cliente mapea esos resultados a componentes React —una tarjeta, un gráfico, una lista—, no solo texto. AI SDK 6 cubre ambos con una API unificada.

En el cliente, useChat (de @ai-sdk/react) maneja el estado del chat y el streaming. Cambio importante respecto a versiones previas: los mensajes ya no tienen content plano, sino un array parts tipado, y se envían con sendMessage({ text }); el input lo controlas tú.

"use client";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status, stop, error, regenerate } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role === "user" ? "Tú: " : "IA: "}</strong>
          {m.parts.map((part, i) =>
            part.type === "text" ? <span key={i}>{part.text}</span> : null
          )}
        </div>
      ))}

      {(status === "submitted" || status === "streaming") && (
        <button onClick={() => stop()}>Detener</button>
      )}
      {error && <button onClick={() => regenerate()}>Reintentar</button>}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </div>
  );
}

El hook expone status ("submitted" | "streaming" | "ready" | "error"), stop() para cancelar y regenerate() para reintentar. La doc recomienda mostrar un mensaje de error genérico y no filtrar el detalle del servidor.

El patrón recomendado hoy para renderizar componentes (no RSC) es definir herramientas con execute en el servidor; el modelo decide invocarlas y el cliente renderiza un componente según la parte tipada tool-<nombre> y su estado.

// servidor: permite varios pasos (tool call -> respuesta)
import { streamText, convertToModelMessages, stepCountIs } from "ai";
import { tools } from "@/ai/tools";

const result = streamText({
  model: "anthropic/claude-sonnet-4.5",
  system: "Eres un asistente útil.",
  messages: convertToModelMessages(messages),
  stopWhen: stepCountIs(5),
  tools,
});
return result.toUIMessageStreamResponse();

// cliente: dentro del map de m.parts
if (part.type === "tool-mostrarClima") {
  switch (part.state) {
    case "input-available":
      return <div key={i}>Cargando clima...</div>;
    case "output-available":
      return <Clima key={i} {...part.output} />;
    case "output-error":
      return <div key={i}>Error: {part.errorText}</div>;
  }
}

Sin stopWhen, el modelo se detiene tras la primera tool call; con stepCountIs(n) permite que invoque la herramienta y luego responda en el mismo turno.

En AI SDK 6 el proveedor global por defecto es el AI Gateway de Vercel, así que basta pasar un string "proveedor/modelo" sin importar paquetes ni gestionar varias API keys; el Gateway centraliza routing, failover y seguimiento de costos.

import { streamText } from "ai";

const result = streamText({
  model: "anthropic/claude-sonnet-4.5", // o "openai/gpt-4.1", etc.
  prompt: "...",
});

Si prefieres ir directo al proveedor con tu propia key, instala el paquete correspondiente (por ejemplo @ai-sdk/anthropic) y pasa anthropic("claude-sonnet-4.5"). Para el stack de Cognitiva (Claude + Vercel), el patrón natural es AI Gateway con un string de Anthropic, alineado con nuestro cornerstone del stack.