Configurar el AI SDK de Vercel en TypeScript

Contenido del curso

OpenAI API

Claude API

Gemini API y Despliegue con Vercel

Vercel AI SDK

ElevenLabs API

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:36

Configurar el AI SDK de Vercel en TypeScript

Curso de Configuración de APIs de LLMs

Clase 14 de 18

Clase 14 / 18

Recursos

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.

Gabriel Obregón

Hace 6 meses

🧠 AI SDK de Vercel

• Permite usar múltiples modelos de lenguaje sin reescribir el código.

• Funciona con OpenAI, Anthropic y Google.

• Usa una capa de abstracción unificada.

• La lógica principal se mantiene igual.

• Solo cambian pequeños detalles según el proveedor.

⚙️ CREACIÓN DEL PROYECTO

• Se inicia un proyecto vacío en TypeScript.

• Comando: npm init -y.

• Se instalan dependencias.

• ai → librería principal con generateText.

• @ai-sdk/openai → conexión con OpenAI.

🧪 EJEMPLO BASE

• Se importa generateText desde ai.

• Se importa openai desde @ai-sdk/openai.

• Se llama a generateText.

• Se define el modelo: openai("gpt-5").

• Se define el prompt.

• Ejemplo: “¿Cuál es la capital de Colombia?”.

🔄 CAMBIO DE PROVEEDOR (OPENAI → ANTHROPIC)

• El cambio requiere muy pocas modificaciones.

🔧 PASOS

• Instalar @ai-sdk/anthropic.

• Cambiar el import.

• Cambiar el modelo.

• Agregar ANTHROPIC_API_KEY.

🧪 EJEMPLO

• Se importa anthropic desde @ai-sdk/anthropic.

• Se usa generateText.

• Modelo: anthropic("claude-sonnet-4-20250514").

• Prompt igual al anterior.

🌐 INTEGRACIÓN CON GOOGLE GEMINI

• Se sigue el mismo patrón.

🔧 PASOS

• Instalar @ai-sdk/google.

• Usar google(...).

• Configurar GOOGLE_GENERATIVE_AI_API_KEY.

🧪 EJEMPLO

• Se importa google desde @ai-sdk/google.

• Se usa generateText.

• Modelo: google("gemini-2.0-flash").

• Prompt igual.

OpenAI API

Construye tu propio ChatGPT

Cómo funciona la API de OpenAI

Conexión con la API de OpenAI

Cómo mantener contexto en conversaciones con OpenAI

Conectar OpenAI con Next.js paso a paso

Cómo integrar audio e imágenes en un chatbot

Claude API

Configuración de API keys en Anthropic

Primera llamada a la API de Claude con TypeScript

Streaming y mensajes múltiples en Anthropic

Integración de OpenAI y Anthropic en un solo chat

Gemini API y Despliegue con Vercel

Cómo generar tu API key de Google Gemini

Despliegue de Next.js con Vercel en 3 pasos

Vercel AI SDK

AI SDK: un solo código para todos los LLMs

Configurar el AI SDK de Vercel en TypeScript

AI SDK de Vercel: tres proveedores, un solo código

ElevenLabs API

Eleven Labs: text to speech con IA

Tu primera conversión de texto a voz con Eleven Labs

IA generativa: qué sigue después del curso

Configurar el AI SDK de Vercel en TypeScript

Progreso del curso

OpenAI API

Claude API

Gemini API y Despliegue con Vercel

Vercel AI SDK

ElevenLabs API

Recursos

Recursos