Conceptos clave: Backend vs Frontend

El Vercel AI SDK no es una librería monolítica; es un conjunto de herramientas modulares diseñadas para trabajar en armonía. Para dominarlo, debes entender la separación de responsabilidades entre el Servidor (Backend) y el Cliente (Frontend).

1. El Backend (`ai`)

En el lado del servidor (tu API Route en Next.js o Endpoint en Astro), usas la librería ai para hablar con los proveedores (Google, OpenAI).

Aquí existen tres funciones reina que usarás el 90% del tiempo:

`generateText` (Bloqueante)

Ideal para tareas que no requieren interacción en tiempo real.

Uso: “Genera un resumen de este artículo”.
Comportamiento: El servidor espera a que la IA termine toda la respuesta antes de enviarla al cliente.
Retorno: Un objeto JSON simple { text: "..." }.

`streamText` (Streaming)

La joya de la corona para chatbots.

Uso: “Chat con un asistente”.
Comportamiento: Abre un canal de datos y envía la respuesta token a token (letra por letra).
Retorno: Un StreamData que el frontend puede leer progresivamente.

`generateObject` (JSON Estructurado)

Fuerza al modelo a devolver datos estructurados, no texto libre.

Uso: “Extrae fecha, monto y concepto de esta factura”.
Comportamiento: Valida la salida contra un esquema Zod. Si el modelo falla, lo reintenta automáticamente.

2. El Frontend (`ai/react`)

En el navegador, no quieres lidiar con fetch, Streams o Decoders manualmente. Para eso existen los Hooks.

`useChat`

Es el hook todo-en-uno para construir interfaces tipo ChatGPT. Maneja automáticamente:

El array de mensajes (messages).
El input del usuario (input, handleInputChange).
El envío del formulario (handleSubmit).
El estado de carga (isLoading).

// Ejemplo visual de lo que hace useChat por ti
const { messages, input, handleInputChange, handleSubmit } = useChat({
  api: '/api/chat', // A dónde enviar los mensajes
});

`useCompletion`

Similar a useChat, pero para autocompletado de texto simple (no conversación).

Uso: Un generador de descripciones de productos o correos electrónicos.

El Flujo de datos (The Data Flow)

Es vital entender cómo viajan los datos cuando el usuario presiona “Enviar”:

Frontend (useChat): Captura el input y lo añade optimísticamente a la lista de mensajes (para que se vea instantáneo).
Red: Envía un POST request a tu endpoint /api/chat con todo el historial de la conversación.
Backend (streamText): Recibe el historial, llama a Gemini, y devuelve un StreamResponse.
Frontend: Lee el stream y va actualizando el último mensaje de la UI en tiempo real.

En el siguiente capítulo, pondremos esto en práctica creando nuestra primera API de Chat.

Conceptos clave: Backend vs Frontend

1. El Backend (ai)

generateText (Bloqueante)

streamText (Streaming)

generateObject (JSON Estructurado)

2. El Frontend (ai/react)

useChat

useCompletion