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
CODEBLOCK0
2. Configure Mode
Copy .env.example to .env.local:
CODEBLOCK1
Set 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 |
|---|
| INLINECODE5 | Must match your OpenClaw agent ID (e.g., main, dev, research) |
| INLINECODE9 |
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 room - INLINECODE40 — directed lines at specific agents (30% chance)
5. Run
CODEBLOCK2
6. 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/*.jsonl for recent activity - Activity feed — extracts user messages and tool calls from session files
- System stats — reads
/proc/loadavg, runs free -m and INLINECODE44 - 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
Agency HQ — AI代理办公室
你的AI代理团队的实时像素艺术可视化。代理根据其实际状态在房间（办公室、厨房、游戏室、服务器室）之间移动。包含实时活动信息流、代理聚焦卡片和个性驱动的聊天。
使用场景
- - 你想要一个可视化仪表板，显示你的代理正在做什么
- 你想向他人展示你的代理团队（演示模式）
- 你想要一个有趣、始终在线的OpenClaw设置展示
设置
1. 克隆并安装
bash
git clone https://github.com/enjinstudio/agency-hq.git
cd agency-hq
npm install
2. 配置模式
复制.env.example到.env.local：
bash
cp .env.example .env.local
设置ARENA_MODE=live以连接到你的OpenClaw实例，或保持为demo以使用模拟数据。
3. 自定义你的代理
编辑src/lib/agents.ts。每个代理需要：
| 字段 | 描述 |
|---|
| id | 必须匹配你的OpenClaw代理ID（例如main、dev、research） |
| name |
显示名称 |
| emoji | 头像表情符号 |
| role | 在聚焦卡片中显示的角色标签 |
| model | 在聚焦卡片中显示的模型名称 |
| color | 主题和像素艺术的十六进制颜色 |
| desk | 办公桌位置：command、dev、trading、research、design、security、content、strategy、engineering、pm、finance |
| accessory | 像素艺术配饰：glasses、hat、badge、headphones、scarf、cap、bowtie、visor、antenna、crown、monocle |
4. 自定义聊天内容（可选）
编辑src/lib/agent-chat.ts以编写个性驱动的调侃。每个代理有：
- - general — 对房间说的随机台词
- to{AgentName} — 针对特定代理的台词（30%概率）
5. 运行
bash
开发模式
npm run dev
生产模式
npm run build && npm start
6. 部署到Vercel（可选）
推送到GitHub并在Vercel中导入。演示模式在Vercel上自动激活。
实时模式工作原理
在实时模式下，应用从你的OpenClaw目录读取：
- - 代理状态 — 扫描~/.openclaw/agents/{id}/sessions/*.jsonl以获取最近活动
- 活动信息流 — 从会话文件中提取用户消息和工具调用
- 系统统计 — 读取/proc/loadavg，运行free -m和df
- 房间分配 — 活跃代理→办公室，空闲→厨房/游戏室，离线→休息室
无需数据库。无需外部API。仅从磁盘读取文件。
要求
- - Node.js 20+
- OpenClaw（仅限实时模式）
- npm
备注
- - 聊天系统生成有趣的风格文本——并非真实的代理通信
- 演示模式在任何地方都有效，包括Vercel，零配置
- 像素艺术渲染器使用Canvas2D——无需WebGL，在所有浏览器中均可运行
- 移动端响应式——在小屏幕上垂直堆叠
