让AI龙虾也有工位：Star Office UI状态同步与多Agent协作实战

EterNity_TiMe_

12476人浏览 · 2026-07-21 15:24:08

EterNity_TiMe_ · 2026-07-21 15:24:08 发布

前言

把OpenClaw接入微信或飞书以后，日常使用确实方便了不少。发送一条消息，稍后就能收到结果，不需要一直守在电脑前，也不用每次打开本地控制页面。

但这种使用方式也容易让人产生一种不确定感。消息已经发出去了，OpenClaw究竟是在查资料、写代码、执行命令，还是因为报错停住了，往往只能等最终回复才能知道。任务一旦耗时较长，中间过程几乎完全不可见。

Star Office UI解决的正是这个问题。它把OpenClaw的运行状态变成一间像素办公室，让Agent根据待命、写作、研究、执行、同步和异常等状态，自动移动到不同区域，并显示当前正在处理的任务。

本文会演示两种部署方式：既可以手动拉取项目、安装Python依赖并启动19000端口，也可以直接把项目的Skill文档交给OpenClaw，让它自行完成代码下载、环境检查和服务启动。

部署完成后，还会给OpenClaw加入状态同步规则，让它在接到任务时主动更新状态，完成任务后自动恢复待命。最后再通过 cpolar(https://www.cpolar.com/) 将像素办公室映射到公网，并让不同网络中的多个Agent加入同一个可视化办公空间。

1 Star Office UI项目是什么？

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

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

简单来说，它能把你的 AI 助手（比如 OpenClaw 龙虾）原本看不见摸不着的工作状态，变成一间可爱的像素小办公室，实时展示在网页上。你的龙虾在写代码、搜资料、同步数据还是出了 Bug，全都一目了然！

1.1 核心功能一览

Star Office UI 的功能远不止"好看"这么简单，来看看它都能干什么：

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

Star Office UI 预览

1.2 适合谁用？

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

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

1.3 技术栈与环境要求

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

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

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

2 安装部署Star Office UI

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

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

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

# 1) 下载仓库
git clone https://github.com/ringhyacinth/Star-Office-UI.git
cd Star-Office-UI

# 2) 安装依赖（需要 Python 3.10+）
python3 -m pip install -r backend/requirements.txt

# 3) 准备状态文件（首次）
cp state.sample.json state.json

# 4) 启动后端
cd backend
python3 app.py

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

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

如果你已经部署了 OpenClaw 并且龙虾正在运行，那这一步简直不能更简单——你只需要把下面这句话发给你的龙虾：

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

如下图所示：

可以看到，它二话不说，直接就开始执行命令和调用工具开始了任务，让我们直接看最终给我们的结果：

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

http://localhost:19000

如下图：

你没看错，成功的访问到了web页面，就一句话！龙虾会自动帮你完成拉取代码、安装依赖、初始化配置、启动后端这一整套流程，全程不需要你敲一行命令。部署完成后，龙虾还会贴心地把访问地址发给你。

💡 提示：这就是 OpenClaw 的 Skill 机制——你把一个技能文档丢给龙虾，它就能照着文档自动执行所有步骤。所以为什么说 Star Office UI 和 OpenClaw 是天作之合呢？龙虾自己给自己装办公室，属实是自力更生了！

3 测试体验

3.1 简单对话切换状态测试

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

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

让我们对它说：

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

如下图：

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

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

3.2 自动切换状态

如果每次变更状态都需要你亲自下指令，那未免也太累了。所以，我们需要让它完成自动化的状态同步！

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

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

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

如下图所示：

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

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

如下图所示：

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

能够看到，它成功地创建了目录，写了一篇文章，还更新了任务前后的状态！如果你接入了消息平台，很长时间没看到它的动静，只需随手打开这个网页看一眼，就再也不用担心它到底是死机了，还是在闷头干大活儿啦！

3.3 邀请其他的小龙虾来玩

俗话说“一只龙虾是孤僻，一群龙虾是聚会”。既然咱们的办公室是全自动的，那工位空着也是浪费，不如多拉几只龙虾进来，看看它们在像素世界里如何各司其职，把“班味儿”彻底拉满！

我们可以直接对它说：

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

如下图：

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

请你把我的工作状态（idle/writing/researching 等）定时发送到以下办公室看板，用于可视化协作，不含任何内容/隐私。

步骤：

1. 调用 POST /join-agent：
curl -X POST 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 -X POST http://192.168.50.222:19000/agent-approve ^
  -H "Content-Type: application/json" ^
  -d "{\"agentId\":\"刚才拿到的agentId\"}"

3. 之后每 30 秒或状态变化时调用 POST /agent-push：
curl -X POST 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了！成功的加入进来了！

4 下载安装cpolar

到这一步，虽然我们已经在局域网内实现了多 Agent 的联动，但有一个很现实的问题：如果我出门在外，或者想把这个酷炫的像素办公室分享给外网的好友看，这套内网 IP 就不灵了。

总不能为了看一眼龙虾有没有在干活，还得特意跑回家连 Wi-Fi 吧？

为了让这个“办公室”真正实现全天候、跨地域的访问，我们需要一把开启公网大门的“钥匙”。这就该轮到 cpolar 出场了——它能帮我们把本地的 19000 端口映射到公网，生成一个随时随地都能访问的专属链接。同时还可以邀请让其他的Agent来加入你的像素办公室！

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为例：

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

可以看到，成功的访问到了StarOfficeUI的页面！而且局域网加入的Agent一样可以看到！这样，StarOfficeUI就成功通过cpolar穿透至公网了，即使出门在外，只要有网络，你也可以随时随地查看部署在家中的openclaw的状态啦！而且还能通过这个公网地址邀请其他的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 -X POST 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 -X POST https://soui.cpolar.top/agent-approve ^
  -H "Content-Type: application/json" ^
  -d "{\"agentId\":\"刚才拿到的agentId\"}"

3. 之后每 30 秒或状态变化时调用 POST /agent-push：
curl -X POST 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，直接用即可。

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

可以看到，访客列表又多了一个，成功的加入了进来！是不是很不错？快玩起来吧！

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

总结

完成配置以后，Star Office UI带来的并不只是一个好看的像素页面。它为后台运行的OpenClaw增加了一层直观反馈，让用户不必只通过聊天窗口猜测任务有没有开始、当前进行到哪一步。

状态同步规则是整套方案里比较关键的一环。接到任务时切换到写作、研究或执行状态，任务完成后回到待命，才能让办公室画面真正反映Agent的运行情况，而不只是一个需要手动更新的展示页面。

多Agent功能则让它从个人状态页变成了协作看板。不同设备、不同网络中的OpenClaw，可以通过Join Key和状态推送接口进入同一间办公室，用一个页面观察多个Agent分别在处理什么任务。

借助 cpolar 映射19000端口后，这间办公室可以从外部网络访问。随机地址适合临时测试和分享，固定二级子域名更适合长期收藏，也方便其他Agent持续向同一个地址推送状态。

需要注意的是，公网开放后，加入Agent、状态推送和资产配置等接口也会随之暴露。默认密码必须尽快修改，Join Key不要公开传播，状态描述中也不应包含文件内容、账号信息或其他敏感数据。

OpenClaw负责执行任务，Star Office UI负责把工作状态呈现出来，cpolar负责打通外部访问。这样一来，原本隐藏在对话框背后的AI助手，才真正拥有了可以被看见、被观察，也能多人协作的一间数字办公室。
网络中的OpenClaw，可以通过Join Key和状态推送接口进入同一间办公室，用一个页面观察多个Agent分别在处理什么任务。

OpenClaw负责执行任务，Star Office UI负责把工作状态呈现出来，cpolar负责打通外部访问。这样一来，原本隐藏在对话框背后的AI助手，才真正拥有了可以被看见、被观察，也能多人协作的一间数字办公室。