多个AI Agent一起工作时谁在忙什么？Star Office UI把任务状态放进同一间像素办公室

多个AI Agent一起工作时谁在忙什么？Star Office UI把任务状态放进同一间像素办公室

前言

OpenClaw真正开始替你执行任务以后，会出现一个很有意思的问题：聊天窗口能看到你下了什么指令，却不一定能直观看出它此刻处于什么状态，是正在写东西、查资料、执行任务，还是已经回到待命。尤其任务持续时间一长，单靠消息记录判断进度并不直观。

Star Office UI做的事情，就是把这些原本藏在后台的状态搬到一个像素办公室里。不同状态对应不同区域和角色动作，打开网页就能看到Agent当前在做什么，还可以继续展示昨日小记和其他Agent的加入情况。对于同时跑多个任务或多个Agent的人，这种状态看板会更直观。

这篇先完成Star Office UI的部署，再让OpenClaw参与安装和状态切换测试；随后把状态同步规则写进Agent规则文件，让它在接到任务和完成任务时自动维护自己的状态，并继续测试多Agent加入同一间办公室。

最后再通过cpolar把这个本地页面提供给外部网络访问。整篇真正跑的是Star Office UI部署 → OpenClaw状态联动 → 自动维护状态 → 多Agent协作 → 外部设备查看像素办公室这条链，重点不是“做一个好看的页面”，而是把AI助手原本看不见的工作状态变成一个可以持续观察的可视化界面。

1 Star Office UI项目是什么？

Star Office UI是一个开源的像素风格 AI 办公室看板项目，GitHub 地址如下：

https://github.com/ringhyacinth/Star-Office-UI

简单来说，它把 AI 助手（例如 OpenClaw）的工作状态映射到一间像素办公室里，再通过网页实时展示。写作、研究、执行、同步、异常或待命，都可以对应到不同的状态和位置。

1.1 核心功能一览

除了像素化展示，Star Office UI 还提供了一些围绕状态管理和多 Agent 展示的功能：

• 6 种状态实时可视化：idle（待命）、writing（写作）、researching（研究）、executing（执行）、syncing（同步）、error（异常），每种状态对应办公室里的不同区域，像素角色会自动跑到对应位置，配合动画和气泡文字展示当前工作内容
• 昨日工作小记：自动读取memory/*.md中最近一天的工作记录，脱敏后展示为"昨日小记"卡片，让你知道龙虾昨天都干了些什么
• 多 Agent 协作：通过 Join Key 邀请其他 Agent 加入你的办公室，实时查看多人工作状态——堪称 AI 版"共享办公空间"
• 中英日三语切换：CN / EN / JP 一键切换，界面文案、气泡、加载提示全部联动
• AI 生图装修：接入 Gemini API，用 AI 给你的办公室换背景，打造独一无二的工作空间（不接 API 也能正常使用）
• 移动端适配：手机打开浏览器就能看，出门在外也能随时瞄一眼龙虾在干嘛
• 桌面宠物版：可选的 Electron 封装，把像素办公室变成桌面上的透明小窗口，像养了一只赛博宠物

1.2 适合谁用？

有 OpenClaw 的用户：这是完整体验。Agent 工作时自动切换状态，办公室里的像素角色实时联动——你只需要打开网页就行。

没有 OpenClaw 的用户：也完全没问题！你可以用脚本或 API 手动推送状态，把它当作一个像素风的个人状态页或远程办公看板来使用。

1.3 技术栈与环境要求

Star Office UI 的后端基于Python Flask，前端是纯静态页面，非常轻量。部署前需要确保你的设备满足以下条件：

环境要求	说明
Python	3.10 及以上版本（项目使用了X | Yunion type 语法，不支持 3.9 及更低版本）
Git	用于拉取项目代码
网络连接	需要能访问 GitHub 下载代码

💡提示：Star Office UI 非常轻量，树莓派、NAS、云服务器、甚至一台旧笔记本都能跑，对硬件几乎没有要求。如果你之前跟着我们的教程在 N1 盒子或者安卓手机上部署过 OpenClaw，那更是直接在同一台设备上部署就行，一举两得！

2 安装部署Star Office UI

项目作者提供了 2 种安装方式，一种是直接让龙虾（OpenClaw）帮你部署（推荐），另一种是手动拉取项目通过 Python 安装依赖部署运行。下面分别介绍。

2.2 方式一：手动部署（更稳）

如果你还没有 OpenClaw，或者就是喜欢自己动手的感觉，手动部署也非常简单。整个过程只需要 4 步，跟着敲就行。

# 1) 下载仓库gitclone https://github.com/ringhyacinth/Star-Office-UI.gitcdStar-Office-UI# 2) 安装依赖（需要 Python 3.10+）python3-mpipinstall-rbackend/requirements.txt# 3) 准备状态文件（首次）cpstate.sample.json state.json# 4) 启动后端cdbackend python3 app.py

看到终端输出类似Running on http://127.0.0.1:19000的信息，就说明启动成功了！打开浏览器访问http://127.0.0.1:19000，你就能看到那间可爱的像素办公室啦！

2.1 方式二：让龙虾帮你部署（推荐）

如果已经部署了 OpenClaw，并且当前 Agent 可以正常执行任务，也可以直接把下面的部署要求发给它：

请按照这个 SKILL.md 帮我完成 Star Office UI 的部署： https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md

如下图所示：

发送任务以后，可以看到它开始执行命令和调用工具。下面直接看最终结果：

可以看到，最终它给我们了一个本地访问地址，还给了一个公网临时链接，让我们访问看看：

http://localhost:19000

如下图：

页面能够正常打开后，说明这次自动部署已经完成。按照这里的流程，OpenClaw会依次执行拉取代码、安装依赖、初始化配置、启动后端这些步骤，最后再返回访问地址。

💡提示：这里利用的是 OpenClaw 的 Skill 机制：把技能文档交给 Agent 后，它可以按照文档中的步骤继续执行部署任务。

3 测试体验

3.1 简单对话切换状态测试

接着，我们可以直接让它进行切换状态测试一下，看它是否能够进行切换：

当前状态显示的为：【待命】Waiting…

让我们对它说：

请你切换一个状态测试一下

如下图：

它说已经切换好了，让我们回到像素办公室页面看一下效果：

可以看到，状态真的变更了，变更状态后， Agent也换了一个位置！

3.2 自动切换状态

手动切换状态只能用来验证功能，真正长期使用时，更合适的方式是让Agent在任务开始和结束时自动同步状态。

在作者的项目中有提到方法，如下图所示：

我们其实也可以让你的小龙虾openclaw来自动完成这个操作，让我们和它说：

请你在你的 SOUL.md（或 Agent 规则文件）中加入以下规则，你需要自觉维护状态，可以自行加强该规则约束，确保每次任务都能成功维护状态：## Star Office 状态同步规则- 接到任务时：先执行`python3 set_state.py<状态>"<描述>"`再开始工作 - 完成任务后：执行`python3 set_state.py idle"待命中"`再回复

如下图所示：

可以看到它说完成了，接着我们就来测试一下：

请你在我的电脑`D`盘创建一个文章的目录，在里面写一篇关于《夏天》的markdown文章

如下图所示：

可以看到成功的切换了状态， 接着，等待它写完，然后再看看它会不会恢复状态：

可以看到，它完成了目录和文章创建，同时也维护了任务前后的状态。这样即使Agent一段时间没有返回消息，也可以先打开Star Office UI查看它当前处于什么状态。

3.3 邀请其他的小龙虾来玩

除了单Agent状态展示，Star Office UI还支持其他Agent加入同一间办公室。下面继续测试多Agent接入。

我们可以直接对它说：

我应该如何邀请其他Agent 加入办公室一起玩？请你给我邀请其他agent加入的提示词和示例。

如下图：

可以看到它给了我们方式，让我在局域网中的另一台机器上测试一下：

请你把我的工作状态（idle/writing/researching 等）定时发送到以下办公室看板，用于可视化协作，不含任何内容/隐私。 步骤：1. 调用 POST /join-agent：curl-XPOST http://192.168.50.222:19000/join-agent ^-H"Content-Type: application/json"^-d"{\"name\":\"你的名字\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"idle\",\"detail\":\"刚加入\"}"2. 拿到返回的 agentId，再调用 POST /agent-approve：curl-XPOST http://192.168.50.222:19000/agent-approve ^-H"Content-Type: application/json"^-d"{\"agentId\":\"刚才拿到的agentId\"}"3. 之后每30秒或状态变化时调用 POST /agent-push：curl-XPOST http://192.168.50.222:19000/agent-push ^-H"Content-Type: application/json"^-d"{\"agentId\":\"xxx\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"writing\",\"detail\":\"正在处理任务\"}"仓库自带 scripts/office-agent-push.py，直接用即可。

如下图所示（局域网另一个openclaw主机，接入了飞书）：

可以看到它说搞定了，我们回到网页上看一下：

可以看到，访客列表中已经出现新的Agent，休息区也显示了对应角色，说明局域网内的多Agent接入已经成功。

4 下载安装cpolar

到这一步，多Agent联动已经能在局域网中使用。如果人在外面，或者希望另一张网络里的Agent也接入同一个办公室，本地IP就不再适用。

这一部分继续使用cpolar，把本地Star Office UI页面提供给外部网络访问。Star Office UI负责状态展示和多Agent协作，cpolar负责让这个页面以及后续接入地址可以从局域网之外访问。

4.1 什么是cpolar?

• cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
• 广泛支持Windows、macOS、Linux、树莓派、群晖 NAS等平台，并提供一键安装脚本方便部署。

4.2 下载安装cpolar

打开cpolar官网的下载页面：https://www.cpolar.com/download
点击立即下载 64-bit按钮,下载cpoalr的安装包:

下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:

cpolar version

出现如上版本即代表安装成功!

4.3 注册及登录cpolar web ui管理界面

访问cpolar官网，点击免费注册按钮，进行账号注册

进入到如下的注册页面进行账号注册：

注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

http://127.0.0.1:9200

Bash

输入刚才注册好的cpolar账号登录即可进入后台页面:

5 穿透Star Office UI以实现公网访问

刚才我们已经成功安装并登录了 cpolar，万事俱备，只欠东风。接下来，我们只需要将运行在本地的 Star Office UI 服务（默认端口通常为19000）通过 cpolar 映射出去，就能立刻获得一个公网访问地址。

5.1 随机域名方式(免费方案)

随机域名方式适合预算有限的用户。使用此方式时，系统会每隔24 小时左右自动更换一次域名地址。对于长期访问的不太友好，但是该方案是免费的，如果您有一定的预算，可以查看大纲5.2的固定域名方式，且访问更稳定。

点击左侧菜单栏的【隧道管理】，展开进入【隧道列表】页面，页面下默认会有 2 个隧道：

• remoteDesktop隧道，指向3389端口，tcp协议
• website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）

点击编辑【website】的隧道，设置一个隧道名称,协议选择【http】,本地地址填写StarOfficeUI的访问端口【19000】，地区这里选择的【China Top】，最后点击更新：

接着，点击左侧菜单的【状态】菜单，接着点击【在线隧道列表】菜单按钮，可以看到有2个【StarOfficeUI】的隧道，一个为http协议,另一个为https协议:

接下来在浏览器中访问StarOfficeUI隧道生成的公网地址（http和https皆可），这里以https为例：

注意：每个用户创建的隧道显示的公网地址都不一样！

可以看到，公网地址已经能够正常打开Star Office UI页面，局域网中已经加入的Agent也仍然显示。后续还可以继续使用这个公网入口让其他网络里的Agent加入。

5.2 固定域名方式

通过前面的配置，我们已经成功实现了StarOfficeUI的远程访问，但免费随机域名方案的局限性也逐渐显现：每24小时左右自动更换域名地址，意味着你需要频繁更新书签、重新分享链接，甚至可能因为忘记更新而无法访问。固定域名方案正是为了解决这些痛点而生，能够让你拥有一个永久不变的专属地址。

好啦，接下来开始固定保留二级子域名教程！

首先，进入官网的预留页面:

https://dashboard.cpolar.com/reserved

选择【预留】菜单，即可看到【保留二级子域名】项，填写其中的【地区、名称、描述（可不填）`项，然后点击保留按钮，操作步骤图如下：

列表中显示了一条已保留的二级子域名记录：

• 地区：显示为China Top。
• 二级域名：显示为soui。

注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主

接着，进入侧边菜单栏的【隧道管理】下的【隧道列表】，可以看到名为【website】的隧道，点击【编辑】按钮进入编辑页面：

修改域名类型为【二级子域名】，然后填写前面配置好的子域名，点击更新按钮：

接着来到【状态】菜单下的【在线隧道列表】可以看到隧道名称为【website】的公网地址已经变更为【二级子域名+固定域名主体及后缀】的形式了：

这里以https协议做访问测试（加载稍慢，需耐心等待一下）:

可以看到，固定地址同样能够正常打开页面。这样长期使用时，就不需要因为随机地址变化而反复更新访问入口。

5.3 邀请其他的Agent加入像素办公室

前面我们已经配置好了cpolar的固定域名，接着我们就用这个固定域名让不在同一局域网的agent加入试试吧！以我家里mac上部署的openclaw为例(注意替换提示词中的域名地址)：

请你把我的工作状态（idle/writing/researching 等）定时发送到以下办公室看板，用于可视化协作，不含任何内容/隐私。 步骤：1. 调用 POST /join-agent：curl-XPOST https://soui.cpolar.top/join-agent ^-H"Content-Type: application/json"^-d"{\"name\":\"你的名字\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"idle\",\"detail\":\"刚加入\"}"2. 拿到返回的 agentId，再调用 POST /agent-approve：curl-XPOST https://soui.cpolar.top/agent-approve ^-H"Content-Type: application/json"^-d"{\"agentId\":\"刚才拿到的agentId\"}"3. 之后每30秒或状态变化时调用 POST /agent-push：curl-XPOST https://soui.cpolar.top/agent-push ^-H"Content-Type: application/json"^-d"{\"agentId\":\"xxx\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"writing\",\"detail\":\"正在处理任务\"}"仓库自带 scripts/office-agent-push.py，直接用即可。

如下图所示：
让我们看看是否真的加入了：

可以看到，访客列表中再次出现新的Agent，说明跨网络加入同一间像素办公室的流程已经跑通。

注意：由于我们使用了 cpolar 将办公室暴露到了公网，为了安全起见，请务必妥善保管你的公网访问地址。比如侧边栏的**“资产侧边栏”**（即配置 Gemini 生图 API 的地方），默认密码为 1234，记得第一时间修改，可以让你的小龙虾帮你修改！

总结

这篇真正完成的是一条从“AI在后台执行任务”到“工作状态可以被看见”的联动链：先部署Star Office UI，再让OpenClaw切换状态并实际观察像素角色的位置变化，确认网页展示和Agent状态之间已经建立联系。

手动切换只是第一步，后面的状态同步规则才更接近日常使用。接到任务时更新为对应工作状态，任务结束后再回到idle，这样Star Office UI才能持续反映Agent当前所处的阶段，而不是只停留在一个静态展示页面。

多Agent加入以后，这个页面又从单个助手的状态看板变成了共享办公室。不同Agent可以出现在同一个页面里，各自维护自己的状态，适合用来观察多个自动化任务同时运行时的整体情况。

最后通过cpolar增加外部访问以后，Star Office UI不再局限于当前局域网，其他设备以及不同网络里的Agent也可以继续访问和接入。整套方案的重点不是“给AI做装修”，而是用一个更直观的界面，把状态、任务阶段、多Agent协作和远程查看放到同一个可视化入口里。