Humanloop Game: Una Animación Interactiva que Explica MCP
Humanloop Game: Una Animación Interactiva que Explica MCP
🎮 Si puedes visualizarlo, puedes entenderlo.
El Problema con Explicar AI Agents
Cuando intentas explicar qué es un AI agent que trabaja con humanos, la gente se pierde en jerga técnica:
- “Es un agente autónomo que procesa…”
- “Usa MCP para conectar con herramientas…”
- “El flujo de trabajo incluye callbacks y webhooks…”
Aburrido. Confuso. No inspira.
Así que construí algo diferente: una animación que muestra el concepto real.
🎮 El Humanloop Game Demo
La animación tiene 5 escenas que explican todo el flujo:
Escena 1: El Problema
Un técnico está caminando por una propiedad. Algo se ve raro pero no sabe qué.
Escena 2: La Acción Humana
El técnico decide instalar una cámara de seguridad. Coloca el dispositivo, lo conecta.
Escena 3: La Señal
La cámara envía datos a la nube. Una conexión aparece entre el mundo real y el mundo AI.
Escena 4: El Procesamiento AI
La IA recibe la señal, analiza el video, detecta anomalías.
Escena 5: Humanloop Completo
El resultado: una acción específica para un humano específico.
🤔 ¿Qué es MCP?
MCP = Model Context Protocol
Es el “idioma” que usan las IAs para conectarse con herramientas del mundo real.
Sin MCP:
AI: "Veo que hay un intruso en la cámara"
(Hace 5 minutos... demasiado tarde)Con MCP:
AI: "Detecté movimiento en la cámara del patio.
¿Quieres que te envíe la foto?"
Humano: "Sí"
AI: [Envía snap por Telegram]
(Hace 30 segundos... a tiempo)El loop completo:
- 👤 Humano hace algo en el mundo real
- 📹 Sensor/Dispositivo captura datos
- 🤖 AI recibe los datos
- 🧠 AI analiza y decide
- ✅ AI responde o actúa
- 👤 Humano recibe información actionable
¿Por Qué Funciona Este Patrón?
Lo que Humanloop Hace Bien:
- Velocidad — La IA responde en segundos, no horas
- Contexto — Sabe quién eres, qué necesitas, qué prefieres
- Canales — Te avisa donde estés (Telegram, WhatsApp, Alexa)
- Human-in-the-loop — Tú decides qué acciones se ejecutan
Casos de Uso Reales:
| Industria | Sin Humanloop | Con Humanloop |
|---|---|---|
| Seguridad | Alarmas que nadie revisa | IA filtra, humano decide |
| Salud | Chequeos anuales | Alertas proactivas |
| Finanzas | Reportes semanales | Notificaciones instantáneas |
| Manufactura | Mantenimiento reactivo | Predicción de fallas |
La Animación
El demo está disponible en humanloop.cl y renderiza usando Remotion (el mismo framework que usa Vercel para sus videos).
¿Quieres verla? Espera a que termine el render y la tendrás en humanloop/out/videos/HumanloopGame.mp4.
¿Qué Viene Después?
El demo es solo el comienzo. La visión de Humanloop:
- Fase 1: Demo visual ✅ (esta animación)
- Fase 2: Plataforma real donde puedes crear tus propios flows
- Fase 3: Red de agentes pre-entrenados por industria
Contribuye
Este proyecto es open source. Si quieres contribuir:
git clone https://github.com/devjaime/humanloop.git
cd humanloop
npm install
npm run devEl código del demo está en demos/humanloop-game/.
Conclusión
El futuro del trabajo con IA no es “IA hace todo”.
Es “IA + Humano juntos, en el loop correcto, en el momento correcto”.
Humanloop es la infraestructura que hace eso posible.
¿Quieres implementar esto en tu negocio? Contáctame: hsjhernandez@gmail.com
~Jaime