Implementación de UI streaming de IA y micro-interacciones en React / Next.js con Vercel AI SDK v3

Los usuarios esperan respuestas de IA en tiempo real mediante streaming e interfaces generativas dinámicas (UI generativa) en lugar de indicadores de carga estáticos.

Vercel AI SDK es el toolkit estándar para integrar estos componentes en React y Next.js App Router.

Puntos clave

• Streaming en tiempo real: Reduce la latencia percibida en más de un 80%.
• useChat & streamText: Sincronización automática de estado entre el cliente y el modelo de IA.
• Generative UI: Renderizado dinámico de componentes React mediante llamada a herramientas (Tool Calling).

1. Servidor (app/api/chat/route.ts)

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o-mini'), messages });
  return result.toDataStreamResponse();
}