- name
- agency-hq
- description
- A pixel art office visualization for your AI agent team. Shows real-time agent status, activity feeds, and personality-driven banter. Works with OpenClaw in live mode or standalone in demo mode.
- version
- 1.0.0
- license
- MIT
- author
- Enjin Studio
- tags
- [visualization, pixel-art, dashboard, agents, monitoring]
Agency HQ — AI Agent Office
A real-time pixel art visualization of your AI agent team. Agents move between rooms (office, kitchen, game room, server room) based on their actual status. Includes a live activity feed, agent spotlight cards, and personality-driven chat.
When to Use
- You want a visual dashboard showing what your agents are doing
- You want to showcase your agent team to others (demo mode)
- You want a fun, always-on display of your OpenClaw setup
Setup
1. Clone and Install
git clone https://github.com/enjinstudio/agency-hq.git
cd agency-hq
npm install2. Configure Mode
Copy .env.example to .env.local:
cp .env.example .env.localSet ARENA_MODE=live to connect to your OpenClaw instance, or leave as demo for simulated data.
3. Customize Your Agents
Edit src/lib/agents.ts. Each agent needs:
| Field | Description |
|---|---|
id | Must match your OpenClaw agent ID (e.g., main, dev, research) |
name | Display name |
emoji | Avatar emoji |
role | Role label shown in spotlight |
model | Model name shown in spotlight |
color | Hex color for theme and pixel art |
desk | Desk position: command, dev, trading, research, design, security, content, strategy, engineering, pm, finance |
accessory | Pixel art accessory: glasses, hat, badge, headphones, scarf, cap, bowtie, visor, antenna, crown, monocle |
4. Customize Chat Lines (Optional)
Edit src/lib/agent-chat.ts to write personality-driven banter. Each agent has:
general— random lines said to the roomto{AgentName}— directed lines at specific agents (30% chance)
5. Run
# Development
npm run dev
# Production
npm run build && npm start6. Deploy to Vercel (Optional)
Push to GitHub and import in Vercel. Demo mode activates automatically on Vercel.
How Live Mode Works
In live mode, the app reads from your OpenClaw directory:
- Agent status — scans
~/.openclaw/agents/{id}/sessions/*.jsonlfor recent activity - Activity feed — extracts user messages and tool calls from session files
- System stats — reads
/proc/loadavg, runsfree -manddf - Room assignment — active agents → office, idle → kitchen/game room, offline → rest room
No database. No external APIs. Just reads files from disk.
Requirements
- Node.js 20+
- OpenClaw (for live mode only)
- npm
Notes
- The chat system generates fun flavor text — it's not real agent communication
- Demo mode works everywhere, including Vercel, with zero configuration
- The pixel art renderer uses Canvas2D — no WebGL required, works in all browsers
- Mobile responsive — stacks vertically on small screens