Chatbot IA con Next.js 2026: El Tutorial de Streaming

1. El Problema: Las Respuestas Bloqueantes Se Sienten Rotas

Un chatbot ingenuo espera el completion completo y recién ahí lo renderiza. Con modelos reales eso significa de 3 a 10 segundos de UI muerta: sin feedback, sin progreso, sin confianza. Los usuarios reintentan, envían doble o se van — y cada reintento te factura otra generación completa.

El streaming arregla la percepción y la ingeniería: primer token en unos 300ms, tokens renderizándose en vivo, un solo round trip HTTP sobre un ReadableStream. Vercel AI SDK se encarga de esa plomería — helpers de servidor para producir el stream y el hook useChat para consumirlo.

2. Conceptos Mínimos (Cinco Minutos)

Solo necesitás seis ideas antes de tocar código. Todo lo demás en el SDK es una variación de estas, así que aprendelas una vez y el tutorial se lee solo.

3. El Tutorial, Paso a Paso

De un proyecto Next.js App Router vacío a un chat con streaming en seis pasos. Verifiqué cada import contra la documentación oficial de AI SDK v7 — useChat viene de @ai-sdk/react, nunca del eliminado ai/react.

4. Los Dos Archivos, Explicados

Dos archivos sostienen toda la funcionalidad. Leelos una vez y nunca más vas a copiar código de chatbot a ciegas — cada línea viene del quickstart oficial v7.

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: "xai/grok-4.6",
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

"use client";

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

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

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.parts.map((part, i) => {
            if (part.type === "text") {
              return <div key={message.id + "-" + i}>{part.text}</div>;
            }
            return null;
          })}
        </div>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input
          value={input}
          placeholder="Say something..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
      </form>
    </div>
  );
}

5. Errores Comunes (Todos de Migraciones Reales)

El SDK trajo cambios breaking en cada major desde v3, así que la mayoría de los tutoriales de 2024 hoy enseñan APIs eliminadas. Esta es la lista de correcciones que aplico al portar código viejo.

6. Checklist de Producción

Que funcione en local es el paso uno. Llegar a confiable a escala exige recorrer esta lista en orden:

7. Cuándo Aplica Este Stack (y Cuándo No)

La capa UI del AI SDK es el camino más rápido al chat con streaming, pero no es para toda app. Calibrá antes de comprometerte:

Conclusión

Ahora dominás todo el pipeline: UIMessage[] sale del navegador, convertToModelMessages lo adapta, streamText genera tokens, el stream de UI-message los trae de vuelta y useChat renderiza las partes en vivo. Dos archivos, sin WebSockets, sin parsear SSE a mano.

Publicá los seis pasos, aplicá el trío de endurecimiento (maxDuration, rate limit, auth) y corregí los cinco errores de migración si estás portando un tutorial viejo. Desde ahí, tools, persistencia y RAG se montan sobre la misma base — ese es el verdadero rédito de aprender la API actual en vez de copiar código de 2024.

Fuentes

Cada nombre de API y patrón de arriba está verificado contra estas referencias (agosto–septiembre 2026):

• •Docs de AI SDK — quickstart Next.js App Router (v7)
• •Docs de AI SDK — Chatbot UI
• •Docs de AI SDK — fundamentos de streaming
• •Vercel — template Next.js AI Chatbot
• •Markaicode — Vercel AI SDK Setup (v7, ago 2026)
• •Maha Naeem — Streaming AI Responses en Next.js (jul 2026)