1. 项目定位与用途
OpenClaw Office 是 OpenClaw 多智能体系统的专用可视化前端,定位为“数字办公室”监控与管理界面。它通过等距投影的虚拟场景将 Agent 具象化为数字员工,工位对应 Session,会议室对应协作上下文,实时展示 Agent 状态、协作连线、工具调用与资源消耗。同时提供独立的 Chat 对话工作区和完整的系统控制台(包括 Dashboard、Agents、Channels、Skills、Cron、Settings 等管理页面),实现从监控到管理的闭环。
2. 解决的问题
项目解决了多智能体系统运行时状态不透明、协作链路难以追踪、管理操作分散等问题。传统日志或列表视图无法直观体现 Agent 间的动态交互,而 OpenClaw Office 将协作过程可视化为办公室场景,使运维人员能快速定位瓶颈、理解任务流向、监控资源使用。同时,集成化的控制台将分散的配置(如 Agent 创建、渠道管理、技能安装)集中管理,降低了多智能体系统的操作与维护成本。
3. 适用场景
主要适用于需要实时监控与管理多智能体系统的场景,例如:AI 客服系统的 Agent 协作监控、自动化工作流中的任务编排可视化、研发团队对多 Agent 资源的调度与成本分析、以及需要与单个或多个 Agent 进行对话交互的测试环境。项目也适合作为 OpenClaw 生态的演示前端,展示多智能体协作的直观效果。
4. 安装方式
项目要求 Node.js 22+ 和 pnpm 包管理器。最快捷的方式是直接运行 npx @ww-ai-lab/openclaw-office 或全局安装 npm install -g @ww-ai-lab/openclaw-office 后执行 openclaw-office。从源码开发需克隆仓库后运行 pnpm install 和 pnpm dev。Gateway 认证 token 会自动从 ~/.openclaw/openclaw.json 读取,也可通过命令行参数 --token 或环境变量 OPENCLAW_GATEWAY_TOKEN 手动指定。Gateway 地址默认 ws://localhost:18789,可通过环境变量 VITE_GATEWAY_URL 修改。
5. 使用方式
启动后访问默认端口 http://localhost:5180。虚拟办公室页面展示等距 2D 平面图,Agent 头像显示实时状态动画(空闲/工作中/发言/工具调用/错误),协作连线可视化消息传递,侧边面板提供 Agent 详情、Token 曲线、成本饼图等指标。底部停靠栏可进入 Chat 对话工作区,支持会话管理、流式对话、工具调用可视化、斜杠命令和附件。左侧导航栏进入控制台,进行 Agents、Channels、Skills、Cron 等管理,顶部可切换中英文。
6. 补充说明与实现特点
项目支持响应式设计,移动端自动切换 2D 模式;内置 Mock 模式无需连接 Gateway 即可开发。聊天记录按天分片存储在 ~/.openclaw/office-cache/chat/,保留 90 天,实现跨浏览器/设备持久化。技术实现上,2D 渲染使用 SVG 与 CSS 动画,头像与座位位置通过确定性算法生成与分配;状态管理采用 Zustand + Immer;国际化使用 i18next。项目还提供系统服务安装命令 openclaw-office service install,支持 macOS 与 Linux 后台运行。