AI SDK - Curso, Taller y Libro

Este repo es el material oficial para el curso, taller y libro de AI-SDK.

Accede a todo el contenido en: fixtergeek.com/cursos/ai-sdk

Aprende a construir aplicaciones con IA usando el Vercel AI SDK, desde inferencias básicas hasta UI generativa con artifacts.

Descripción

Material práctico y progresivo para dominar el Vercel AI SDK. Cada ejercicio construye sobre el anterior, introduciendo un concepto nuevo mientras refuerza los aprendidos.

Lo que vas a construir:

• Streams de texto desde modelos de lenguaje
• Chat interactivo con React y el hook useChat
• Carga de archivos como contexto para el LLM
• Sistema de embeddings y búsqueda por similitud
• Tools para UI generativa y componentes dinámicos
• Artifacts con streaming dual (código + explicación)

Requisitos previos

• Node.js 18+
• Una API key de OpenAI (o compatible)
• Conocimientos básicos de TypeScript y React

Quick Start

# Clonar el repositorio
git clone https://github.com/tu-usuario/ai_sdk_curso.git
cd ai_sdk_curso

# Instalar dependencias
npm install
cd client && npm install && cd ..

# Configurar variables de entorno
cp .env.example .env
# Editar .env con tu API key

# Iniciar en modo desarrollo
npm run dev

Ejercicios

Cada ejercicio vive en su propia rama. Navega entre ellos con git checkout.

#	Rama	Tema	Conceptos clave
00	ejercicio/00-basic_inference	Inferencia básica	streamText, modelo, system prompt, iteración de streams
01	ejercicio/01-streaming-vanilla	Streaming vanilla	pipeTextStreamToResponse, TextDecoder, arquitectura cliente/servidor
02	ejercicio/02-react-usechat	React + useChat	Hook useChat, Vite, pipeUIMessageStreamToResponse, proxy de desarrollo
03	ejercicio/03-upload_context	Contexto desde archivos	FileReader, inyección de contexto, manejo de PDFs
04	ejercicio/04-embeddings	Embeddings	Vectores, similitud semántica, chunking de documentos
05	ejercicio/05-tools	UI Generativa	Tools, renderizado condicional de componentes, system prompts estrictos
06	ejercicio/06-sending_custom_data	Artifacts	createUIMessageStream, data-custom, streaming dual
Bonus	ejercicio/bonus-migrate_to_hono	Migración a Hono	Hono vs Express, toUIMessageStreamResponse, serveStatic

Progresión recomendada

00 → 01 → 02 → 03 → 04 → 05 → 06
 │                              │
 └──────── Bonus: Hono ─────────┘

00 → 01: De ejecutar en terminal a servir por HTTP 01 → 02: De vanilla JS a React con estado gestionado 02 → 03: De prompts fijos a contexto dinámico desde archivos 03 → 04: De archivos completos a chunks y búsqueda semántica 04 → 05: De texto plano a componentes React dinámicos 05 → 06: De un solo stream a streaming dual con artifacts

Navegación entre ejercicios

# Ver todos los ejercicios disponibles
git branch -a | grep ejercicio

# Cambiar a un ejercicio específico
git checkout ejercicio/02-react-usechat

# Volver al estado final (main)
git checkout main

Cada rama tiene su propio README con explicaciones detalladas del ejercicio.

Stack

Capa	Tecnología
AI	Vercel AI SDK v5
Backend	Hono v4
Frontend	React v19 + Vite
Lenguaje	TypeScript 5.9
Validación	Zod

Estructura del proyecto

ai_sdk_curso/
├── index.ts          # Lógica de inferencia y chat
├── server.ts         # Servidor Hono con endpoints
├── client/           # Aplicación React
│   ├── src/
│   │   └── App.tsx   # Componente principal del chat
│   └── vite.config.ts
├── .env              # Variables de entorno (API keys)
└── package.json

Scripts disponibles

npm run dev          # Inicia servidor + cliente en paralelo
npm run deploy       # Deploy a producción (Fly.io)

Deploy a producción

El repositorio está listo para producción en Fly.io. Incluye:

Archivo	Propósito
Dockerfile	Build multi-stage optimizado (builder + runner)
fly.toml	Configuración de Fly.io

Características del setup

• Multi-stage build: Separa la compilación del runtime para imágenes más ligeras
• Usuario no-root: El contenedor corre con usuario hono por seguridad
• Auto-scaling: Las máquinas se suspenden cuando no hay tráfico y despiertan automáticamente
• HTTPS forzado: Todo el tráfico se redirige a HTTPS
• Región: Dallas (dfw) por defecto, configurable en fly.toml

Primeros pasos con Fly.io

# Instalar CLI de Fly
curl -L https://fly.io/install.sh | sh

# Autenticarse
fly auth login

# Configurar secretos (tu API key)
fly secrets set OPENAI_API_KEY=sk-...

# Deploy
npm run deploy

Tu app estará disponible en https://ai-sdk-curso.fly.dev

Recursos

• Documentación AI SDK
• Documentación Hono
• OpenAI API Reference

Próximo webinar

Fecha	Modalidad
Jueves 16 de Enero · 7:00 PM CDMX	En vivo

Regístrate en fixtergeek.com/cursos/ai-sdk

Autor

Creado por @blissito Para @fixtergeek

---

Si este material te fue útil, considera darle una estrella al repo.