WW-AI-Lab/openclaw-office

Registry

Summary

OpenClaw Office is the visual monitoring and management frontend for the OpenClaw Multi-Agent system. It connects to the OpenClaw Gateway via WebSocket to visualize Agent collaboration as a "digital office" and provides a full console management interface.

Key features

• Real-time WebSocket connection to OpenClaw Gateway
• Visualizes multi-agent collaboration as a digital office
• Full console management interface for agents
• Built with TypeScript for reliability and maintainability

Use cases

• Monitoring multi-agent workflows in real time
• Managing and debugging agent behaviors via console
• Demonstrating agent collaboration in a visual office metaphor

README excerpt

# OpenClaw Office > [English](./README.en.md) > 将 AI 智能体的协作逻辑具象化为实时的数字孪生办公室。 **OpenClaw Office** 是 [OpenClaw](https://github.com/openclaw/openclaw) Multi-Agent 系统的可视化监控与管理前端。它通过等距投影风格的虚拟办公室场景，实时展示 Agent 的工作状态、协作链路、工具调用和资源消耗，同时提供完整的控制台管理界面和 Chat 对话工作区。 **核心隐喻：** Agent = 数字员工 | 办公室 = Agent 运行时 | 工位 = Session | 会议室 = 协作上下文 --- ## 功能亮点 ### ✨ Skill Workbench — Skills 开发平台 Skill Workbench 是 OpenClaw Office 的核心差异化功能——把「创建 Skill / 修改 Skill / 生成流程图 / A2UI 输入表单」整合成一个完整的 **AI 协作开发环境**： - **三页面嵌套路由**：`/skill-workbench`（列表）→ `/skill-workbench/create`（创建向导）→ `/skill-workbench/:slug`（详情） - **聊天侧边栏驱动开发**：在侧边栏与 AI 对话即可创建、修改 Skill，文件变动实时同步磁盘 - **FLOWCHART.md 自动生成**：内置 `skill-workbench-mermaid-guard` 守卫技能，一键生成符合规范的彩色 Mermaid 流程图，支持单图与多图模式 - **纯 Markdown 多图预览**：流程图预览完全走 Markdown 渲染链路，一次渲染多个 Mermaid 代码块 - **A2UI 可视化输入表单**：声明式表单 Schema，Chat 中的 ` ```a2ui ` 代码块自动渲染为交互式表单，详情页提供「A2UI 调试」选项卡一键生成和预览 - **默认技能自动安装**：首次进入工作台时，嵌入式服务端自动把 npm 包内置的默认 Skill 拷贝到 `~/.openclaw/workspace/skills/`，无需手工安装 详细使用指南见 [SKILL-WORKBENCH.md](./SKILL-WORKBENCH.md)。   ### 虚拟办公室 - **2D 平面图** — SVG 渲染的等距办公室场景，包含工位区、临时工位、会议区和丰富的家具（桌椅/沙发/植物/咖啡杯） - **Agent 头像** — 基于 agentId 确定性生成的 SVG 头像，支持实时状态动画（空闲/工作中/发言/工具调用/错误） - **协作连线** — Agent 间消息传递的可视化连接 - **气泡面板** — 实时 Markdown 文本流和工具调用展示 - **侧边面板** — Agent 详情、Token 折线图、成本饼图、活跃热力图、子 Agent 关系图、事件时间轴  ### Chat 对话工作区 - 顶部导航可直达的独立 Chat 工作区（`/#/chat`），底部停靠栏保留为快捷入口 - 会话管理 — 创建新会话、切换历史会话、按 Agent 路由，支持多 Agent 并行对话 - 实时流式转录 — 流式展示 AI 回复，支持中止/重发 - 聊天历史持久化 — 服务端按天分片缓存聊天记录，跨浏览器/设备/刷新稳定可见 - 工具调用可视化 — 在对话流中嵌入 Agent 工具调用状态，可折叠查看 - 斜杠命令 — `/help`、`/new`、`/reset`、`/model`、`/think`、`/export` 等快捷指令 - 附件支持 — 支持图片及任意文件附件 - 辅助功能 — 搜索、导出 Markdown、专注模式、消息置顶引用 - 动态表单交互（A2UI）— AI 回复中的 ` ```a2ui ` 代码块自动渲染

Topics

No topics yet.