Configurar el AI SDK de Vercel en TypeScript

Conectar múltiples modelos de lenguaje sin reescribir código para cada proveedor es posible gracias a una capa de abstracción bien diseñada. El AI SDK de Vercel permite exactamente eso: una sola estructura de código que funciona con OpenAI, Anthropic y Google cambiando apenas unas líneas. A continuación se detalla cómo crear el proyecto desde cero, configurar cada proveedor y ejecutar la primera llamada real a un modelo de lenguaje.

¿Cómo inicializar un proyecto de TypeScript con el AI SDK?

El punto de partida es una carpeta vacía. Desde la terminal se ejecuta npm init -y para generar el archivo package.json con valores por defecto [0:39]. Después se instalan dos dependencias fundamentales:

• ai: la librería principal del AI SDK de Vercel, que expone funciones como generateText [0:52].
• @ai-sdk/openai: el paquete específico para conectarse a OpenAI [1:05].

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

Con eso listo, se crea un archivo index.ts donde se escribe toda la lógica. La estructura mínima importa dos cosas: la función generateText desde la librería ai y la función constructora openai desde @ai-sdk/openai [1:24].

typescript import { generateText } from "ai"; import { openai } from "@ai-sdk/openai";

async function main() { const { text } = await generateText({ model: openai("gpt-5"), prompt: "¿Cuál es la capital de Colombia?", }); console.log(text); }

main();

El patrón es claro: se pasa un model y un prompt. La función generateText se encarga de todo lo demás under the hood [1:40].

¿Qué ocurre con las API keys y los errores comunes?

Al ejecutar sin una API key configurada, el SDK lanza un error explícito indicando que falta la variable OPENAI_API_KEY [2:16]. La solución es crear un archivo .env.local y agregar la clave obtenida previamente en la plataforma de OpenAI [2:32].

Otro error frecuente es especificar un modelo que no existe. En el ejemplo, la documentación sugería gpt-5.3-chat, pero ese nombre no era válido; al cambiarlo a gpt-5 la llamada funcionó correctamente [2:50]. La respuesta fue directa: "Bogotá, D.C. es la capital de Colombia" [3:14].

¿Cómo cambiar de OpenAI a Anthropic sin modificar la estructura?

El verdadero poder de esta abstracción se demuestra al cambiar de proveedor. Los pasos son mínimos [3:30]:

• Instalar el paquete de Anthropic: npm install @ai-sdk/anthropic.
• Importar la función anthropic en lugar de openai.
• Especificar el modelo, por ejemplo claude-sonnet-4-20250514.
• Agregar la variable ANTHROPIC_API_KEY al archivo de entorno.

typescript import { anthropic } from "@ai-sdk/anthropic";

const { text } = await generateText({ model: anthropic("claude-sonnet-4-20250514"), prompt: "¿Cuál es la capital de Colombia?", });

La respuesta de Anthropic fue mucho más elaborada que la de OpenAI, incluyendo el nombre oficial "Bogotá, Distrito Capital" y una descripción adicional [4:23]. Esto refleja las diferencias entre modelos: unos más económicos, otros más potentes, unos más rápidos y otros más detallados.

¿Cómo integrar Google Gemini con el mismo patrón?

Para Google se repite la misma dinámica [5:08]:

• Instalar @ai-sdk/google.
• Importar la función google.
• Configurar la variable GOOGLE_GENERATIVE_AI_API_KEY (el nombre es más largo que en los otros proveedores).
• Seleccionar un modelo como gemini-2.0-flash en su versión preview para cuentas gratuitas.

typescript import { google } from "@ai-sdk/google";

const { text } = await generateText({ model: google("gemini-2.0-flash"), prompt: "¿Cuál es la capital de Colombia?", });

Al ser un modelo preview y más liviano, respondió más rápido pero con menos elaboración: "La capital de Colombia es Bogotá" [5:55]. Los modelos frontera ofrecen respuestas más completas, mientras que los modelos ligeros priorizan velocidad y bajo costo.

¿Por qué es tan importante la capa unificada del AI SDK?

Al finalizar la integración con los tres proveedores, el archivo package.json contiene cuatro dependencias: ai, @ai-sdk/openai, @ai-sdk/anthropic y @ai-sdk/google [5:25]. Sin embargo, la función generateText nunca cambió. Esa es la clave de una buena abstracción: separar la lógica de negocio de los detalles de implementación de cada proveedor [6:28].

Lo único que varía entre un proveedor y otro es:

• La importación de la librería específica.
• El nombre del modelo dentro de la función constructora.
• La variable de entorno con la API key correspondiente.

Esto significa que puedes comparar modelos cambiando dos líneas, evaluar costos y velocidad sin reescribir la arquitectura de tu aplicación. Vercel se encarga de la comunicación con cada proveedor, y tú te concentras en construir.

Si ya probaste la conexión desde la terminal, el siguiente paso natural es llevar esto a una interfaz visual en el navegador. ¿Con cuál de los tres proveedores te gustaría experimentar primero? Compártelo en los comentarios.