Integrar chatbots de IA en la web: de la API básica al streaming en Next.js

Meter IA en una app web es de lo más pedido hoy. Bots de soporte, asistentes personales: el chat ya es estándar. Pero esperar 10-30 segundos a que el LLM termine la respuesta destroza la UX. El streaming enseña las palabras a medida que salen.

Aquí: JSON simple vs streaming, y cómo montar un chat en tiempo real en Next.js con Server-Sent Events (SSE) y el SDK de OpenAI.

1. API JSON estándar vs streaming en tiempo real

Cuando el usuario dispara una request de IA, hay dos formas de entregar la respuesta:

• Fetch JSON estándar: el cliente envía y espera. El servidor habla con OpenAI, espera la frase entera, la empaqueta en JSON y la devuelve. Loader largo, rebote alto.
• Streaming con Server-Sent Events (SSE): el servidor abre una conexión HTTP persistente. En cuanto el modelo genera un token, lo manda al navegador. El usuario ve el texto al momento: el tiempo percibido baja a milisegundos.

2. Backend en route handlers de Next.js

El App Router de Next.js hace streaming nativo con Web Streams. Un route handler simplificado:

Primero, el cliente OpenAI y el chat completion con `stream: true`. Luego, el ReadableStream de OpenAI se convierte en un HTTP response stream. El navegador lee los chunks sobre la marcha.

3. UI del chat y el stream en el cliente

En la UI, el state de React guarda mensajes y el flujo. `fetch` ya lee streaming con el reader de `ReadableStream`:

• Lea el reader del body. En un bucle `while (true)`, `reader.read()`. Decodifique chunks binarios a texto con `TextDecoder`.
• Actualice el state del mensaje en tiempo real: añada tokens al último mensaje según llegan. React re-renderiza y enseña el flujo de palabras.
• Auto-scroll al fondo del contenedor de chat conforme entra contenido, para que siempre vea las últimas líneas.

4. Edge cases y errores

Un chat de producción pide más detalle:

• Cortes de conexión: reconexión y estados de alerta si el stream HTTP se corta a mitad de generación.
• Cancelar: un botón «Detener generación». `AbortController` en el fetch para que el servidor cancele la request al LLM y deje de quemar API.
• Markdown y código: el LLM suele devolver tablas markdown o bloques de código. Use `react-markdown` y un syntax highlighter para pintar layouts estructurados.

Conclusión: suba la UX con streaming de IA

El streaming en tiempo real ya no es extra: es necesidad en una web con IA. SSE, route streaming de Next.js y un contenedor de chat en React: interfaces que se sienten rápidas, vivas y pulidas.

¿Quiere integrar OpenAI, Anthropic o un LLM local con streaming en su app? Escríbame por el formulario y lo montamos bien.