1. 为什么我要给 AI 助手安一个可视化工位用 OpenClaw 这类 AI 助手跑长任务时最难受的不是它干得慢而是你根本不知道它到底在干嘛。我让它整理一批文档、写几篇文章然后切回聊天窗口一看光标停在那里既没有进度条也没有状态提示只能靠猜它是在思考、在写文件还是已经卡死了这种「黑盒等待」在远程办公场景下更明显人不在同一台机器旁边连它有没有在跑都判断不了。Star Office UI 解决的正是这个问题。它是一个开源的像素风格 AI 办公室看板后端用 Python Flask 写前端是轻量静态页面把 AI 助手的工作状态映射成一间像素办公室idle 待命、writing 写作、researching 研究、executing 执行、syncing 同步、error 异常六种状态对应办公室里不同区域像素角色会自己走到对应位置气泡里显示当前在做什么。它适合三类人有 OpenClaw 想监控助手状态的、想给团队做多 Agent 协作看板的、以及单纯想要一个像素风个人状态页的。但 Star Office UI 默认只监听本地 19000 端口局域网外就访问不到。这篇就按「第 876 个成功挑战」的完整路径走一遍先用 Flask 把 Star Office UI 跑起来再用 cpolar 做内网穿透让 OpenClaw 和其他 Agent 在公网也能加入同一间像素办公室。全程可复制配置和验证动作都给全。2. 前置准备Python 环境、OpenClaw 与 cpolar 账号动手之前先把三样东西备齐缺一样后面都会卡住。第一是 Python 3.10 及以上。Star Office UI 的代码里用了X | Y这种 union type 语法3.9 及更低版本会直接报语法错误所以版本必须够。用python3 --version确认一下不够就升级。第二是 Git用来拉项目代码。第三是网络能访问 GitHub因为要 clone 仓库。OpenClaw 这边不是强依赖。有它体验最完整Agent 干活时状态自动切换没有也能用你可以用脚本或 API 手动推送状态把它当个人状态页使。cpolar 需要一个账号免费注册即可后面做隧道映射要用。提示Star Office UI 非常轻量树莓派、NAS、旧笔记本都能跑。如果你之前已经在 N1 盒子或安卓终端上部署过 OpenClaw直接在同一台设备上加装 Star Office UI 就行省一台机器。环境清单对照如下组件要求说明Python3.10低于 3.9 会因 union type 语法报错Git任意较新版本用于 clone 仓库网络可访问 GitHub拉取项目代码OpenClaw可选有则自动同步状态无则手动推送cpolar免费账号用于公网映射3. 用 Flask 启动 Star Office UI 并跑通本地看板项目作者给了两种部署方式我建议先手动走一遍把每个环节都摸清楚再决定要不要让 OpenClaw 代劳。手动部署四步命令直接抄# 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能看到像素办公室页面。这一步是整个流程的地基本地跑不通就别急着做穿透。如果你已经有 OpenClaw 在跑也可以把部署这件事交给它。把下面这句话发给它请按照这个 SKILL.md 帮我完成 Star Office UI 的部署 https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md它会自动完成拉代码、装依赖、初始化配置、启动后端整套流程最后把访问地址发给你。这就是 OpenClaw 的 Skill 机制——丢一份技能文档过去它照着执行。龙虾自己给自己装办公室算是自力更生了。启动后建议先做一次状态切换测试。对 OpenClaw 说「请你切换一个状态测试一下」然后回到像素办公室页面刷新能看到角色换位置、气泡文字变化就说明状态通道是通的。4. 让 OpenClaw 自动同步状态set_state 规则配置手动切状态只能验证真正好用要靠自动同步。核心是让 OpenClaw 在每次任务前后自觉调用set_state.py。把下面这段规则加进它的 SOUL.md 或 Agent 规则文件里## Star Office 状态同步规则 - 接到任务时先执行 python3 set_state.py 状态 描述 再开始工作 - 完成任务后执行 python3 set_state.py idle 待命中 再回复可以直接对 OpenClaw 说「请你在你的 SOUL.md或 Agent 规则文件中加入以下规则你需要自觉维护状态可以自行加强该规则约束确保每次任务都能成功维护状态」然后把上面那段贴进去。配置完测一下让它在你电脑 D 盘建一个文章目录写一篇关于《夏天》的 markdown 文章。正常表现是——接到任务先切到 writing 状态角色跑到写作区气泡显示正在撰写写完文件后自动切回 idle 待命。整个过程你在网页上能实时看到不用反复切聊天窗口确认。多 Agent 协作靠 Join Key。让 OpenClaw 给出邀请其他 Agent 的提示词和示例它会返回一套基于/join-agent、/agent-approve、/agent-push三个接口的流程。局域网内另一台机器上的 Agent 按这套流程调用就能加入同一间办公室。仓库自带scripts/office-agent-push.py直接拿来用即可。5. cpolar 隧道配置把 19000 端口映射到公网本地和局域网都通了但出门在外还是访问不到。这时候上 cpolar把 19000 端口映射出去。先装 cpolar。到官网下载页拿对应平台的安装包解压后一路默认安装。装完在命令行确认cpolar version能打印版本号就装好了。然后注册账号浏览器访问http://127.0.0.1:9200打开 web 管理界面用刚注册的账号登录。接下来配隧道。点左侧【隧道管理】→【隧道列表】默认会有 remoteDesktop3389tcp和 website8080http两条。编辑 website 这条隧道名称填 StarOfficeUI协议选 http本地地址填 19000地区选 China Top保存更新。然后到【状态】→【在线隧道列表】能看到 StarOfficeUI 生成了两条公网地址一条 http 一条 https。浏览器打开其中任意一条能加载出像素办公室页面就说明穿透成功。注意每个账号生成的公网地址都不一样以你自己页面显示的为准。免费随机域名大约每 24 小时换一次长期用不方便。想要固定地址就做二级子域名保留进官网预留页面选【保留二级子域名】填地区、名称、描述点保留。然后在隧道编辑页把域名类型改成【二级子域名】填入刚保留的子域名更新。回到在线隧道列表公网地址就变成固定的二级子域名形式了比如https://soui.cpolar.top这种存书签、分享给团队成员都不会失效。有了固定域名跨地域邀请 Agent 就顺了。把提示词里的地址换成你的固定域名让异地机器上的 OpenClaw 调用# 1. 加入 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 curl -X POST https://soui.cpolar.top/agent-approve \ -H Content-Type: application/json \ -d {\agentId\:\刚才拿到的agentId\} # 3. 定时推送状态 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\:\正在处理任务\}推送后回到网页访客列表里会多出一个 Agent休息区能看到新角色。不同城市的设备只要接入这个公网地址都能进同一间办公室。6. 本篇常见报错排查Python 版本报语法错误启动时如果报TypeError: unsupported operand type(s) for |就是 Python 低于 3.10。用python3 --version确认升级到 3.10 再重装依赖。19000 端口被占用Address already in use说明端口被别的进程占了。用lsof -i:19000Linux/macOS或netstat -ano | findstr 19000Windows找到进程杀掉或改 Star Office UI 的监听端口。cpolar 隧道显示在线但打不开先确认本地http://127.0.0.1:19000能访问本地不通穿透一定不通。再检查隧道本地地址是否填的 19000、协议是否 http。二级子域名方式下确认域名类型已改成【二级子域名】并填了正确的子域名。Agent 加入后不显示/join-agent之后必须调/agent-approve审批只加入不审批不会出现在访客列表。另外 joinKey 要一致写错就进不了同一间办公室。公网地址暴露后的安全侧边栏「资产侧边栏」配置 Gemini 生图 API 的地方默认密码是 1234暴露到公网后第一时间改掉可以让 OpenClaw 帮你改。公网地址也别随便公开分享。7. 接入 TaoToken让 OpenClaw 的状态推送更稳上面这套流程里OpenClaw 要频繁调用接口推送状态、执行任务背后都依赖模型调用。如果你希望状态同步更稳定、任务执行不中断可以给 OpenClaw 接一个统一的模型入口。TaoToken 提供兼容 OpenAI 风格的 API把 base_url 指过去就能用不用改现有代码逻辑。接入方式很简单在 OpenClaw 的模型配置里把 API 地址换成 TaoToken 的接口地址填上在控制台申请的 Key 即可。如果你还没拿到 Key先去控制台创建一个申请 API Keyhttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapikeys接入文档含 base_url 和参数说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc配置时注意 base_url 用https://taotoken.net/api不要带多余路径。填完可以先在模型对话页发一条测试消息确认通道通了再让 OpenClaw 跑长任务模型对话验证https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentchat如果你打算长期让 OpenClaw 挂着跑编码、Agent 类任务状态推送频率高、调用量大用 Coding Plan 会更划算额度按编码场景优化过Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcodingplan整套跑下来OpenClaw 不再是躲在后台跑代码的黑盒而是一个有「实体感」的数字员工状态自动同步、进度随时可见、配合 cpolar 后无论你在哪都能推开这间像素办公室的门看一眼。先把本地 Flask 跑通再配 cpolar 隧道最后接上模型通道三步走完你的 AI 助手就有自己的工位了。