将 AI 智能体的协作逻辑具象化为实时的数字孪生办公室。
OpenClaw Office 是 OpenClaw Multi-Agent 系统的可视化监控与管理前端。它通过等距投影（Isometric）风格的虚拟办公室场景，实时展示 Agent 的工作状态、协作链路、工具调用和资源消耗，同时提供完整的控制台管理界面和 Chat 对话工作区。
核心隐喻： Agent = 数字员工 | 办公室 = Agent 运行时 | 工位 = Session | 会议室 = 协作上下文
- 2D 平面图 — SVG 渲染的等距办公室场景，包含工位区、临时工位、会议区和丰富的家具（桌椅/沙发/植物/咖啡杯）
- Agent 头像 — 基于 agentId 确定性生成的 SVG 头像，支持实时状态动画（空闲/工作中/发言/工具调用/错误）
- 协作连线 — Agent 间消息传递的可视化连接
- 气泡面板 — 实时 Markdown 文本流和工具调用展示
- 侧边面板 — Agent 详情、Token 折线图、成本饼图、活跃热力图、子 Agent 关系图、事件时间轴
- 顶部导航可直达的独立 Chat 工作区（
/#/chat），底部停靠栏保留为快捷入口 - 会话管理 — 创建新会话、切换历史会话、按 Agent 路由，支持多 Agent 并行对话
- 实时流式转录 — 流式展示 AI 回复，支持中止/重发
- 聊天历史持久化 — 服务端按天分片缓存聊天记录（
~/.openclaw/office-cache/chat/），跨浏览器/设备/刷新稳定可见 - 工具调用可视化 — 在对话流中嵌入 Agent 工具调用状态（调用中/已完成），可折叠查看
- 斜杠命令 —
/help、/new、/reset、/model、/think、/export等快捷指令 - 附件支持 — 支持图片及任意文件附件
- 辅助功能 — 搜索、导出 Markdown、专注模式、消息置顶引用
完整的系统管理界面：
| 页面 | 功能 |
|---|---|
| Dashboard | 概览统计卡片、告警横幅、Channel/Skill 概览、快捷导航 |
| Agents | Agent 列表/创建/删除，详情多 Tab（Overview/Channels/Cron/Skills/Tools/Files） |
| Channels | 渠道卡片、配置对话框、统计、WhatsApp QR 绑定流程 |
| Skills | 技能市场、安装选项、技能详情 |
| Cron | 定时任务管理和统计 |
| Settings | Provider 管理（添加/编辑/模型编辑器）、外观/Gateway/开发者/高级/关于/更新 |
- 国际化 — 完整的中英文双语支持，运行时语言切换
- Mock 模式 — 无需连接 Gateway 即可开发
- 响应式 — 移动端优化，自动切换 2D 模式
| 层 | 技术 |
|---|---|
| 构建工具 | Vite 6 |
| UI 框架 | React 19 |
| 2D 渲染 | SVG + CSS Animations |
| 状态管理 | Zustand 5 + Immer |
| 样式 | Tailwind CSS 4 |
| 路由 | React Router 7 |
| 图表 | Recharts |
| 国际化 | i18next + react-i18next |
| 实时通信 | 原生 WebSocket（对接 OpenClaw Gateway） |
- Node.js 22+
- pnpm（包管理器）
- OpenClaw 已安装并配置
OpenClaw Office 是一个配套前端，连接到正在运行的 OpenClaw Gateway。它不会启动或管理 Gateway。
无需克隆仓库，最快速的运行方式：
# 直接运行（一次性使用）
npx @ww-ai-lab/openclaw-office
# 或全局安装
npm install -g @ww-ai-lab/openclaw-office
openclaw-office如果本地已安装 OpenClaw，Gateway 认证 token 会从 ~/.openclaw/openclaw.json 自动读取，无需手动配置。
也可以手动指定 token：
openclaw-office --token <你的-gateway-token>
# 或通过环境变量
OPENCLAW_GATEWAY_TOKEN=<token> openclaw-office| 参数 | 说明 | 默认值 |
|---|---|---|
-t, --token <token> |
Gateway 认证 token | 自动检测 |
-g, --gateway <url> |
Gateway WebSocket 地址 | ws://localhost:18789 |
-p, --port <port> |
服务端口 | 5180 |
--host <host> |
绑定地址 | 0.0.0.0 |
-h, --help |
显示帮助 | — |
说明： 此方式运行的是预构建的生产版本。如需热重载开发，请参见下方 开发 部分。
pnpm install创建 .env.local 文件（已在 .gitignore 中，不会被提交），填入 Gateway 连接信息：
cat > .env.local << 'EOF'
VITE_GATEWAY_URL=ws://localhost:18789
VITE_GATEWAY_TOKEN=<你的 gateway token>
EOF获取 Gateway token：
openclaw config get gateway.auth.token确保 OpenClaw Gateway 在配置的地址上运行（默认 localhost:18789）。可通过以下方式启动：
- OpenClaw macOS 应用
openclaw gateway runCLI 命令- 其他部署方式（参见 OpenClaw 文档）
pnpm dev在浏览器中打开 http://localhost:5180。
| 变量 | 必须 | 默认值 | 说明 |
|---|---|---|---|
VITE_GATEWAY_URL |
否 | ws://localhost:18789 |
Gateway WebSocket 地址 |
VITE_GATEWAY_WS_PATH |
否 | /gateway-ws |
浏览器侧反向代理 WS 路径 |
VITE_GATEWAY_TOKEN |
是（连接真实 Gateway 时） | — | Gateway 认证 token |
VITE_MOCK |
否 | false |
启用 Mock 模式（不需要 Gateway） |
MC_AUTH_PIN |
否 | 1337 |
API 服务器认证 PIN |
如需在没有运行中的 Gateway 的情况下开发，启用 Mock 模式：
VITE_MOCK=true pnpm dev这会使用模拟的 Agent 数据进行 UI 开发。
pnpm install # 安装依赖
pnpm dev # 启动开发服务器 (port 5180)
pnpm build # 构建生产版本
pnpm test # 运行测试
pnpm test:watch # 测试 watch 模式
pnpm typecheck # TypeScript 类型检查
pnpm lint # Oxlint 检查
pnpm format # Oxfmt 格式化
pnpm check # lint + format 检查OpenClaw Office 通过 WebSocket 连接 Gateway，数据流如下：
OpenClaw Gateway ──WebSocket──> ws-client.ts ──> event-parser.ts ──> Zustand Store ──> React 组件
│ │
└── RPC (agents.list, chat.send, ...) ──> rpc-client.ts ──────────────>─┘
Gateway 广播实时事件（agent、presence、health、heartbeat）并响应 RPC 请求。前端将 Agent 生命周期事件映射为可视化状态（idle/working/speaking/tool_calling/error），在办公室场景中渲染。
微信养虾技术交流群：欢迎扫码加群，与大家一起交流养虾实践、技术心得与实际真实的业务应用等。
pnpm build # 输出到 dist/使用任意静态文件服务器提供 dist/ 目录。内置的 openclaw-office CLI 包含 API 服务器并提供前端服务：
npx @ww-ai-lab/openclaw-office --port 5180通过 Cloudflare Tunnel 安全地将本地实例暴露到互联网（例如移动端测试或远程访问）：
# 安装 cloudflared
brew install cloudflared
# 创建快速隧道（无需 Cloudflare 账号）
cloudflared tunnel --url http://localhost:5180这会提供一个公共的 https://*.trycloudflare.com URL，代理到本地 Mission Control。如需持久隧道，请通过 cloudflared tunnel create 配置命名隧道。
欢迎任何贡献！无论是新的可视化效果、控制台功能还是性能优化。
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/cool-effect) - 提交更改（使用 Conventional Commits 格式）
- 开启 Pull Request