Introducción a Vercel AI SDK - Tutorial de Vercel AI SDK | TechLead

¿Qué es Vercel AI SDK?

El Vercel AI SDK es una potente librería TypeScript diseñada para ayudar a los desarrolladores a construir aplicaciones con IA usando React, Next.js, Vue, Svelte y Node.js. Ofrece una API unificada para trabajar con distintos proveedores de IA y gestiona la complejidad del streaming de respuestas, el estado y las actualizaciones de UI.

¿Por qué usar Vercel AI SDK?

API unificada: Trabaja con OpenAI, Anthropic, Google y más desde una sola interfaz
Streaming primero: Soporte integrado para respuestas en streaming con manejo de backpressure
Hooks de React: useChat y useCompletion para integrar UI fácilmente
Listo para Edge: Optimizado para despliegues serverless y edge
Type safe: Soporte completo de TypeScript con gran DX

Conceptos clave

AI Core

Utilidades del servidor para generar texto, datos estructurados y tool calls

AI UI

Hooks de React (useChat, useCompletion) para construir interfaces de IA

AI RSC

Integración con React Server Components para UI en streaming

Proveedores

Adaptadores para OpenAI, Anthropic, Google, Mistral y más

Instalación

# Install the AI SDK
npm install ai

# Install a provider (e.g., OpenAI)
npm install @ai-sdk/openai

# Or install multiple providers
npm install @ai-sdk/anthropic @ai-sdk/google

Inicio rápido: tu primera app de IA

Paso 1: Configurar variables de entorno

# .env.local
OPENAI_API_KEY=your-openai-api-key

Paso 2: Crear una ruta API (Next.js App Router)

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  return result.toDataStreamResponse();
}

Paso 3: Crear la UI de chat

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col w-full max-w-md mx-auto">
      {messages.map((m) => (
        <div key={m.id} className="whitespace-pre-wrap">
          <strong>{m.role === 'user' ? 'You: ' : 'AI: '}</strong>
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </form>
    </div>
  );
}

Arquitectura del AI SDK

┌─────────────────────────────────────────────────────────┐
│                    Your Application                      │
├─────────────────────────────────────────────────────────┤
│  React Components    │    Server Actions / API Routes   │
│  ┌─────────────┐     │    ┌─────────────────────────┐   │
│  │  useChat    │     │    │    streamText()         │   │
│  │  useComple- │◄────┼────│    generateText()       │   │
│  │  tion       │     │    │    generateObject()     │   │
│  └─────────────┘     │    └─────────────────────────┘   │
├─────────────────────────────────────────────────────────┤
│                    AI SDK Core                          │
├─────────────────────────────────────────────────────────┤
│  OpenAI  │  Anthropic  │  Google  │  Mistral  │  ...   │
└─────────────────────────────────────────────────────────┘

Funciones clave

import { generateText, streamText, generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';

// Generate text (non-streaming)
const { text } = await generateText({
  model: openai('gpt-4-turbo'),
  prompt: 'What is the capital of France?',
});

// Stream text
const result = streamText({
  model: openai('gpt-4-turbo'),
  prompt: 'Write a short story about a robot.',
});

// Generate structured data
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    recipe: z.object({
      name: z.string(),
      ingredients: z.array(z.string()),
      steps: z.array(z.string()),
    }),
  }),
  prompt: 'Generate a recipe for chocolate chip cookies.',
});

Seguridad de claves API

Nunca expongas claves API en código del cliente. Usa siempre variables de entorno y realiza llamadas a proveedores de IA desde el servidor (rutas API, Server Actions o server components).

💡 Puntos clave

• Vercel AI SDK ofrece una API unificada para múltiples proveedores de IA
• Soporte de streaming integrado para respuestas en tiempo real
• useChat y useCompletion simplifican la integración con React
• Funciona perfectamente con Next.js App Router y Server Actions
• Soporte completo de TypeScript con gran experiencia de desarrollo

📚 Más recursos

Documentación de Vercel AI SDK →
Documentación oficial con guías y referencia de API.
Guía de inicio →
Guía paso a paso para construir tu primera app de IA.