KI-Agenten visualisieren: Agenten in einer künstlichen Insel- & Office-Welt leben lassen

IRC-Mania Die Seite rund um Sicherheit und Programmierung

Internet, Sicherheit , Internet Relay Chat

Gesponsert

Was dieser Artikel behandelt

• Wie man bekannte KI-Agenten (Claude Code, Codex, Gemini, Hermes, CrewAI, LangGraph, AutoGen, OpenHands) in einer künstlichen Welt visualisiert.
• Alle relevanten Open-Source-Projekte: AI Office, VirtOffice, Agent Virtual Office, BagIdea Office, AgentOS.
• Welcher Agent zu welcher Visualisierung passt: Zuordnungstabelle.
• Wie die technische Pipeline funktioniert: Agent-Status → WebSocket → Avatar.
• Wie Du eigene Agenten in eine 3D-Welt oder Pixel-Insel bringst.

Einleitung

Logs und Status-Tabellen sind korrekt, aber unansehnlich, die Alternative ist der God-Mode-Look: Agenten als Figuren in einer kleinen Welt. Ein isometrisches Büro, eine Pixel-Insel, ein Desktop-Wallpaper-Büro, jeder Avatar steht für einen echten Agenten und zeigt live, was er tut: tippen, gehen, blockiert sein, Meeting.

Das Genre begann mit Stanfords „Smallville” (Generative Agents, 2023) und ist inzwischen ein eigenes Ökosystem auf GitHub. Dieser Artikel zeigt, welche Software es gibt und, wichtiger: welcher Agent sich womit visualisieren lässt.

Die Zuordnung: Welcher Agent → welche Welt

Die Projekte im Detail

AI Office, das Diorama (Show-Version)

github.com/SecretRecipe/ai-office

• Was: Isometrisches 3D-Miniatur-Büro, 9 Agenten mit Namen, Rollen, Farben, animierten Bildschirmen. Sie laufen herum, treffen sich am Wasserspender („merge conflict 😤”), gehen um 10:00 und 14:00 ins Meeting.
• Stack: React 19 + Three.js, Single-Page-App, kein Backend, MIT-Lizenz.
• Wichtig: Bewusst keine echte Agenten-Anbindung, reine Visualisierung (zeigt die interne Architektur des RONIN-AI-OS). Perfekte Vorlage, um eigene Agenten-Teams darzustellen oder als Fingerübung für eigene Welten.
• Für wen: Wenn Du eine Welt-Optik willst und die Daten selbst lieferst.

VirtOffice, die echte Anbindung an Hermes

github.com/OneByJorah/VirtOffice

• Was: 3D-Büro mit Serverraum (blinkende LEDs), Meetingraum, Küche, Lounge, jeder Avatar ist ein echter Hermes-AgentOS-Subagent.
• Stack: Three.js-Frontend + Python-stdlib-Server (null Dependencies), Docker Compose.
• Datenquellen: Hermes-Agent-API (Live-Polling), agents.json (statisch), Webhook-Push (POST /webhook/agents), Demo-Modus.
• Der Trick für eigene Agenten: Du musst Hermes nicht nutzen, schick einfach Status-JSONs an den Webhook und Deine eigenen Agenten bekommen Avatare.
• Für wen: Hermes-Nutzer sofort; alle anderen über die Webhook-Schnittstelle.

Agent Virtual Office: Pixel-Art für Coding-Agents

github.com/KbWen/agent-virtual-office

• Was: Handgezeichnete SVG-Pixel-Figuren in einem Mini-Büro, jede Figur ist eine echte Claude-Code-, Codex- oder Gemini-CLI-Session: tippt am Schreibtisch, ist „blocked”, stompt zur QA-Ecke, „shipped”.
• Stack: Pure SVG (kein Canvas/GPU), Vite, Status-API; läuft als IDE-Sidebar, halbes Fenster oder Vollbild.
• Charme: Rollen-Animationen: qa + Bash zieht eine Lupe, ops + Bash was anderes. End-of-day-Karte exportiert den Tag als PNG.
• Für wen: Wer Claude Code & Co. nutzt und live zuschauen will.

BagIdea Office, das Büro als Desktop-Wallpaper

github.com/modtanoii/ai-officecenter

• Was: 2.5D-Pixel-Büro, das hinter Deinen Desktop-Icons läuft: Claude-Code-Sessions werden Angestellte, gehen an den Schreibtisch wenn echte Arbeit startet, fragen am „Security Desk” um Erlaubnis, halten Meetings. Tag/Nacht-Zyklus folgt Deiner echten Uhrzeit.
• Besonderheit: Kein reines Schaufenster: Agenten können mit Deiner Freigabe echte Projekte fertigstellen und eigene Plugins vorschlagen/schreiben (jedes genehmigst Du).
• Inspiration: openclaw (Agenten-Büro-Idee) + Hermes (selbstlernende Skills), siehe Hermes Agent.
• Voraussetzung: Claude Code; für Vollversion Gemini- + OpenAI-Keys (Stimmen, Voice-Kommandos, Bild-Generierung).

AgentOS: 3D-Büro mit echtem Task-Management

github.com/bvsbharat/AgentOS

• Was: Three.js-Büro mit 5 Räumen (Dev Room, Design Studio, Research Lab, Meeting Room, Break Room), anpassbare „Clawbot”-Charaktere, Tag/Nacht-Zyklus.
• Der Unterschied: Hier ist die Welt nicht nur Kulisse, voller Task-Lifecycle (Pending → In Progress → Review → Done), Kanban-Board mit Drag-and-Drop, MCP-Tool-Discovery (Agenten finden und nutzen GitHub, Slack, Notion & 100+ Tools selbstständig).
• Für wen: Wer die Büro-Optik mit echter Orchestrierung kombinieren will.

Die technische Pipeline, so kommt ein Agent in die Welt

Alle Live-Projekte folgen demselben Muster:

Dein Agent (CrewAI / LangGraph / Claude Code / Hermes)
    └── Status-Events: idle / working / blocked / meeting / done
            └── Bridge-Script (pollt API oder liest Session-Files)
                    └── WebSocket / SSE / POST /webhook/agents
                            └── Frontend (Three.js / SVG / Canvas)
                                    └── Avatar: Animation + Position

Minimal-Beispiel, eigener Agent zu VirtOffice:

import requests, time, random

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

while True:
    # Status Deines CrewAI-Agenten hier auslesen (Task-Callback, Log, DB)
    AVATAR["status"] = lese_agent_status()
    requests.post("http://localhost:8000/webhook/agents", json=AVATAR)
    time.sleep(2)

Damit erscheint Dein Agent als Figur im Büro, ohne dass Du eine Zeile Three.js schreibst.

Eigene Welt bauen, die Optionen

Für CrewAI/LangGraph-Backends gilt: das Framework liefert Callbacks/Events (task started, agent delegated, tool used), die mapst Du auf Avatar-Status. Der Agent „geht ins Meeting”, wenn er delegiert; er „tippt”, wenn er Tool-Calls macht.

Show vs. Substanz, wann sich der Aufwand lohnt

Lohnt sich:

• Team-Monitoring: Ein Wand-Display mit dem Büro ersetzt das Durchklicken von Dashboards, alle sehen auf einen Blick, wer arbeitet/blockiert/fertig ist.
• Demos & Kunden: Nichts verkauft Agenten-Arbeit besser als sichtbare Figuren.
• Multi-Agent-Systeme ab ~5 Agenten: darunter reicht ein Log.

Überflüssig:

• Solo-Agent, ein Status-Icon tut’s auch.
• Als einzige Kontrollebene: Kill-Switch, Logs und Metriken braucht’s trotzdem (Agenten-Monitoring).

Weiterführende Links

• IRC-Coding.de: Programmier-Tutorials: WebSocket-Backends, eigene Agenten.
• Armee von KI-Agenten: Die Analyse zum Hype hinter den Welten.
• Hermes Agent: Der Agent, für den VirtOffice gebaut ist.
• CrewAI: Framework mit Rollen-Agenten.
• AutoGen: Multi-Agent-Konversationen.
• LangGraph: State-Machine-Agenten.
• Multi-Agent-Systeme: Grundlagen.
• Coding-Agent-Projekt: Agenten, die wirklich arbeiten.

Key Takeaways:

• Bekannte Agenten lassen sich in künstlichen Welten visualisieren: Claude Code/Codex → Agent Virtual Office oder BagIdea Office; Hermes → VirtOffice; CrewAI/LangGraph/AutoGen → VirtOffice-Webhook oder Eigenbau.
• AI Office = fertige Three.js-Büro-Diorama-Vorlage ohne Backend; VirtOffice = dasselbe mit echter Live-Anbindung.
• Die Pipeline ist überall gleich: Agent-Status → Bridge → WebSocket/SSE → Avatar.
• Mit dem VirtOffice-Webhook bekommst Du eigene Agenten in Minuten in eine 3D-Welt, ohne 3D-Programmierung.
• Die Welt ist Monitoring-Optik, kein Ersatz für Logs, Kill-Switch und Metriken.

FAQ

Quellen und weiterführende Literatur

• AI Office: Isometrisches Büro-Diorama, React + Three.js.
• VirtOffice: 3D-Büro für Hermes AgentOS mit Live-Anbindung.
• Agent Virtual Office: Pixel-Art-Büro für Claude-Code-/Codex-Sessions.
• BagIdea Office: Agenten-Büro als Desktop-Wallpaper.
• AgentOS: 3D-Büro mit Kanban und MCP-Tools.
• Generative Agents: Stanford Smallville, der Ur-Look.
• IRC-Coding.de: Programmier-Tutorials.

Premium VPS Hosting

Schnelle und sichere VPS Server

Gesponsert