Visualizar agentes de IA: hacer que vivan en una isla artificial y un mundo de oficina

IRC-Mania Die Seite rund um Sicherheit und Programmierung

Internet, Sicherheit , Internet Relay Chat

Gesponsert

Qué cubre este artículo

• Cómo visualizar agentes de IA conocidos (Claude Code, Codex, Gemini, Hermes, CrewAI, LangGraph, AutoGen, OpenHands) en un mundo artificial.
• Todos los proyectos Open Source relevantes: AI Office, VirtOffice, Agent Virtual Office, BagIdea Office, AgentOS.
• Qué agente va con cada visualización: tabla de correspondencia.
• Cómo funciona la canalización técnica: estado del agente → WebSocket → avatar.
• Cómo llevar tus propios agentes a un mundo 3D o isla de píxeles.

Introducción

Los logs y las tablas de estado funcionan, pero no son visualmente atractivos. La alternativa es el aspecto de modo dios: agentes como personajes en un pequeño mundo. Una oficina isométrica, una isla de píxeles, una oficina de fondo de escritorio, cada avatar representa un agente real y muestra en vivo qué está haciendo: escribir, caminar, bloqueado, en reunión.

El género comenzó con “Smallville” de Stanford (Generative Agents, 2023) y ahora es un ecosistema completo en GitHub. Este artículo muestra qué software existe y, lo más importante: qué agente se puede visualizar con qué herramienta.

La correspondencia: Qué agente → qué mundo

Los proyectos en detalle

AI Office, el diorama (versión de demostración)

github.com/SecretRecipe/ai-office

• Qué es: Oficina 3D isométrica en miniatura, 9 agentes con nombres, roles, colores, pantallas animadas. Se mueven, se encuentran en la fuente de agua (“merge conflict”), van a reuniones a las 10:00 y 14:00.
• Stack: React 19 + Three.js, aplicación de una sola página, sin backend, licencia MIT.
• Importante: Deliberadamente sin conexión real de agentes, pura visualización (muestra la arquitectura interna del RONIN AI OS). Plantilla perfecta para representar tus propios equipos de agentes o como ejercicio introductorio para tus propios mundos.
• Para quién: Si quieres la estética de un mundo y tú mismo proporcionas los datos.

VirtOffice, la conexión real con Hermes

github.com/OneByJorah/VirtOffice

• Qué es: Oficina 3D con sala de servidores (LEDs parpadeantes), sala de reuniones, cocina, lounge. Cada avatar es un subagente real de Hermes AgentOS.
• Stack: Frontend Three.js + servidor Python stdlib (cero dependencias), Docker Compose.
• Fuentes de datos: API de agentes Hermes (sondeo en vivo), agents.json (estático), webhook push (POST /webhook/agents), modo demostración.
• El truco para tus propios agentes: No necesitas usar Hermes, simplemente envía JSONs de estado al webhook y tus propios agentes reciben avatares.
• Para quién: Usuarios de Hermes de inmediato; todos los demás a través de la interfaz webhook.

Agent Virtual Office: arte de píxeles para agentes de codificación

github.com/KbWen/agent-virtual-office

• Qué es: Figuras SVG dibujadas a mano en una mini oficina. Cada figura es una sesión real de Claude Code, Codex o Gemini CLI: escribe en el escritorio, está “bloqueada”, marcha al rincón de QA, “entregada”.
• Stack: SVG puro (sin Canvas/GPU), Vite, API de estado. Funciona como barra lateral del IDE, media ventana o pantalla completa.
• Encanto: Animaciones de rol: qa + Bash saca una lupa, ops + Bash algo distinto. La tarjeta de fin de día exporta el día como PNG.
• Para quién: Quien usa Claude Code y otros, y quiere ver todo en vivo.

BagIdea Office, la oficina como fondo de pantalla de escritorio

github.com/modtanoii/ai-officecenter

• Qué es: Oficina en píxeles 2.5D que corre detrás de tus iconos de escritorio: las sesiones de Claude Code se convierten en empleados, van al escritorio cuando comienza el trabajo real, piden permiso en el “Escritorio de Seguridad”, celebran reuniones. El ciclo día/noche sigue tu hora real.
• Particularidad: No es pura vitrina: los agentes pueden terminar proyectos reales con tu aprobación y sugerir/escribir sus propios plugins (cada uno lo apruebas tú).
• Inspiración: openclaw (idea de oficina de agentes) + Hermes (skills que aprenden), ver Hermes Agent.
• Requisito: Claude Code. Para versión completa, claves de Gemini + OpenAI (voces, comandos por voz, generación de imágenes).

AgentOS: oficina 3D con gestión de tareas real

github.com/bvsbharat/AgentOS

• Qué es: Oficina Three.js con 5 salas (Dev Room, Design Studio, Research Lab, Meeting Room, Break Room), personajes “Clawbot” personalizables, ciclo día/noche.
• La diferencia: Aquí el mundo no es solo escenografía, sino ciclo completo de tareas (Pending → In Progress → Review → Done), tablero Kanban con arrastrar y soltar, descubrimiento de herramientas MCP (los agentes encuentran y usan GitHub, Slack, Notion y 100+ herramientas por su cuenta).
• Para quién: Quien quiera combinar la estética de oficina con orquestación real.

La canalización técnica, cómo llega un agente al mundo

Todos los proyectos en vivo siguen el mismo patrón:

Tu agente (CrewAI / LangGraph / Claude Code / Hermes)
    └── Eventos de estado: idle / working / blocked / meeting / done
            └── Script puente (sondea API o lee archivos de sesión)
                    └── WebSocket / SSE / POST /webhook/agents
                            └── Frontend (Three.js / SVG / Canvas)
                                    └── Avatar: animación + posición

Ejemplo mínimo, tu propio agente en VirtOffice:

import requests, time, random

AVATAR = {"id": "crewai-researcher", "name": "Researcher", "status": "working"}

while True:
    # Lee el estado de tu agente CrewAI aquí (task callback, log, DB)
    AVATAR["status"] = lese_agent_status()
    requests.post("http://localhost:8000/webhook/agents", json=AVATAR)
    time.sleep(2)

Con esto tu agente aparece como figura en la oficina, sin que escribas una sola línea de Three.js.

Construir tu propio mundo, las opciones

Para backends CrewAI/LangGraph: el framework proporciona callbacks/eventos (task started, agent delegated, tool used), que mapeas a estados de avatar. El agente “va a la reunión” cuando delega; “escribe” cuando hace llamadas de herramientas.

Apariencia vs. sustancia, cuándo merece la pena el esfuerzo

Vale la pena:

• Monitoreo de equipo: Un display de pared en la oficina sustituye los dashboards, todos ven de un vistazo quién trabaja, quién está bloqueado y quién terminó.
• Demos y clientes: Nada vende mejor el trabajo de agentes que figuras en movimiento.
• Sistemas multi-agente con ~5 agentes o más: por debajo de eso basta con los logs.

Innecesario:

• Un único agente, un icono de estado es suficiente.
• Como única capa de control: sigue necesitando kill-switch, logs y métricas (monitoreo de agentes).

Enlaces relacionados

• IRC-Coding.de: Tutoriales de programación: backends WebSocket, agentes propios.
• Ejército de agentes IA: El análisis detrás del hype de los mundos virtuales.
• Hermes Agent: El agente para el cual se construyó VirtOffice.
• CrewAI: Framework con agentes basados en roles.
• AutoGen: Conversaciones multi-agente.
• LangGraph: Agentes basados en máquina de estados.
• Sistemas multi-agente: Fundamentos.
• Proyecto Coding-Agent: Agentes que realmente trabajan.

Puntos clave:

• Los agentes conocidos se pueden visualizar en mundos virtuales: Claude Code/Codex → Agent Virtual Office o BagIdea Office; Hermes → VirtOffice; CrewAI/LangGraph/AutoGen → VirtOffice-Webhook o construcción personalizada.
• AI Office = plantilla de diorama de oficina Three.js lista para usar sin backend; VirtOffice = lo mismo con conexión en vivo real.
• El pipeline es igual en todas partes: estado del agente → puente → WebSocket/SSE → avatar.
• Con el webhook de VirtOffice obtienes tus propios agentes en un mundo 3D en minutos, sin programación 3D.
• El mundo es visualización de monitoreo, no un sustituto de logs, kill-switch y métricas.

Preguntas frecuentes

Fuentes y referencias

• AI Office: Diorama de oficina isométrica, React + Three.js.
• VirtOffice: Oficina 3D para Hermes AgentOS con conexión en vivo.
• Agent Virtual Office: Oficina de pixel art para sesiones Claude Code/Codex.
• BagIdea Office: Oficina de agentes como fondo de pantalla del escritorio.
• AgentOS: Oficina 3D con kanban y herramientas MCP.
• Generative Agents: Stanford Smallville, el diseño original.
• IRC-Coding.de: Tutoriales de programación.

Premium VPS Hosting

Schnelle und sichere VPS Server

Gesponsert