Visualize Your Agents as Office Workers with OpenClaw Agent Theatre
Tired of staring at logs to understand what your agents are doing? A new community project called Agent Theatre transforms your OpenClaw agents into animated humanoid characters working in a 2D office simulation.
What Is It?
OpenClaw Agent Theatre is a React + Phaser visualization tool that connects to your OpenClaw server and renders each agent as a worker sprite in a shared office room. When an agent is idle, their character wanders the hallway. When they start working, they return to their desk. Success triggers a celebration animation; errors cause a visible panic shake.
It's both practical (you can instantly see which agents are active, erroring, or idle) and delightfully fun to watch.
Architecture: Security First
The project includes a Node.js bridge service that sits between your OpenClaw server and the browser-based frontend. This bridge:
- Operates in read-only mode — it never modifies your OpenClaw state
- Redacts secrets automatically (API keys, tokens, passwords) before sending anything to the UI
- Supports both mock mode (for local development) and live mode (connected to your real OpenClaw instance)
The bridge exposes a WebSocket stream (/ws) that pushes normalized events to the frontend in real-time. Each event includes agent ID, name, state (idle/working/success/error), task summary, and severity level.
Visual State Machine
The frontend maps OpenClaw agent states to office behaviors:
| Bridge State | Visual Behavior |
|---|---|
idle | Character wanders outside in the hallway |
working | Returns to desk, working animation |
success | Brief celebration, then back to desk |
error | Panic/shake animation, then desk |
There's also a Fun Mode toggle that adds playful idle antics and effects, versus the calmer Ops Mode for dashboard-focused monitoring.
Deployment Options
You can run Agent Theatre:
- Locally during development with
make dev(mock data) - Via Docker Compose for production (frontend + bridge + Nginx with TLS)
- Alongside your existing OpenClaw server by serving the static frontend and proxying the bridge through Nginx
The recommended setup is placing the project at /opt/openclaw/agent-theatre and configuring the bridge to point at your OpenClaw API on localhost.
Why This Matters
Monitoring multi-agent systems is notoriously difficult. Traditional dashboards show metrics, but they don't give you spatial intuition about what's happening across your agent fleet. Agent Theatre turns that abstract information into something you can see at a glance.
It's also just fun. Watching your agents scramble to their desks when work comes in, celebrate successes, and panic during errors adds personality to your infrastructure.
Check out the repo and try the mock mode first to see if it fits your workflow: github.com/hosthobbit/openclaw_GUI
Comments (0)
No comments yet. Be the first to comment!