Vercel AI SDK - Integración unificada de modelos IA con streaming y hooks React

Receta

npm install ai @ai-sdk/openai @ai-sdk/anthropic

// app/api/chat/route.ts
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: openai("gpt-4o"),
    messages,
  });
 
  return result.toDataStreamResponse();
}

// app/chat/page.tsx
"use client";
import { useChat } from "@ai-sdk/react";
 
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
 
  return (

Cuándo usarlo: Necesitas integrar chat LLM, completions, o llamadas a herramientas en una aplicación React o Next.js con soporte de streaming y boilerplate mínimo.

Ejemplo Funcional

// app/components/ChatWithTools.tsx
"use client";
import { useChat } from "@ai-sdk/react";
 
export default function ChatWithTools() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: 

// app/api/chat-tools/route.ts
import { streamText, tool } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { z } from "zod";
 
export async function POST(req: Request) {
  const { messages } 

Lo que esto demuestra:

• Interfaz de chat completa con streaming usando el hook useChat
• Llamadas a herramientas con validación de esquema Zod
• Ejecución de herramientas multi-paso con maxSteps
• Gestión de estado de carga y manejo de errores
• Uso del modelo Claude de Anthropic

Análisis Profundo

Cómo Funciona

• El AI SDK proporciona una interfaz unificada entre proveedores (OpenAI, Anthropic, Google, Mistral, etc.) para que puedas intercambiar modelos cambiando una línea
• streamText devuelve un objeto StreamTextResult que se convierte en una Response a través de toDataStreamResponse(), enviando Server-Sent Events al cliente
• useChat gestiona el estado completo de la conversación: historial de mensajes, estado de entrada, carga, error y controlador de aborto
• Las llamadas a herramientas utilizan esquemas Zod para validación de parámetros; el SDK maneja automáticamente el bucle de llamada/resultado de herramientas hasta maxSteps iteraciones
• generateText es la contraparte sin streaming para procesamiento por lotes o generación del lado del servidor
• El SDK utiliza un Data Stream Protocol que codifica deltas de texto, llamadas de herramientas, resultados de herramientas y razones de finalización en un único stream

Variaciones

Usando OpenRouter para acceso a modelos:

npm install @openrouter/ai-sdk-provider

import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
const openrouter = createOpenRouter({
  apiKey: process.env.OPENROUTER_API_KEY,
});
 
const result = streamText({
  model: openrouter("anthropic/claude-sonnet-4-20250514"),
  messages,
});

Generación sin streaming:

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
 
const { text, usage } = await generateText({
  model: openai("gpt-4o"),
  prompt: "Resume este artículo en 3 puntos.",
});

Salida estructurada con generateObject:

import { generateObject } from "ai";
import { z } from "zod";
 
const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: z.object({
    recipe: z.string(),

useCompletion para prompts de un solo turno:

"use client";
import { useCompletion } from "@ai-sdk/react";
 
export default function Completion() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: "/api/completion",
  });

Notas de TypeScript

• El tipo Message de ai incluye id, role, content y el opcional toolInvocations
• Los parámetros de herramientas se infieren de esquemas Zod, proporcionando seguridad de tipos completa en funciones execute
• useChat devuelve messages: Message[] fuertemente tipado
• Las opciones específicas del proveedor se pueden pasar a través del campo providerOptions

import type { Message } from "ai";
 
// Los tipos de resultado de herramientas se infieren del esquema Zod
const weatherTool = tool({
  parameters: z.object({ city: z.string() }),
  execute: async ({ city }) => {
    // city está tipado como string
    return { temp: 

Gotchas

• Claves API faltantes — El SDK lanza un error en tiempo de ejecución si la variable de entorno de clave API del proveedor no está configurada. Solución: Establece OPENAI_API_KEY, ANTHROPIC_API_KEY, etc. en .env.local. Cada proveedor tiene su propio nombre de variable de entorno esperado.

• useChat no se actualiza — Si los mensajes no se transmiten, la ruta de API puede no devolver una respuesta de datos en stream. Solución: Siempre devuelve result.toDataStreamResponse(), no result.text o una respuesta JSON simple.

• Llamadas a herramientas no se ejecutan — Herramientas definidas pero maxSteps no configurado tiene valor predeterminado de 1, por lo que el uso de herramientas multi-paso no funcionará. Solución: Establece maxSteps: 5 (o superior) para permitir que el modelo procese resultados de herramientas y continúe.

• Errores CORS en desarrollo — Las rutas de API deben estar en la misma aplicación Next.js. Solución: Usa rutas de API de Next.js (app/api/) en lugar de llamar a un servidor externo directamente desde useChat.

• Bundle grande de importaciones de proveedor — Importar múltiples proveedores aumenta el tamaño del bundle del cliente. Solución: Las importaciones de proveedores son solo del servidor; mantenlas en rutas de API o Server Actions, nunca en archivos "use client".

Alternativas

FAQs

import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";
 
// Solo cambia la línea del modelo:
const result = streamText({
  model: anthropic("claude-sonnet-4-20250514"),
  messages,
});

import { tool } from "ai";
import { z } from "zod";
 
const weatherTool = tool({
  description: "Obtener clima para una ciudad",
  parameters: z.object({
    city: z.string().describe("Nombre de la ciudad"),

import { generateObject } from "ai";
import { z } from "zod";
 
const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: z.object({
    title: z.string

import type { Message } from "ai";

import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
const openrouter = createOpenRouter({
  apiKey: process.env.OPENROUTER_API_KEY,
});
 
const result = streamText({
  model: openrouter("anthropic/claude-sonnet-4-20250514"),
  messages,
});

Relacionado

• TanStack Query — Cachea y gestiona datos de respuestas IA
• Next.js Server Actions — Alternativa a rutas de API para llamadas IA
• TypeScript React — Patrones de tipos utilizados con AI SDK

Los tipos de parámetros de herramientas se infieren automáticamente del esquema Zod.