initial commit: slides ready + upgraded

2026-05-24 10:37:53 +02:00
commit f6f46972c3
173 changed files with 16756 additions and 0 deletions
@@ -0,0 +1,14 @@
+---
+layout: cover
+class: text-center
+---
+
+# Instalación y Setup
+
+Módulo 2: Primeros Pasos con LangChain.js
+
+<div class="pt-12">
+  <span class="text-xl opacity-80">
+    Configurando tu entorno de desarrollo
+  </span>
+</div>
@@ -0,0 +1,94 @@
+---
+layout: default
+---
+
+<h1 class="!text-2xl">Arquitectura de Paquetes</h1>
+
+<div class="mt-2">
+
+<div class="grid grid-cols-2 gap-4">
+
+<div>
+
+<v-click>
+
+<h3 class="!text-base !mb-1">Paquetes base</h3>
+
+<div class="space-y-1.5">
+
+<div class="border-l-4 border-blue-500 pl-2 bg-blue-50 dark:bg-blue-900/20 py-1 px-2">
+  <p class="font-bold text-xs">@langchain/core</p>
+  <p class="text-[10px] opacity-80 !leading-tight">Primitivas fundamentales: mensajes, prompts, interfaces base. Es el cimiento que usan todos los demás paquetes.</p>
+</div>
+
+<div class="border-l-4 border-purple-500 pl-2 bg-purple-50 dark:bg-purple-900/20 py-1 px-2">
+  <p class="font-bold text-xs">langchain</p>
+  <p class="text-[10px] opacity-80 !leading-tight">Metapaquete principal. Re-exporta lo útil de core y añade herramientas de alto nivel para construir agentes.</p>
+</div>
+
+<div class="border-l-4 border-gray-400 pl-2 bg-gray-50 dark:bg-gray-900/20 py-1 px-2">
+  <p class="font-bold text-xs">@langchain/classic</p>
+  <p class="text-[10px] opacity-80 !leading-tight">Funcionalidad legacy de v0.x: MemoryVectorStore, document loaders, chains antiguas. Para migración gradual.</p>
+</div>
+
+</div>
+
+</v-click>
+
+</div>
+
+<div>
+
+<v-click>
+
+<h3 class="!text-base !mb-1">Paquetes por proveedor</h3>
+
+<div class="grid grid-cols-2 gap-1.5">
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/openai</p>
+  <p class="text-[10px] opacity-70">GPT-4.1, GPT-5, Azure</p>
+</div>
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/anthropic</p>
+  <p class="text-[10px] opacity-70">Claude 4, 4.5, 4.6</p>
+</div>
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/google</p>
+  <p class="text-[10px] opacity-70">Gemini 2.5</p>
+</div>
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/mistralai</p>
+  <p class="text-[10px] opacity-70">Mistral, Mixtral</p>
+</div>
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/ollama</p>
+  <p class="text-[10px] opacity-70">Modelos locales</p>
+</div>
+
+<div class="border rounded py-1 px-2 text-center">
+  <p class="font-bold text-[10px]">@langchain/...</p>
+  <p class="text-[10px] opacity-70">+30 proveedores</p>
+</div>
+
+</div>
+
+</v-click>
+
+</div>
+
+</div>
+
+<v-click>
+
+<div class="mt-3 text-center text-xs opacity-80 border-t pt-2">
+  Instala solo los proveedores que necesites: <code>npm i langchain @langchain/openai</code>
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,57 @@
+---
+layout: default
+---
+
+# Instalación en Node.js
+
+<div class="text-sm">
+
+<v-click>
+
+**Requisitos**: Node.js v20+ y tu entorno TypeScript habitual (tsx, ts-node, Vite, Next.js...)
+
+</v-click>
+
+<v-click>
+
+## 1. Paquetes base
+
+```bash
+npm install langchain @langchain/core
+```
+
+</v-click>
+
+<v-click>
+
+## 2. Proveedores (los que vayas a usar)
+
+```bash
+npm install @langchain/mistralai    # Mistral
+npm install @langchain/google       # Gemini
+npm install @langchain/openai       # GPT-4.1, Azure
+npm install @langchain/anthropic    # Claude
+```
+
+</v-click>
+
+<v-click>
+
+## 3. Entorno TypeScript (si no lo tienes)
+
+```bash
+npm install -D typescript tsx @types/node
+npx tsx mi-script.ts  # Para ejecutar
+```
+
+</v-click>
+
+<v-click>
+
+<div class="mt-2 text-xs opacity-70">
+Versiones actuales (Mayo 2026): langchain v1.4.1 · @langchain/core v1.1.44
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+# ¿Qué LLM usar?
+
+Comparativa de proveedores principales
+
+<div class="text-xs mt-6">
+
+| Proveedor | Modelo | Empresa | Free Tier | Precio API* |
+|-----------|--------|---------|-----------|-------------|
+| **OpenAI** | GPT-4.1 | USA | ❌ No | $2/$8 |
+| **Google** | Gemini 2.5 Flash | USA | ✅ Sí | $0.15/$0.60 |
+| **Anthropic** | Claude 4 Sonnet | USA | ✅ Límite diario | $3/$15 |
+| **Mistral** | Mistral Large | Francia (UE) | ✅ Experiment | ~$2/$6 |
+| **DeepSeek** | DeepSeek R1 | China | ✅ Demo gratis | $0.55/$2.19 |
+
+<p class="mt-4 opacity-70">* Precio por millón de tokens (input/output) - Mayo 2026</p>
+
+<p class="mt-2 text-xs opacity-60">⚠️ Considera las implicaciones de privacidad según tu jurisdicción y tipo de datos</p>
+
+</div>
@@ -0,0 +1,39 @@
+---
+layout: default
+---
+
+# URLs para obtener API Keys
+
+<div class="mt-10 text-base">
+
+<div class="grid grid-cols-2 gap-12">
+
+<div>
+
+### OpenAI
+[platform.openai.com](https://platform.openai.com)
+
+### Google Gemini
+[ai.google.dev/gemini-api](https://ai.google.dev/gemini-api)
+
+### Anthropic (Claude)
+[console.anthropic.com](https://console.anthropic.com)
+
+</div>
+
+<div>
+
+### Mistral AI
+[console.mistral.ai](https://console.mistral.ai)
+
+### DeepSeek
+[platform.deepseek.com](https://platform.deepseek.com)
+
+### Ollama (Local)
+[ollama.com](https://ollama.com)
+
+</div>
+
+</div>
+
+</div>
@@ -0,0 +1,17 @@
+---
+layout: default
+---
+
+# Recomendaciones: Para Empezar
+
+<div class="mt-12">
+
+<div class="border-l-4 border-green-500 pl-6 bg-green-50 dark:bg-green-900/20 p-6">
+  <h2 class="text-2xl font-bold mb-3">🎓 Para aprender y empezar</h2>
+  <p class="text-xl font-bold mb-3">Google Gemini o Mistral Experiment</p>
+  <p class="text-base opacity-80">✅ Gratis</p>
+  <p class="text-base opacity-80">✅ Sin tarjeta de crédito</p>
+  <p class="text-base opacity-80">✅ Límites generosos para desarrollo</p>
+</div>
+
+</div>
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+<h1 class="!text-2xl">Recomendaciones: Producción</h1>
+
+<div class="mt-4">
+
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4 mb-4">
+  <h2 class="!text-lg font-bold mb-2">💼 Para producción</h2>
+  <p class="text-base font-bold mb-1">Claude 4 Sonnet o GPT-4.1</p>
+  <p class="text-sm opacity-80">✅ Mejor precisión y razonamiento</p>
+  <p class="text-sm opacity-80">⚠️ Requiere presupuesto ($3-15/M tokens)</p>
+</div>
+
+<div class="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 p-4">
+  <h2 class="!text-lg font-bold mb-2">💰 Alto volumen / Económico</h2>
+  <p class="text-base font-bold mb-1">DeepSeek R1</p>
+  <p class="text-sm opacity-80">✅ 90% más barato ($0.55-$2.19/M)</p>
+  <p class="text-sm opacity-80">✅ Excelente relación calidad/precio</p>
+</div>
+
+<div class="mt-4 text-xs opacity-60 text-center">
+⚠️ Revisa términos de privacidad y residencia de datos según tus necesidades
+</div>
+
+</div>
@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<h1 class="!text-2xl">Estrategia Recomendada</h1>
+
+<div class="mt-4">
+
+<div class="border-l-4 border-orange-500 pl-4 bg-orange-50 dark:bg-orange-900/20 p-4 mb-4">
+  <h2 class="!text-lg font-bold mb-2">🏠 Desarrollo: Ollama (Local)</h2>
+  <p class="text-sm mb-1">Para testing, iteración rápida y privacidad</p>
+  <p class="text-sm">✅ Gratis • Sin límites • Privado</p>
+  <p class="text-sm">⚠️ Requiere 16GB RAM mínimo</p>
+</div>
+
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4">
+  <h2 class="!text-lg font-bold mb-2">☁️ Producción: APIs Cloud</h2>
+  <p class="text-sm mb-1">Para usuarios finales</p>
+  <p class="text-sm">✅ Mayor calidad • Escalable • Fiable</p>
+</div>
+
+<v-click>
+
+<div class="mt-4 text-center text-base">
+  💡 <strong>Mejor de ambos mundos</strong>: Desarrolla local, despliega cloud
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,50 @@
+---
+layout: default
+---
+
+<h1 class="!text-2xl">Ollama: Requisitos de Hardware</h1>
+
+<div class="text-sm mt-2">
+
+<h2 class="!text-base">📊 ¿Qué necesitas según el modelo?</h2>
+
+<div class="mt-2 text-xs">
+
+| Tamaño | RAM | VRAM GPU | Modelos Populares |
+|--------|-----|----------|-------------------|
+| **3B** | 8GB | 4GB | Llama 3.2 3B, Phi-3 Mini |
+| **7B** | 16GB | 8GB | Llama 3.2 7B, Mistral 7B |
+| **13B** | 32GB | 16GB | Llama 3.2 13B |
+| **70B** | 64GB+ | 24GB+ | Llama 3.3 70B |
+
+</div>
+
+<v-click>
+
+<h2 class="!text-base">💡 Recomendaciones</h2>
+
+<div class="grid grid-cols-3 gap-3 mt-2">
+
+<div class="border-l-4 border-green-500 pl-3">
+  <p class="font-bold text-sm">🎓 Para empezar</p>
+  <p class="text-xs mt-1">Llama 3.2 3B</p>
+  <p class="text-xs opacity-70">8GB VRAM suficiente</p>
+</div>
+
+<div class="border-l-4 border-blue-500 pl-3">
+  <p class="font-bold text-sm">💻 Desarrollo</p>
+  <p class="text-xs mt-1">Llama 3.2 7B</p>
+  <p class="text-xs opacity-70">16GB VRAM + GPU</p>
+</div>
+
+<div class="border-l-4 border-purple-500 pl-3">
+  <p class="font-bold text-sm">🏢 Producción</p>
+  <p class="text-xs mt-1">Usa APIs cloud</p>
+  <p class="text-xs opacity-70">Más fiable</p>
+</div>
+
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,48 @@
+---
+layout: default
+---
+
+# Configuración del Entorno
+
+<div class="text-sm">
+
+<v-click>
+
+## 🔑 Variables de Entorno (.env)
+
+```bash
+# Crea un archivo .env en la raíz
+OPENAI_API_KEY=sk-proj-...
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+</v-click>
+
+<v-click>
+
+## 📦 Opción A: dotenv (tradicional)
+
+```bash
+npm install dotenv
+```
+
+```typescript
+import 'dotenv/config';  // Al inicio del archivo
+```
+
+</v-click>
+
+<v-click>
+
+## ⚡ Opción B: --env-file (Node.js 20+)
+
+```bash
+# Sin instalar nada!
+npx tsx --env-file=.env index.ts
+```
+
+✅ Recomendado: Sin dependencias adicionales
+
+</v-click>
+
+</div>
@@ -0,0 +1,52 @@
+---
+layout: default
+---
+
+# API Key en el Constructor
+
+<div class="text-sm mt-6">
+
+<v-click>
+
+## 🔧 Pasar la key directamente
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+
+const model = new ChatOpenAI({
+  apiKey: "sk-proj-xxxxxxxxxxxxx",  // Directamente aquí
+  model: "gpt-4.1-mini"
+});
+```
+
+</v-click>
+
+<v-click>
+
+## ⚠️ Cuándo usarlo
+
+<div class="grid grid-cols-2 gap-8 mt-4 text-xs">
+
+<div>
+  <p class="font-bold mb-2 text-sm">✅ Variables de entorno</p>
+  <p>Para producción, CI/CD y equipos</p>
+</div>
+
+<div>
+  <p class="font-bold mb-2 text-sm">⚡ Constructor</p>
+  <p>Solo testing rápido y prototipos</p>
+</div>
+
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="mt-6 text-center text-sm opacity-80">
+🔒 Recuerda: Añade <code>.env</code> a <code>.gitignore</code>
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,69 @@
+---
+layout: two-cols
+layoutClass: gap-8
+---
+
+# Hello World con LangChain.js
+
+Tu primera aplicación LLM
+
+```typescript {all|1-2|4-7|9-11|13-15|all}
+// index.ts
+import { ChatOpenAI } from "@langchain/openai";
+
+// 1. Crear el modelo
+const model = new ChatOpenAI({
+  model: "gpt-4.1-mini",
+});
+
+// 2. Invocar el modelo
+const response = await model.invoke(
+  "¿Qué es LangChain?"
+);
+
+// 3. Ver la respuesta
+console.log(response.content);
+```
+
+::right::
+
+<div class="mt-12 text-sm pl-4">
+
+<v-click>
+
+## 🏃 Ejecutar con tsx
+
+```bash
+# Instalar tsx
+npm install -D tsx
+
+# Ejecutar directamente
+npx tsx index.ts
+```
+
+</v-click>
+
+<v-click>
+
+## 📤 Salida Esperada
+
+```
+LangChain es un framework para
+desarrollar aplicaciones con LLMs.
+Permite conectar modelos de lenguaje
+con datos externos y herramientas...
+```
+
+</v-click>
+
+<v-click>
+
+## 🎯 Conceptos Clave
+
+- **Model**: ChatOpenAI
+- **invoke()**: Llamada síncrona
+- **response.content**: El texto generado
+
+</v-click>
+
+</div>
@@ -0,0 +1,65 @@
+---
+layout: two-cols
+layoutClass: gap-8
+---
+
+# Ejemplo con Google Gemini
+
+Alternativa gratuita a OpenAI
+
+```typescript {all|1-2|4-7|9-11|all}
+// gemini-example.ts
+import { ChatGoogle } from "@langchain/google";
+
+// 1. Crear el modelo
+const model = new ChatGoogle({
+  model: "gemini-2.5-flash",
+});
+
+// 2. Invocar
+const response = await model.invoke(
+  "¿Qué es LangChain?"
+);
+
+console.log(response.content);
+```
+
+::right::
+
+<div class="mt-12 text-sm pl-4">
+
+<v-click>
+
+## 📦 Instalación
+
+```bash
+npm install @langchain/google
+```
+
+</v-click>
+
+<v-click>
+
+## 🔑 API Key
+
+```bash
+# .env
+GOOGLE_API_KEY=AI...
+```
+
+Obtener gratis en:
+[ai.google.dev/gemini-api](https://ai.google.dev/gemini-api)
+
+</v-click>
+
+<v-click>
+
+## ⚡ Ejecutar
+
+```bash
+npx tsx --env-file=.env gemini-example.ts
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,65 @@
+---
+layout: two-cols
+layoutClass: gap-8
+---
+
+# Ejemplo con Mistral AI
+
+Alternativa europea (Francia)
+
+```typescript {all|1-2|4-7|9-11|all}
+// mistral-example.ts
+import { ChatMistralAI } from "@langchain/mistralai";
+
+// 1. Crear el modelo
+const model = new ChatMistralAI({
+  model: "mistral-large-latest",
+});
+
+// 2. Invocar
+const response = await model.invoke(
+  "¿Qué es LangChain?"
+);
+
+console.log(response.content);
+```
+
+::right::
+
+<div class="mt-12 text-sm pl-4">
+
+<v-click>
+
+## 📦 Instalación
+
+```bash
+npm install @langchain/mistralai
+```
+
+</v-click>
+
+<v-click>
+
+## 🔑 API Key
+
+```bash
+# .env
+MISTRAL_API_KEY=...
+```
+
+Obtener en:
+[console.mistral.ai](https://console.mistral.ai)
+
+</v-click>
+
+<v-click>
+
+## ⚡ Ejecutar
+
+```bash
+npx tsx --env-file=.env mistral-example.ts
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+# Usar Ollama con LangChain.js
+
+<div class="text-sm mt-4">
+
+<v-click>
+
+## 📦 Instalación
+
+```bash
+# 1. Descargar e instalar Ollama
+# https://ollama.com/download
+
+# 2. Descargar un modelo
+ollama pull llama3.2
+
+# 3. Instalar paquete LangChain
+npm install @langchain/ollama
+```
+
+</v-click>
+
+<v-click>
+
+## 💻 Código
+
+```typescript
+import { ChatOllama } from "@langchain/ollama";
+
+const model = new ChatOllama({
+  model: "llama3.2",
+  baseUrl: "http://localhost:11434",
+});
+
+const response = await model.invoke("¿Qué es LangChain?");
+console.log(response.content);
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+# ¿Qué es Zod?
+
+<div class="mt-10">
+
+<v-click>
+
+<div class="text-base mb-8">
+
+**Zod** es una librería de validación de esquemas para TypeScript
+
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="text-sm space-y-4 mb-6">
+
+**¿Para qué lo usamos en LangChain?**
+
+- ✅ Definir la estructura esperada de las respuestas del LLM
+- ✅ Validar que el LLM devuelve datos en el formato correcto
+- ✅ Obtener autocompletado y type safety en TypeScript
+- ✅ Convertir respuestas de texto a objetos JavaScript tipados
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```bash
+npm install zod
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,34 @@
+---
+layout: default
+---
+
+# Ejemplo de Zod
+
+<div class="text-sm mt-8">
+
+```typescript
+import { z } from "zod";
+
+// Definir el esquema de datos
+const UserSchema = z.object({
+  name: z.string(),
+  age: z.number().min(0).max(120),
+  email: z.string().email(),
+  roles: z.array(z.enum(["admin", "user", "guest"])),
+});
+
+// Inferir el tipo TypeScript automáticamente
+type User = z.infer<typeof UserSchema>;
+
+// Validar datos
+const result = UserSchema.parse({
+  name: "Juan",
+  age: 30,
+  email: "juan@example.com",
+  roles: ["admin", "user"]
+});
+// ✅ Si los datos son válidos, devuelve el objeto tipado
+// ❌ Si no, lanza un error con detalles del problema
+```
+
+</div>