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,20 @@
+---
+layout: cover
+class: text-center
+---
+
+# Alternativas en el Ecosistema JS/TS
+
+Frameworks y SDKs para aplicaciones LLM en TypeScript
+
+<div class="pt-12">
+  <span class="text-xl opacity-80">
+    Pinceladas rápidas del mercado actual (Mayo 2026)
+  </span>
+</div>
+
+<div class="mt-8 text-sm opacity-60">
+  Nota: Nos centramos exclusivamente en opciones JavaScript/TypeScript
+</div>
+
+
@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+# El Panorama JS/TS para LLMs
+
+<v-clicks>
+
+### Tres niveles de abstracción
+
+```
+┌─────────────────────────────────────────────────────┐
+│  Frameworks (LangChain, LlamaIndex)                 │  ← Mayor abstracción
+├─────────────────────────────────────────────────────┤
+│  SDKs unificados (Vercel AI SDK)                    │  ← Abstracción media
+├─────────────────────────────────────────────────────┤
+│  APIs nativas (OpenAI SDK, Anthropic SDK, etc.)     │  ← Control total
+└─────────────────────────────────────────────────────┘
+```
+
+### La pregunta no es "cuál es mejor"
+
+Es: **¿qué nivel de abstracción necesito?**
+
+- **Prototipo rápido** → API nativa o Vercel AI
+- **RAG complejo** → LlamaIndex o LangChain
+- **Agentes sofisticados** → LangGraph / DeepAgents o Vercel AI SDK 6
+- **UI streaming en React** → Vercel AI SDK
+
+</v-clicks>
+
@@ -0,0 +1,50 @@
+---
+layout: default
+---
+
+# LlamaIndex.TS
+
+El "hermano pequeño" de LlamaIndex (Python)
+
+<v-clicks>
+
+### Realidad del ecosistema TS
+
+<div class="grid grid-cols-2 gap-4">
+<div>
+
+**Lo bueno**
+- Especializado en RAG
+- API similar a la versión Python
+- Conectores de datos incluidos
+- Activamente desarrollado
+
+</div>
+<div>
+
+**La realidad**
+- Mejorando rápido (agentes, LiteParse)
+- Documentación aún por detrás de Python
+- Comunidad más pequeña
+- Features llegan después
+
+</div>
+</div>
+
+### Ejemplo básico
+
+```typescript
+import { Document, VectorStoreIndex } from "llamaindex";
+
+const doc = new Document({ text: "Contenido..." });
+const index = await VectorStoreIndex.fromDocuments([doc]);
+const response = await index.asQueryEngine().query({ query: "Mi pregunta" });
+```
+
+<div class="p-3 bg-yellow-500/10 rounded text-sm">
+⚠️ Ha mejorado mucho, pero si tu proyecto permite Python, LlamaIndex Python sigue siendo más completo.
+</div>
+
+</v-clicks>
+
+
@@ -0,0 +1,36 @@
+---
+layout: default
+---
+
+# Vercel AI SDK
+
+El SDK moderno para aplicaciones AI en JS/TS
+
+<v-clicks>
+
+### Por qué destaca
+
+- **Provider-agnostic**: OpenAI, Anthropic, Google, Mistral, Groq...
+- **Streaming nativo**: Pensado para UIs reactivas
+- **React-first**: Hooks listos para usar (`useChat`, `useCompletion`)
+- **Edge-ready**: Funciona en Vercel, Cloudflare Workers, etc.
+- **Ligero**: Pocas abstracciones, código directo
+
+### Ya en v6 — El SDK que más ha crecido
+
+```typescript
+import { openai } from '@ai-sdk/openai';
+import { generateText } from 'ai';
+
+const { text } = await generateText({
+  model: openai('gpt-4.1'),
+  prompt: 'Explica qué es RAG',
+});
+```
+
+<div class="mt-4 p-3 bg-green-500/10 rounded">
+✅ Excelente para: Apps Next.js/React, APIs serverless, prototipos rápidos
+</div>
+
+</v-clicks>
+
@@ -0,0 +1,40 @@
+---
+layout: default
+---
+
+# Vercel AI SDK 6 - Agentes
+
+<v-clicks>
+
+### Agent class (nuevo en v6)
+
+```typescript
+import { openai } from '@ai-sdk/openai';
+import { Agent, tool } from 'ai';
+import { z } from 'zod';
+
+const agent = new Agent({
+  model: openai('gpt-4.1'),
+  tools: {
+    weather: tool({
+      description: 'Obtiene el clima',
+      parameters: z.object({ city: z.string() }),
+      execute: async ({ city }) => ({ temp: 22, condition: 'Soleado' }),
+    }),
+  },
+  maxSteps: 5,
+});
+```
+
+### ¿Agentes completos?
+
+| Tiene ✅ | No tiene ❌ |
+|----------|-------------|
+| Agent class reutilizable | Persistencia de estado (threads) |
+| Human-in-the-loop (`needsApproval`) | Tools built-in (code interpreter) |
+| Tools custom + Streaming | Orquestación multi-agente nativa |
+
+</v-clicks>
+
+
+
@@ -0,0 +1,52 @@
+---
+layout: default
+---
+
+# APIs Nativas de los Providers
+
+Cada provider tiene su SDK oficial para Node.js/TS
+
+<v-clicks>
+
+<div class="grid grid-cols-2 gap-6 mt-4">
+
+<div>
+
+### OpenAI SDK
+```typescript
+import OpenAI from "openai";
+const openai = new OpenAI();
+
+// Function calling nativo
+const response = await openai.chat.completions.create({
+  model: "gpt-4.1",
+  messages: [...],
+  tools: [{ type: "function", function: {...} }],
+});
+```
+- Assistants API (agentes con estado)
+- File search, code interpreter built-in
+
+</div>
+
+<div>
+
+### Anthropic SDK + Agent SDK
+```typescript
+import Anthropic from "@anthropic-ai/sdk";
+const anthropic = new Anthropic();
+
+const message = await anthropic.messages.create({
+  model: "claude-sonnet-4-6",
+  messages: [...],
+  tools: [{ name: "...", input_schema: {...} }],
+});
+```
+- Tool use muy potente
+- **Claude Agent SDK** (`@anthropic-ai/claude-agent-sdk`)
+
+</div>
+
+</div>
+
+</v-clicks>
@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+# ¿Agentes con APIs Nativas?
+
+Cada provider tiene su propio enfoque
+
+<v-clicks>
+
+### OpenAI: Assistants API
+
+```typescript
+const assistant = await openai.beta.assistants.create({
+  name: "Analyst", tools: [{ type: "code_interpreter" }], model: "gpt-4.1",
+});
+const thread = await openai.beta.threads.create();
+const run = await openai.beta.threads.runs.create(thread.id, { assistant_id: assistant.id });
+```
+
+- Agentes con estado, tools built-in (code interpreter, file search)
+
+### Anthropic: Claude Agent SDK
+- Agent SDK con tools built-in (Bash, Read, Edit, Web...)
+- O tool use manual si prefieres control total
+
+### Google (Gemini): @google/genai SDK
+
+```typescript
+import { GoogleGenAI } from "@google/genai";
+const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
+const response = await ai.models.generateContent({
+  model: "gemini-2.5-flash", contents: "Explica RAG",
+});
+```
+
+- Function calling similar a OpenAI
+- Vertex AI Agents Builder para low-code enterprise
+
+</v-clicks>
+
+
@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+# Comparativa Rápida: Ecosistema JS/TS
+
+| | LangChain.js | LlamaIndex.TS | Vercel AI | APIs Nativas |
+|---|:---:|:---:|:---:|:---:|
+| **Madurez TS** | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+| **RAG** | ✅ Completo | ✅ Especializado | ⚠️ Básico | 🔧 Manual |
+| **Agentes** | ✅ LangGraph | ⚠️ Básico | ✅ Agent class | 🔧 Varía |
+| **Streaming UI** | ✅ | ⚠️ | ✅✅ | ✅ |
+| **Curva aprendizaje** | Media-Alta | Media | Baja | Baja |
+| **Vendor lock-in** | Bajo | Bajo | Bajo | Alto |
+
+
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+
+# Recomendación Pragmática
+
+<v-clicks>
+
+| Caso de uso | Recomendación |
+|-------------|---------------|
+| **Prototipo/MVP** | Vercel AI SDK o API nativa |
+| **RAG** | LangChain.js (o Python si puedes) |
+| **Agentes complejos** | LangGraph / DeepAgents |
+| **App React con chat** | Vercel AI SDK |
+| **Control total** | APIs nativas del provider |
+
+<div class="p-3 bg-blue-500/10 rounded mt-2 text-sm">
+
+1. **Empieza simple** → API nativa o Vercel AI
+2. **Añade complejidad cuando la necesites** → LangChain/LangGraph
+3. **No sobre-ingenierices** → La herramienta mínima que resuelva el problema
+
+</div>
+
+</v-clicks>
@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+# Reflexión Final
+
+<v-clicks>
+
+### El ecosistema JS/TS para LLMs está madurando
+
+- **2023**: LangChain dominaba, pocas alternativas
+- **2024**: Explosión de opciones, Vercel AI despega
+- **2025**: Vercel AI SDK 5/6, Claude Agent SDK, DeepAgents
+- **2026**: Ecosistema TS ya compite seriamente con Python
+
+### Pero seamos honestos...
+
+<div class="p-4 bg-yellow-500/10 rounded mt-4">
+
+**Python sigue adelante** en el ecosistema LLM:
+- Más ejemplos, tutoriales, comunidad
+- Features nuevas llegan antes
+- Mejor soporte de ML/embeddings locales
+
+Si tu stack lo permite, Python puede ser más productivo para AI.
+
+</div>
+
+</v-clicks>
+
+
@@ -0,0 +1,38 @@
+---
+layout: default
+---
+
+# ¿Cuándo JS/TS es viable para AI?
+
+<v-clicks>
+
+### Casos donde tiene sentido
+
+- Tu equipo es **JS/TS puro** y no quieres añadir Python
+- Necesitas **edge computing** (Cloudflare Workers, Vercel Edge)
+- Tu aplicación es **web-first** con mucho frontend
+- Quieres un **stack unificado** (mismo lenguaje front y back)
+
+### El ecosistema está mejorando
+
+<div class="grid grid-cols-2 gap-4 mt-4">
+<div class="p-3 bg-green-500/10 rounded">
+
+**Vercel AI SDK** está muy maduro y bien mantenido
+
+</div>
+<div class="p-3 bg-green-500/10 rounded">
+
+**LangChain.js** sigue de cerca a Python
+
+</div>
+</div>
+
+<div class="mt-6 p-4 bg-blue-500/10 rounded">
+
+**Conclusión**: JS/TS ya es una opción seria para aplicaciones LLM en producción, especialmente si tu contexto lo favorece.
+
+</div>
+
+</v-clicks>
+