Contenido del curso
Claude API
Gemini API y Despliegue con Vercel
Vercel AI SDK
ElevenLabs API
Configurar el AI SDK de Vercel en TypeScript
Resumen
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 comogenerateText[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
anthropicen lugar deopenai. - Especificar el modelo, por ejemplo
claude-sonnet-4-20250514. - Agregar la variable
ANTHROPIC_API_KEYal 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-flashen 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.