跳到主要内容
项目档案应用项目

WW-AI-Lab/openclaw-office 是什么?用途、安装与使用指南

WW-AI-Lab/openclaw-office:OpenClaw Office 是 OpenClaw 多智能体系统的可视化前端,将 Agent 协作映射为等距数字办公室,实时监控状态、协作链路本页整理它解决什么问题、适用场景、安装方式和使用方法。

642TypeScriptStar 于 2026年3月11日2026年9月18日 更新

AI 总结

OpenClaw Office 是 OpenClaw 多智能体系统的可视化前端,将 Agent 协作映射为等距数字办公室,实时监控状态、协作链路与资源消耗,并提供完整的管理控制台与对话工作区。

中文项目介绍

OpenClaw Office 作为 OpenClaw Multi-Agent 系统的可视化监控与管理前端,核心价值在于将抽象的智能体协作逻辑转化为直观的等距视角数字孪生办公室。它通过 WebSocket 实时连接 Gateway,以工位、会议室等隐喻展示 Agent 的工作状态、消息传递、工具调用及 Token 消耗,显著降低监控和管理多智能体系统的复杂度。 项目适用于需要实时观察多智能体协作过程、进行系统配置与管理的场景,如 AI 运维监控、多 Agent 任务编排可视化、资源使用分析等。用户可通过虚拟办公室直观追踪 Agent 行为,在 Chat 工作区与 Agent 交互,或通过控制台完成 Agents、Channels、Skills 等全生命周期管理。 技术层面,项目基于 React 19、Vite 6 与 Tailwind CSS 4 构建,使用 Zustand 管理状态,React Router 处理路由,Recharts 绘制图表,并通过 i18next 实现中英文国际化。本地聊天记录按天分片缓存 90 天,支持离线访问;提供 Mock 模式便于开发;整体采用严格 TypeScript 配置与模块化设计。

详细信息与使用说明

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 后台运行。

思维导图

OpenClaw Office
虚拟办公室
2D 平面图
Agent 头像与状态
协作连线
气泡与侧边面板
Chat 对话工作区
会话管理
流式对话
工具调用可视化
斜杠命令与附件
系统控制台
Dashboard 概览
Agents 管理
Channels 配置
Skills 市场
Cron 定时任务
Settings 设置
核心库与工具
头像生成器
位置分配器
聊天缓存管理
国际化 i18n
技术栈
React 19 + Vite 6
Tailwind CSS 4
Zustand + Immer
WebSocket 通信

常见问题

如何快速启动 OpenClaw Office?

可直接运行 npx @ww-ai-lab/openclaw-office,或全局安装 npm install -g @ww-ai-lab/openclaw-office 后执行 openclaw-office。开发模式需克隆仓库后运行 pnpm install 和 pnpm dev。

如何配置 OpenClaw Gateway 连接?

Gateway 认证 token 会自动从 ~/.openclaw/openclaw.json 读取;也可通过命令行参数 --token 或环境变量 OPENCLAW_GATEWAY_TOKEN 手动指定。Gateway 地址默认为 ws://localhost:18789,可通过环境变量 VITE_GATEWAY_URL 修改。

运行本项目需要哪些系统依赖?

需要 Node.js 22 或更高版本,以及 pnpm 作为包管理器。同时,必须已安装并运行 OpenClaw Gateway 服务,因为本项目仅作为前端连接 Gateway,不会启动或管理 Gateway 本身。

项目支持哪些主要功能?

包括:虚拟办公室(2D 等距场景、Agent 状态动画、协作连线、侧边指标面板)、Chat 对话工作区(会话管理、流式对话、工具调用可视化、斜杠命令)、完整控制台(Dashboard、Agents、Channels、Skills、Cron、Settings 管理)、国际化(中英文切换)、Mock 模式及响应式设计。

如何将 OpenClaw Office 安装为系统服务后台运行?

使用命令 openclaw-office service install 即可注册为系统服务,支持 macOS(launchd)和 Linux(systemd --user)。可附加 --token 和 --port 参数指定配置。服务安装后立即启动,并会在开机/登录时自动拉起。