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,15 @@
+---
+layout: cover
+class: text-center
+---
+
+# ¿Qué es LangChain?
+
+Framework para desarrollar aplicaciones con Modelos de Lenguaje (LLMs)
+
+<div class="pt-12">
+  <span class="px-2 py-1 rounded cursor-pointer opacity-80">
+    Conectando LLMs con el mundo real
+  </span>
+</div>
+
@@ -0,0 +1,33 @@
+---
+layout: default
+---
+
+# Historia de LangChain
+
+<div class="text-sm">
+
+<v-clicks>
+
+<div class="mb-3">
+  <p><strong>Octubre 2022</strong>: Nace LangChain en <strong>Python</strong> 🐍</p>
+  <p class="text-xs opacity-80 ml-4">Creado por Harrison Chase • Enfoque inicial: encadenar prompts y LLMs</p>
+</div>
+
+<div class="mb-3">
+  <p><strong>Diciembre 2022</strong>: Lanzamiento de <strong>LangChain.js</strong> ⚡</p>
+  <p class="text-xs opacity-80 ml-4">Apenas 2 meses después • Port oficial • Para desarrolladores web</p>
+</div>
+
+<div class="mb-3">
+  <p><strong>2023</strong>: Explosión de adopción en ambos ecosistemas</p>
+  <p class="text-xs opacity-80 ml-4">Múltiples proveedores de LLMs • 110K+ stars en GitHub</p>
+</div>
+
+<div class="mb-3">
+  <p><strong>2024-2025</strong>: Maduración hacia producción</p>
+  <p class="text-xs opacity-80 ml-4"><strong>LangGraph</strong>: Control de bajo nivel • <strong>LangSmith</strong>: Observabilidad y testing</p>
+</div>
+
+</v-clicks>
+
+</div>
@@ -0,0 +1,34 @@
+---
+layout: center
+class: text-center
+---
+
+# Filosofía de LangChain
+
+<div class="grid grid-cols-2 gap-4 mt-8">
+
+<div v-click class="border border-main rounded p-4">
+  <div class="text-2xl mb-2">🔌</div>
+  <div class="font-bold">Flexibilidad</div>
+  <div class="text-sm opacity-80">Sin vendor lock-in</div>
+</div>
+
+<div v-click class="border border-main rounded p-4">
+  <div class="text-2xl mb-2">🔗</div>
+  <div class="font-bold">Integración</div>
+  <div class="text-sm opacity-80">LLMs + Datos externos</div>
+</div>
+
+<div v-click class="border border-main rounded p-4">
+  <div class="text-2xl mb-2">🤖</div>
+  <div class="font-bold">Agentes</div>
+  <div class="text-sm opacity-80">Decisiones autónomas</div>
+</div>
+
+<div v-click class="border border-main rounded p-4">
+  <div class="text-2xl mb-2">🏗️</div>
+  <div class="font-bold">Producción</div>
+  <div class="text-sm opacity-80">Del prototipo a la realidad</div>
+</div>
+
+</div>
@@ -0,0 +1,33 @@
+---
+layout: default
+---
+
+# Principios Fundamentales
+
+<div class="grid grid-cols-1 gap-6 mt-8">
+
+<div class="border-l-4 border-blue-500 pl-4">
+  <h3 class="text-xl font-bold">1. Flexibilidad de Modelos</h3>
+  <p class="opacity-80">
+    Estandarización de inputs/outputs entre proveedores de LLMs.
+    Cambia fácilmente entre OpenAI, Anthropic, Google, etc.
+  </p>
+</div>
+
+<div class="border-l-4 border-green-500 pl-4">
+  <h3 class="text-xl font-bold">2. Orquestación Compleja</h3>
+  <p class="opacity-80">
+    Los modelos coordinan flujos de trabajo con datos externos y herramientas.
+    Más allá de la simple generación de texto.
+  </p>
+</div>
+
+<div class="border-l-4 border-purple-500 pl-4">
+  <h3 class="text-xl font-bold">3. Fiabilidad en Producción</h3>
+  <p class="opacity-80">
+    Observabilidad, testing y debugging para aplicaciones reales.
+    El prototipo es fácil, producción es el reto.
+  </p>
+</div>
+
+</div>
@@ -0,0 +1,38 @@
+---
+layout: default
+---
+
+# Creencias Fundamentales
+
+<div class="text-sm">
+
+<v-clicks>
+
+<div class="mb-4">
+  <h3 class="text-lg">🚀 Los LLMs son tecnología poderosa</h3>
+  <p class="opacity-80">Una innovación que vale la pena construir sobre ella</p>
+</div>
+
+<div class="mb-4">
+  <h3 class="text-lg">🔗 Los LLMs son mejores con datos externos</h3>
+  <p class="opacity-80">Combinar LLMs con fuentes de datos externas potencia sus capacidades</p>
+</div>
+
+<div class="mb-4">
+  <h3 class="text-lg">🤖 El futuro es agéntico</h3>
+  <p class="opacity-80">Las aplicaciones exhibirán capacidades autónomas y de toma de decisiones</p>
+</div>
+
+<div class="mb-4">
+  <h3 class="text-lg">🌱 Estamos en una etapa temprana</h3>
+  <p class="opacity-80">El campo está en constante evolución con espacio sustancial para crecer</p>
+</div>
+
+<div class="mb-4">
+  <h3 class="text-lg">💪 Producción es difícil</h3>
+  <p class="opacity-80">Prototipar es fácil, lograr fiabilidad en producción es el verdadero desafío</p>
+</div>
+
+</v-clicks>
+
+</div>
@@ -0,0 +1,31 @@
+---
+layout: center
+class: text-center
+---
+
+# Ecosistema LangChain
+
+<div class="grid grid-cols-3 gap-8 mt-12">
+
+<div v-click>
+  <div class="text-4xl mb-4">⛓️</div>
+  <div class="font-bold text-xl">LangChain (v1)</div>
+  <div class="text-sm opacity-70 mt-2">Interfaz productiva para agentes</div>
+  <div class="text-sm opacity-70">createAgent + Middleware</div>
+</div>
+
+<div v-click>
+  <div class="text-4xl mb-4">🕸️</div>
+  <div class="font-bold text-xl">LangGraph</div>
+  <div class="text-sm opacity-70 mt-2">Motor de runtime confiable</div>
+  <div class="text-sm opacity-70">Persistencia, streaming, control granular</div>
+</div>
+
+<div v-click>
+  <div class="text-4xl mb-4">🔍</div>
+  <div class="font-bold text-xl">LangSmith</div>
+  <div class="text-sm opacity-70 mt-2">Observabilidad + Evaluación</div>
+  <div class="text-sm opacity-70">Tracing automático, debugging visual</div>
+</div>
+
+</div>
@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+# ¿Quién usa LangChain?
+
+<div class="grid grid-cols-2 gap-6 mt-6">
+
+<div>
+
+## 🏢 Empresas en Producción
+
+- **LinkedIn** - Agentes con LangGraph
+- **Uber** - Sistemas agénticos
+- **Replit** - Asistentes de código
+- **Klarna** - Chatbots de atención
+- **Snowflake** - Integración de datos
+- **J.P. Morgan** - Aplicaciones financieras
+- **BCG** - Consultoría con IA
+
+</div>
+
+<div>
+
+## 📊 Números de Adopción
+
+- **1,306** empresas verificadas
+- **132K+** aplicaciones LLM construidas
+- **130M+** descargas totales
+- **51%** usando agentes en producción
+- **78%** planean usar agentes pronto
+
+### 💼 Casos de Uso Comunes
+
+- Chat sobre documentos
+- Atención al cliente
+- Asistentes personalizados
+- Análisis de datos
+
+</div>
+
+</div>
@@ -0,0 +1,52 @@
+---
+layout: default
+---
+
+# Modelo de Negocio de LangChain
+
+<div class="grid grid-cols-2 gap-6 mt-4 text-sm">
+
+<div>
+
+## 🏢 La Empresa
+
+
+- **Fundadores**: Harrison Chase y Ankush Gola
+- **Fundación**: Octubre 2022
+- **Sede**: San Francisco, CA
+- **CEO**: Harrison Chase
+- **Equipo**: ~136 empleados (2025)
+
+### 💰 Financiación
+
+- **$260M** levantados en total
+- **$1.25B** de valoración (Oct 2025)
+- **Inversores**: Sequoia, Benchmark, IVP, CapitalG
+
+
+</div>
+
+<div>
+
+## 💼 Modelo de Negocio
+
+
+**Freemium B2B**
+- Framework open-source (gratis)
+- Monetización vía LangSmith
+
+**Revenue 2025**: $16M ARR
+- Crecimiento: $8.5M → $16M en 1 año
+- **1,000+** clientes empresariales
+
+
+### 💎 LangSmith Pricing
+
+- **Developer**: Gratis (5k traces/mes)
+- **Plus**: $39/usuario/mes (10k traces)
+- **Enterprise**: Personalizado + self-hosted
+
+
+</div>
+
+</div>
@@ -0,0 +1,27 @@
+---
+layout: two-cols
+---
+
+# LangChain.js
+
+La implementación JavaScript/TypeScript del framework LangChain
+
+::right::
+
+<v-clicks>
+
+## ¿Por qué LangChain.js?
+
+- **Desarrollo web nativo**
+  - Frontend y backend con la misma tecnología
+
+- **Ecosistema JavaScript**
+  - NPM, TypeScript, Node.js
+
+- **Paridad con Python**
+  - Mismos conceptos y APIs
+
+- **Comunidad activa**
+  - Mantenido oficialmente
+
+</v-clicks>
@@ -0,0 +1,54 @@
+---
+layout: default
+---
+
+# LangChain.js: Entornos de Ejecución
+
+<div class="grid grid-cols-2 gap-6 mt-6">
+
+<div>
+
+## 🖥️ Runtimes Soportados
+
+<v-clicks>
+
+- **Node.js** (20.x, 22.x, 24.x)
+  - ESM y CommonJS
+
+- **Deno** - Runtime seguro
+
+- **Bun** - Runtime ultra-rápido
+
+- **Navegadores** - Client-side
+
+</v-clicks>
+
+</div>
+
+<div>
+
+## ☁️ Edge & Serverless
+
+<v-clicks>
+
+- **Cloudflare Workers**
+
+- **Vercel Edge Functions**
+
+- **Next.js** (Server, Edge, Browser)
+
+- **Supabase Edge Functions**
+
+</v-clicks>
+
+<v-click>
+
+### 💪 Ventaja Clave
+
+**Una sola codebase** para frontend, backend, edge y serverless
+
+</v-click>
+
+</div>
+
+</div>
@@ -0,0 +1,59 @@
+---
+layout: default
+---
+
+# Arquitectura de Componentes
+
+<p class="text-sm opacity-80 -mt-2">Los componentes trabajan juntos para crear aplicaciones AI sofisticadas</p>
+
+<div class="mt-4">
+
+## 🧩 Seis Categorías Principales
+
+<div class="grid grid-cols-3 gap-3 mt-4 text-sm">
+
+<v-click>
+<div class="border-l-4 border-blue-500 pl-3 py-1">
+  <h3 class="font-bold text-base">📝 Models</h3>
+  <p class="text-xs opacity-80">Chat, LLMs, embeddings</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-green-500 pl-3 py-1">
+  <h3 class="font-bold text-base">🔧 Tools</h3>
+  <p class="text-xs opacity-80">APIs, búsquedas, DBs</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-purple-500 pl-3 py-1">
+  <h3 class="font-bold text-base">🤖 Agents</h3>
+  <p class="text-xs opacity-80">Orquestación y razonamiento</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-yellow-500 pl-3 py-1">
+  <h3 class="font-bold text-base">💾 Memory</h3>
+  <p class="text-xs opacity-80">Historia y estado</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-red-500 pl-3 py-1">
+  <h3 class="font-bold text-base">🔍 Retrievers</h3>
+  <p class="text-xs opacity-80">Búsqueda vectorial y web</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-orange-500 pl-3 py-1">
+  <h3 class="font-bold text-base">📄 Documents</h3>
+  <p class="text-xs opacity-80">Loaders, splitters</p>
+</div>
+</v-click>
+
+</div>
+
+</div>