¿Por qué usar un AI SDK?

Hasta este punto del libro, hemos interactuado con los LLMs de forma “artesanal”: importando la librería oficial de Google (@google/generative-ai), gestionando la conexión y procesando las respuestas manualmente.

Para scripts simples, esto funciona. Pero cuando intentas construir una aplicación web real (como ChatGPT), te enfrentas a problemas de Ingeniería de Software:

1. Gestión del estado: ¿Cómo guardo el historial del chat y lo sincronizo con la UI?
2. Streaming: ¿Cómo muestro el texto letra por letra sin bloquear el navegador?
3. Vendor Lock-in: Si mañana quieres probar Claude, GPT-5 o un modelo nuevo, ¿tienes que reescribir todo tu backend?

La solución: Vercel AI SDK

El Vercel AI SDK se ha convertido en el estándar de facto para construir interfaces de usuario con IA en el ecosistema JavaScript/TypeScript.

Analogía del ORM

Piénsalo de la siguiente manera:

• Usar la API directa de OpenAI/Google es como usar drivers de base de datos crudos (pg, mysql).
• Usar AI SDK es como usar un ORM (Prisma, TypeORM, Drizzle ORM). Te da una capa de abstracción unificada.

Ventajas Clave

1. Agnóstico al modelo: Cambia de google:gemini-3-pro a anthropic:claude-4.5-sonnet cambiando una sola línea de código.
2. Hooks de UI: Olvídate de useState complejos. El SDK te da hooks como useChat que manejan el loading, el error, el input y el streaming automáticamente.
3. Protocolo de streaming: Estandariza cómo viajan los datos del servidor al cliente.

Comparativa de código

Mira la diferencia entre hacerlo “a mano” y usar el SDK para un simple chat con streaming.

Sin SDK

// Tienes que gestionar el bucle de lectura manualmente
const response = await model.generateContentStream(prompt);

for await (const chunk of response.stream) {
  const text = chunk.text();
  // ¿Cómo le aviso al Frontend que hay nuevo texto?
  // Tienes que escribir toda esa infraestructura tú mismo.
  res.write(text);
}

Con Vercel AI SDK

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

// El SDK maneja el protocolo de stream automáticamente
const result = streamText({
  model: google('gemini-3-flash'),
  messages,
});

return result.toDataStreamResponse();

¿Qué vamos a construir?

En este módulo, dejaremos la consola negra de comandos. Construiremos un Chatbot Web Fullstack moderno utilizando:

• Next.js / Astro: Como framework web.
• Vercel AI SDK: Para la lógica de IA.
• Gemini 3 Flash: Como cerebro.
• React: Para una interfaz visual atractiva.

¿Listo para subir de nivel? Pasemos a entender los conceptos core.