1. 为什么你的 AI 龙虾需要一间像素办公室OpenClaw 这类 Agent 真正开始长期替你干活之后有个体验会变得很别扭你在聊天窗口里丢出去一个任务然后就只能干等。等几秒还好等一两分钟就开始犯嘀咕——它到底在查资料、写代码还是某个工具调用卡死了如果很久没回复你更分不清它是在啃一个复杂任务还是服务已经挂了。Star Office UI 解决的就是这层看不见。它是一个开源的像素风 AI 办公室看板把 Agent 的待命、写作、研究、执行、同步、异常这些状态变成一间像素小房间里角色的位置和气泡文字。你的龙虾在写代码还是摸鱼打开网页一眼就知道。它后端是 Python Flask前端纯静态树莓派、NAS、旧笔记本都能跑对硬件几乎没要求。这篇教程面向已经在跑 OpenClaw、或者准备把它当远程状态页用的朋友。我会从 Python 环境准备、项目拉取、依赖安装一路写到 cpolar 内网穿透把本地 19000 端口映射到公网让你出门在外也能随手打开浏览器看一眼。同时给出 TaoToken 统一 Key 与 API 通道的config.toml骨架和settings.json示例让模型调用和状态看板走同一套配置省得东一个 Key 西一个 Key。适合谁有 OpenClaw 的用户能拿到完整体验Agent 工作时自动切状态没有 OpenClaw 的用户也能用脚本或 API 手动推状态把它当像素风个人状态页。下面所有命令都可以直接复制跟着敲就行。2. 部署前的环境准备与 TaoToken 接入2.1 Python 与 Git 环境确认Star Office UI 用了X | Y这种 union type 语法所以 Python 必须 3.10 及以上3.9 会直接报语法错误。先确认版本python3 --version # 期望输出Python 3.10.x 或更高 git --version如果版本低于 3.10Ubuntu/Debian 系可以用 deadsnakes 源装新版macOS 用brew install python3.12Windows 直接去官网下安装包勾选 Add to PATH。Git 没有的话apt install git或brew install git即可。2.2 TaoToken 统一 Key 与 API 通道Star Office UI 本身不强制依赖大模型但它的AI 生图装修和 OpenClaw 的模型调用都需要一个稳定的 API 通道。与其在每个项目里散落不同的 Key不如用 TaoToken 做统一入口一个 Key 管模型对话、编码计划、控制台和 API Keys 管理。先去控制台创建 Key地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content创建完在 API Keys 页面复制出来。API 基地址用https://taotoken.net/api注意这个地址不带 UTM 参数直接填进配置即可。如果你后面要跑长期编码或 Agent 任务可以了解下 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。想先验证模型通不通用模型对话页面最快https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。2.3 config.toml 骨架OpenClaw 侧的模型通道建议集中写在config.toml里下面是一个可直接改的骨架把api_key换成你自己的# ~/.openclaw/config.toml [llm] provider openai-compatible base_url https://taotoken.net/api api_key sk-你的TaoTokenKey model claude-sonnet-4-5 timeout 120 [office] # Star Office UI 看板地址本地或 cpolar 公网地址都行 board_url http://127.0.0.1:19000 join_key ocj_example_team_01 push_interval 30base_url指向 TaoToken 的 API 通道model按你实际订阅的填。[office]段是给状态同步用的board_url先填本地等 cpolar 配好再换成公网地址。2.4 settings.json 示例有些工具链读的是 JSON 配置这里给一份对应的settings.json字段和上面 TOML 一一对应{ llm: { provider: openai-compatible, baseUrl: https://taotoken.net/api, apiKey: sk-你的TaoTokenKey, model: claude-sonnet-4-5, timeout: 120 }, office: { boardUrl: http://127.0.0.1:19000, joinKey: ocj_example_team_01, pushInterval: 30 } }注意apiKey不要提交到 Git 仓库建议用环境变量注入或者把配置文件加进.gitignore。TaoToken 的 Key 泄露了记得去控制台吊销重发。3. 拉取项目并启动 Star Office UI3.1 克隆仓库与安装依赖环境齐了就开始动手。整个过程四步跟着敲# 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那间像素办公室就出现了。3.2 让 OpenClaw 自动部署可选如果你已经跑着 OpenClaw可以直接把技能文档丢给龙虾让它自己装请按照这个 SKILL.md 帮我完成 Star Office UI 的部署 https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md它会自动完成拉代码、装依赖、初始化配置、启动后端整套流程最后把访问地址发给你。这就是 OpenClaw 的 Skill 机制——龙虾自己给自己装办公室属实自力更生。3.3 状态同步规则写入 Agent 规则文件手动切状态太累让 Agent 自觉维护。把下面这段规则加进它的SOUL.md或 Agent 规则文件## Star Office 状态同步规则 - 接到任务时先执行 python3 set_state.py 状态 描述 再开始工作 - 完成任务后执行 python3 set_state.py idle 待命中 再回复状态可选idle、writing、researching、executing、syncing、error。加完之后你让它在 D 盘创建一个文章目录写一篇关于《夏天》的 markdown就能看到它先切到 writing写完再回到 idle全程不用你手动干预。4. 用 cpolar 把 19000 端口映射到公网4.1 安装与登录 cpolar本地跑通只是第一步出门在外想看一眼就得靠内网穿透。cpolar 能把局域网服务通过加密隧道映射到公网支持 Windows、macOS、Linux、树莓派、群晖 NAS。去https://www.cpolar.com/download下对应安装包一路默认装完验证一下cpolar version能打印版本号就装好了。然后去官网注册账号浏览器打开http://127.0.0.1:9200进 Web UI 管理界面用刚注册的账号登录。4.2 配置隧道指向 19000登录后点左侧【隧道管理】→【隧道列表】默认有 remoteDesktop3389/tcp和 website8080/http两条。编辑 website 这条隧道名称填StarOfficeUI协议选http本地地址填19000地区选China Top保存更新。接着点【状态】→【在线隧道列表】能看到两条 StarOfficeUI 隧道一条 http 一条 https。复制 https 那条公网地址浏览器打开像素办公室就出现在公网上了。局域网里加入的 Agent 一样能看到。注意每个账号生成的公网地址都不一样别照抄别人的。免费随机域名大约每 24 小时换一次长期用建议上固定二级子域名。4.3 固定二级子域名可选免费域名天天变书签和分享链接都得跟着改。去https://dashboard.cpolar.com/reserved点【预留】填地区、名称、描述保留一个二级子域名比如soui。然后回【隧道管理】编辑 website域名类型改成【二级子域名】填上刚保留的名字更新。再回【在线隧道列表】地址就变成https://soui.cpolar.top这种固定形式了。4.4 邀请异地 Agent 加入固定域名配好后异地机器上的 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直接用即可。执行完刷新页面访客列表里就会多出一个 Agent休息区也能看到新角色。5. 验证请求与成功结果5.1 本地接口连通性验证启动后端后先用 curl 确认接口活着curl -s http://127.0.0.1:19000/state # 期望返回类似{state:idle,detail:待命中}再手动推一次状态看页面是否联动curl -X POST http://127.0.0.1:19000/set-state \ -H Content-Type: application/json \ -d {state:writing,detail:正在写夏天}刷新http://127.0.0.1:19000角色应该跑到写作区气泡显示正在写夏天。5.2 公网访问验证用 cpolar 给的 https 地址在手机浏览器打开切到 4G 网络别连家里 Wi-Fi否则测不出穿透效果。页面能加载、状态能刷新就说明公网通道通了。再让异地 Agent 推一次状态看访客列表是否更新。5.3 模型通道验证如果你配了 TaoToken 的 Key顺手验证下模型通道curl -s https://taotoken.net/api/v1/models \ -H Authorization: Bearer sk-你的TaoTokenKey | head -c 300能返回模型列表就说明 Key 和通道都正常。想更直观地测用模型对话页面发一句话即可https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。6. 本篇常见错误排查6.1 Python 版本报语法错误报错长这样TypeError: unsupported operand type(s) for |。这是 Python 低于 3.10 的典型症状。用python3 --version确认升级到 3.10 再重装依赖。别用系统自带的 3.8/3.9 硬扛。6.2 端口 19000 被占用启动时报Address already in use。查一下谁占了# Linux/macOS lsof -i :19000 # Windows netstat -ano | findstr 19000要么杀掉占用进程要么改backend/app.py里的端口同时记得 cpolar 隧道里的本地地址也要跟着改。6.3 cpolar 隧道连不上或 502先确认本地服务真的在跑curl http://127.0.0.1:19000/state有返回。如果本地正常但公网 502多半是隧道本地地址填错了端口或者 cpolar 客户端没登录。回 Web UI 看【在线隧道列表】状态是不是 online。6.4 Agent 推状态失败/agent-push返回 403 或 401通常是joinKey不对或者 agentId 没经过/agent-approve审批。按顺序走先 join-agent 拿 id再 approve最后才 push。joinKey 要和看板配置里的一致。6.5 公网暴露后的安全提醒用了 cpolar 就等于把办公室摆到公网了。侧边栏资产侧边栏配 Gemini 生图 API 的地方默认密码是1234第一时间改掉。Join Key、管理入口、API Key 这些敏感配置别乱发公网地址也别随便贴到公开群。安全这事不能只顾着好玩。7. 继续把像素办公室用起来Star Office UI 最有意思的地方不是那层像素皮肤而是 Agent 终于有了状态。以前你看到的是两个时间点——任务发出去、结果回来中间全是黑盒。现在它接到任务进 writing、researching、executing干完回 idle哪怕没盯聊天窗口看角色位置也知道它在忙什么。多个 Agent 加入同一间办公室后这张偏娱乐的像素页还真有点轻量 Agent 看板的味道。如果你想把模型调用也收拢到一套配置里TaoToken 的 API Keys 页面可以统一管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。长期跑编码或 Agent 任务的话Coding Plan 会更省心https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。Claude Code 相关的接入说明在https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。最后留个实用习惯把set_state.py的调用包一层 shell 函数状态变化时顺手带上时间戳写进日志这样办公室页面之外你还有一份可回溯的状态流水。公网地址记得定期换 Join Key别让闲置的工位被陌生人坐进来。