给你的AI龙虾打造一间像素办公室！Star Office UI部署+公网访问完整教程

image-20260331165035596

前言

你有没有过这种感觉：用 OpenClaw 部署好了 AI 龙虾，微信也接上了、飞书也通了，每天让它帮你干活干得飞起——但它到底在不在线？此刻在干嘛？昨天又做了些什么？ 你完全不知道！就像请了一个隐形员工，干了活却看不见人，心里总觉得不踏实。

更尴尬的是，想给朋友秀一下自己的 AI 助手有多能干，结果只能截几条聊天记录？也太寒酸了吧！有没有一种方式，能让你的 AI 龙虾像真正的打工人一样，有自己的”工位”，工作状态一目了然？

好消息是——还真有！Star Office UI 就是这样一个超酷的开源项目：它给你的 AI 龙虾打造了一间像素风格的虚拟办公室，6 种工作状态实时可视化，龙虾在写代码就跑去”编程区”，在搜索资料就溜达到”研究角”，空闲待命就坐在工位上摸鱼——所有工作状态，打开网页就能看到，生动、直观、治愈感拉满！ 而且还支持多 Agent 协作、昨日工作小记、AI 生图装修办公室，甚至还有桌面宠物版！

接下来，本文将带你从零开始，手把手部署 Star Office UI 并与 OpenClaw 深度集成，再通过 cpolar 内网穿透把这间像素办公室映射到公网——让你随时随地、用任何设备打开浏览器，就能看到你的 AI 龙虾此刻在忙什么。走，给龙虾安排一间办公室去！

1 Star Office UI项目是什么？

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

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

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

image-20260329222936727

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

如下图所示：
image-20260402202703439

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

image-20260402202820893

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

http://localhost:19000

如下图：
image-20260402203022949

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

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

3 测试体验

3.1 简单对话切换状态测试

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

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

image-20260402203110988

让我们对它说：

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

如下图：

image-20260402203308691

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

image-20260402203408466

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

3.2 自动切换状态

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

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

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

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

如下图所示：
image-20260402205138089

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

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

如下图所示：

image-20260402205400423

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

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

3.3 邀请其他的小龙虾来玩

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

我们可以直接对它说：

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

如下图：
image-20260402212159877

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

请你把我的工作状态（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主机，接入了飞书）：
image-20260402213441765

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

image-20260402213522867

可以看到，访客列表真的进来了一个，且在休息区真的看到了一个新的Agent了！成功的加入进来了！

4 下载安装cpolar

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

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

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

4.1 什么是cpolar?

image-20250910114418412

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

4.2 下载安装cpolar

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

image-20250815171202537

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

cpolar version

image-20250815171446129

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

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

官网链接：https://www.cpolar.com/

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

image-20250804085039567

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

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

http://127.0.0.1:9200

Bash

image-20250815171734046

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

image-20250815171846757

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证书的繁琐步骤）

image-20250914174356363

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

image-20260402215123498

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

image-20260402215218957

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

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

image-20260402215342173

可以看到，成功的访问到了StarOfficeUI的页面！而且局域网加入的Agent一样可以看到！这样，StarOfficeUI就成功通过cpolar穿透至公网了，即使出门在外，只要有网络，你也可以随时随地查看部署在家中的openclaw的状态啦！而且还能通过这个公网地址邀请其他的Agent进来一起玩！

5.2 固定域名方式

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

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

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

https://dashboard.cpolar.com/reserved

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

image-20260402221013224

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

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

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

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

image-20260402220744286

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

image-20260402221059317

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

image-20260402221205166

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

image-20260402221312143

可以看到，同样能进行访问！好了，现在即使你每天带着这台“赛博助理”走南闯北，也再也不用为频繁变更的公网地址发愁了！只要记住这个专属的二级子域名，你的全能私人助理就能做到全天候在线陪伴，随时听候你的指令。

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，直接用即可。

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

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

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

总结

这一套流程走下来，你会发现 OpenClaw（龙虾） 已经不再是那个只会躲在后台跑代码的工具，而是变成了一个真正有“实体感”的数字员工。

  • 它足够省心：凭借 Skill 机制，从部署到配置，它能全程“自力更生”，不让你多敲一行命令。
  • 它眼里有活：通过状态自动同步规则，它能自觉打卡、汇报进度，让你随时掌握它的工作动态。
  • 它无界办公：配合 Star Office UI 和 cpolar，无论你身在何处，都能随时推开这扇像素办公室的大门，看看你的龙虾们干活干到哪一步了。

以前我们玩 AI 是在对话框里“猜”它在想什么，现在我们可以坐在“看台”上，优雅地欣赏龙虾们在像素世界里各司其职。 这种掌控感与趣味性并存的交互体验，或许才是 AI 办公该有的样子。

别犹豫了，赶紧给你的龙虾建个办公室，让它也体验一把“自力更生”的快乐吧！

感谢您阅读本文，有任何问题欢迎留言交流。cpolar官网 – 安全的内网穿透工具 | 无需公网IP | 远程访问 | 搭建网站

Share:

鸽子

鸽子

我是鸽子，是这个网站的文章编辑之一！喜欢研究各种有趣的开源项目。希望大家喜欢我的文章！

发表回复

目录

On Key

推荐文章