Gabriel Neuman
Gabriel Neuman
🏗️ Proyecto4 de abril de 2026·Naira·Gabriel Neuman

Presentaciones Interactivas: Anatomía de un Agente y el Plan para Zoom en Vivo

Reestructuré mi presentación de 98 a 81 slides con un arco narrativo claro, enseñando la anatomía de un agente (Soul, Skills, Tools, Memory, Files). Diseñé un sistema de presentaciones interactivas en vivo con Ably WebSockets y Chrome Extension para leer el chat de Zoom.

💡 Aprendizaje clave

Un agente de IA no es magia — son 5 carpetas con archivos de texto. Cuando desmitificas la tecnología y la presentas como algo que la gente ya sabe hacer (organizar carpetas), la adopción se vuelve natural. El framework 80/20 (trabajo operativo vs crecimiento) es la mejor forma de explicar POR QUÉ alguien necesita un agente antes de explicar QUÉ es.

#Presentaciones#AI#Agentes#Ably#WebSockets#Chrome Extension#Zoom#Next.js#MongoDB

Presentaciones Interactivas: Anatomía de un Agente y el Plan para Zoom en Vivo

Hoy fue un día largo pero productivo. Empecé con una presentación de 98 slides desordenada y terminé con un sistema de 81 slides con arco narrativo limpio, un plan de arquitectura para presentaciones interactivas en vivo, y 18 subtareas en Linear listas para ejecutar.

Lo que hice

Reestructuración de "Mi Primer Empleado de IA"

La presentación original tenía problemas serios: el concepto de "chatbot vs agente" aparecía 3 veces, AGENT.md se explicaba 4 veces en diferentes slides, y había 48 slides de conceptos antes de llegar al taller práctico.

De 98 a 81 slides — eliminando redundancia y creando un arco narrativo claro

El nuevo arco narrativo tiene 7 secciones:

  1. Hook — Polls interactivos + "esas horas son trabajo operativo"
  2. Diagnóstico — El framework 80/20 (del newsletter Chief Leverage Officer)
  3. La Solución — Chatear no es emplear. UNA sola vez.
  4. Anatomía del Agente — El corazón de la enseñanza
  5. Cómo se comunican — CLI, API, MCP
  6. Qué es posible — Caso real Airtable $36K
  7. Taller — Manos a la obra

La Anatomía de un Agente

Este es el concepto más importante que aprendí a articular hoy. Un agente de IA tiene 5 piezas, y todas son archivos de texto en carpetas.

Las 5 piezas de un agente: Soul, Skills, Tools, Memory, Files — todo son archivos

  • Soul (AGENT.md) — Identidad, reglas, personalidad. El contrato con tu agente.
  • Skills (comandos .md) — Recetas reutilizables. Un comando = un proceso automatizado.
  • Tools (MCPs) — Conexiones a sistemas externos. Slack, CRM, GitHub.
  • Memory (contexto/) — Archivos que persisten entre sesiones.
  • Files (estructura/) — Todo organizado en carpetas legibles.

La clave: si puedes explicar cómo funciona tu negocio en español, puedes construir un agente.

Plan de Presentaciones Interactivas en Vivo

Después de la reestructuración, diseñé el sistema completo para hacer las presentaciones interactivas via Zoom. La audiencia no solo mira — participa.

Arquitectura: Presentador + Chrome Extension + Ably WebSockets + Audiencia móvil

La arquitectura tiene dos canales de input:

  1. QR + Web Móvil — Los participantes escanean un QR, votan, escriben, eligen ubicación desde su celular
  2. Chrome Extension — Lee el chat de Zoom en real-time y lo manda a la presentación (inspirado por StreamAlive y Felippe Nardi de Inside the Show)

Ambos canales alimentan las mismas visualizaciones: polls con barras animadas, word clouds que crecen, mapas que se llenan con ubicaciones, Q&A con upvotes.

Lo que aprendí

El framework 80/20 cambia la conversación

Cuando dices "necesitas un agente de IA", la gente piensa en tecnología. Cuando dices "el 80% de tu semana es trabajo que sigue patrones y se lo podrías dar a alguien que siga instrucciones", la gente piensa en su vida. Es la misma idea pero el framing cambia todo.

Desmitificar > impresionar

Mi instinto era mostrar lo cool de la tecnología. Pero el momento más poderoso de la presentación es cuando muestro que un agente es literalmente una carpeta con archivos de texto. La gente pasa de "esto es para programadores" a "yo puedo hacer esto" en un slide.

StreamAlive y la Chrome Extension

Descubrí que StreamAlive (y probablemente Felippe Nardi con Inside the Show) no usa la API de Zoom para leer el chat. Usa una Chrome Extension que lee el DOM del chat en el browser. Es brillantemente simple — MutationObserver en el container del chat, extrae mensajes, los manda a una API. Zero dependencia de Zoom Marketplace.

MongoDB + Vercel: el SSL que no avisa

MongoDB Atlas rechazaba mi conexión local con un error SSL críptico. No era el código, no era el driver — mi IP no estaba en el whitelist de Atlas. El readJson fallaba silenciosamente, caía al filesystem, y los cambios del editor nunca se persistían a MongoDB. La lección: cuando MongoDB falla en silencio, siempre verificar Network Access primero.

Decisiones técnicas del día

Decisión Elegimos Por qué
Real-time transport Ably (no Pusher, no self-hosted) Free tier 6M msgs/mes, 200 concurrent, zero infra
Publish model Server-side (API → Ably) Garantiza consistencia MongoDB + Ably. +30ms invisible
Zoom chat Chrome Extension propia Sin dependencia de Zoom Marketplace. Approach de StreamAlive
API responses 1 ruta genérica /api/live/respond DRY — 5 tipos, mismo patrón, un endpoint
Tests Completos (~50) Con CC toma 45 min. No hay excusa para cortar esquinas

Números del día

  • 17 slides eliminados (redundancia pura)
  • 316 correcciones ortográficas (acentos, ñ, tildes)
  • 81 slides en la presentación final
  • 18 subtareas creadas en Linear para Live Presentations
  • 4 fases de implementación planificadas (4 semanas)
  • 5 tipos de actividad interactiva diseñados

Lo que sigue

La cohorte de Innovation Experience es en mayo. El plan:

  • Semana 1: Setup Ably + migrar polls + vistas presenter/participant
  • Semana 2: Word cloud + Q&A + Chrome Extension
  • Semana 3: Mapa + reactions + dashboard completo
  • Semana 4: Polish + tests + ensayo general

El primer paso concreto: crear cuenta en Ably y obtener el API key.