initial commit: slides + practica_resueltos + README

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 11:50:55 +02:00
commit 0aff31e2d3
203 changed files with 23207 additions and 0 deletions
@@ -0,0 +1,14 @@
+---
+layout: cover
+class: text-center
+---
+
+# Temas Pendientes
+
+Lo que nos dejamos en el tintero
+
+<div class="pt-12">
+  <span class="text-xl opacity-80">
+    Hay mucho más por explorar en el ecosistema LangChain...
+  </span>
+</div>
@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+# Sistemas Multi-Agente (Subagentes)
+
+<v-clicks>
+
+### Patrones principales en LangChain/LangGraph
+
+| Patrón | Descripción |
+|--------|-------------|
+| **Subagents** | Un agente supervisor coordina subagentes como tools |
+| **Handoffs** | El comportamiento cambia dinámicamente según el estado |
+| **Skills** | Prompts y conocimiento especializado cargado bajo demanda |
+| **Router** | Clasifica input y lo dirige a agentes especializados |
+| **Custom Workflow** | Flujos con LangGraph mezclando lógica determinista y agéntica |
+
+[Docs: Multi-agent](https://docs.langchain.com/oss/javascript/langchain/multi-agent/index)
+
+</v-clicks>
+
@@ -0,0 +1,37 @@
+---
+layout: default
+---
+
+# Deep Agents
+
+<v-clicks>
+
+### Librería standalone para agentes complejos
+
+Inspirada en Claude Code, Deep Research y Manus.
+
+### Características principales
+
+- **Planificación**: Capacidad de planificar tareas multi-paso
+- **File systems**: Sistema de archivos virtual para gestión de contexto
+- **Subagentes**: Spawn de agentes especializados para subtareas
+- **Long-term memory**: Integración con almacenamiento persistente
+
+### Ejemplo básico
+
+```typescript
+import { createDeepAgent } from "@langchain/deepagents";
+
+const agent = createDeepAgent({
+  model: "gpt-4.1",
+  filesystem: true,
+  planning: true,
+});
+
+await agent.invoke("Research and write a report about AI trends");
+```
+
+[Docs: Deep Agents](https://docs.langchain.com/oss/javascript/deepagents/overview)
+
+</v-clicks>
+
@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+# Long-term Memory con Semantic Search
+
+<v-clicks>
+
+### InMemoryStore con embeddings
+
+```typescript
+import { InMemoryStore } from "@langchain/langgraph";
+import { OpenAIEmbeddings } from "@langchain/openai";
+
+const embeddings = new OpenAIEmbeddings({ model: "text-embedding-3-small" });
+
+const store = new InMemoryStore({
+  index: { embeddings, dims: 1536 }
+});
+
+// Guardar memorias
+await store.put(["user_123", "memories"], "1", { text: "I love pizza" });
+
+// Buscar por similitud semántica
+const items = await store.search(
+  ["user_123", "memories"],
+  { query: "I'm hungry", limit: 2 }
+);
+```
+
+</v-clicks>
+
@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+# Integración MCP (Model Context Protocol)
+
+<v-clicks>
+
+### MCP en LangChain.js
+
+Protocolo abierto que estandariza cómo las aplicaciones proporcionan tools y contexto a LLMs.
+
+```typescript
+import { ChatOpenAI, tools } from "@langchain/openai";
+
+const model = new ChatOpenAI({ model: "gpt-4.1" });
+
+const response = await model.invoke("Roll 2d4+1", {
+  tools: [
+    tools.mcp({
+      serverLabel: "dmcp",
+      serverDescription: "A D&D MCP server for dice rolling",
+      serverUrl: "https://dmcp-server.deno.dev/sse",
+      requireApproval: "never",
+    }),
+  ],
+});
+```
+</v-clicks>
+
@@ -0,0 +1,38 @@
+---
+layout: default
+---
+
+# Context Engineering
+
+<v-clicks>
+
+### Inyección de dependencias en runtime
+
+```typescript
+const contextSchema = z.object({
+  userId: z.string(),
+  apiKey: z.string(),
+});
+
+const fetchUserData = tool(
+  async ({ query }, runtime: ToolRuntime<any, typeof contextSchema>) => {
+    const { userId, apiKey } = runtime.context;
+    return await performQuery(query, apiKey, userId);
+  },
+  { name: "fetch_user_data", schema: z.object({ query: z.string() }) }
+);
+
+const agent = createAgent({
+  model: "gpt-4.1",
+  tools: [fetchUserData],
+  contextSchema
+});
+
+// Cada usuario tiene su propio contexto
+await agent.invoke(messages, {
+  context: { userId: "user_123", apiKey: "sk-..." }
+});
+```
+
+</v-clicks>
+
@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+# Tipos de Contexto en LangGraph
+
+<v-clicks>
+
+### Tres dimensiones de contexto
+
+| Tipo | Mutabilidad | Alcance | Uso |
+|------|-------------|---------|-----|
+| **Static (config)** | Inmutable | Single run | user ID, API keys, DB connections |
+| **Dynamic (state)** | Mutable | Single run | historial, resultados intermedios |
+| **Store** | Mutable | Cross-conversation | memorias persistentes, preferencias |
+
+### Casos de uso
+
+- **Autenticación por usuario**: Inyectar API keys específicas por tenant
+- **Permisos dinámicos**: Ajustar herramientas disponibles según rol
+- **Personalización**: Cargar preferencias del usuario desde el store
+- **Multi-tenancy**: Aislar datos entre organizaciones
+
+[Docs: Context Engineering](https://docs.langchain.com/oss/javascript/langchain/context-engineering)
+
+</v-clicks>
@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+# Testing de Aplicaciones LLM
+
+<v-clicks>
+
+### Dos enfoques complementarios
+
+**Unit tests**: Componentes aislados con mocks, validaciones rápidas y predecibles.
+
+**Integration tests**: Llamadas reales para confirmar que todo funciona junto.
+
+### AgentEvals
+
+```typescript
+import { createTrajectoryMatchEvaluator } from "agentevals";
+
+// Trajectory Match: compara contra trayectoria de referencia
+const evaluator = createTrajectoryMatchEvaluator({ matchMode: "subset" });
+
+// LLM-as-Judge: validación cualitativa con un modelo
+const llmEvaluator = createLLMJudgeEvaluator({ model: "gpt-4.1" });
+```
+
+### Integración con LangSmith
+Configura `LANGSMITH_API_KEY` y `LANGSMITH_TRACING` para registrar experimentos automáticamente con Vitest/Jest.
+
+[Docs: Testing](https://docs.langchain.com/oss/javascript/langchain/test)
+
+</v-clicks>
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+# Recursos para continuar aprendiendo
+
+<v-clicks>
+
+### Documentación oficial
+- **LangChain.js Docs**: [docs.langchain.com](https://docs.langchain.com/oss/javascript)
+- **LangGraph.js**: [docs.langchain.com/langgraph](https://docs.langchain.com/langgraph)
+- **LangSmith**: [docs.smith.langchain.com](https://docs.smith.langchain.com)
+
+### Cursos y tutoriales
+- **LangChain Academy**: Cursos oficiales gratuitos
+- **DeepLearning.AI**: Cursos sobre LLMs y LangChain
+- **YouTube**: Canal oficial de LangChain
+
+### Comunidad
+- **Discord**: Comunidad activa de LangChain
+- **GitHub Discussions**: Preguntas y respuestas
+- **Twitter/X**: @LangChainAI para novedades
+
+### Chat de LangChain
+- **Chat**: [chat.langchain.com](https://chat.langchain.com) - Asistente IA entrenado con la documentación oficial
+
+</v-clicks>
@@ -0,0 +1,33 @@
+---
+layout: default
+---
+
+# AG-UI Protocol
+
+<v-clicks>
+
+### El tercer protocolo agentico
+
+| Protocolo | Conecta... |
+|-----------|-----------|
+| **MCP** | Agente ↔ Herramientas |
+| **A2A** | Agente ↔ Agente |
+| **AG-UI** | Agente ↔ Usuario |
+
+AG-UI **desacopla** el backend agentico del frontend: el servidor emite eventos AG-UI independientemente del framework usado (LangGraph, CrewAI...); el cliente los consume independientemente de la UI. Cada lado evoluciona por separado.
+
+### Estandariza la sesión, no solo el acceso
+
+Los agentes no caben en request/response: ejecuciones largas, trabajo intermedio visible, comportamiento no determinístico. AG-UI modela la **sesión completa** agente-usuario con 16 eventos tipados sobre HTTP o WebSockets — no es solo un endpoint, es un contrato de interacción viva.
+
+### La UI controlada por el agente (Generative UI)
+
+El agente no solo devuelve texto — renderiza componentes, sincroniza estado compartido con el frontend y expone pasos de razonamiento en tiempo real. El agente *construye* la interfaz.
+
+### Human-in-the-loop como primitiva del protocolo
+
+Interrupciones nativas: pausar, aprobar o editar en cualquier punto del flujo **sin perder estado**. El humano es parte del protocolo, no un caso especial.
+
+[Docs: ag-ui.com](https://docs.ag-ui.com/introduction)
+
+</v-clicks>