1. 为什么要把 AI 助手塞进像素办公室我最初看到 Star-Office-UI 这个项目时第一反应是这不就是个花哨的看板吗。但真正跑起来之后才发现它解决的是一个很实际的问题当你在本地同时跑着 Claude Code、Cline、Codex 好几个助手每个都在不同的终端窗口里刷日志你根本不知道谁在干活、谁卡住了、谁在等你确认。Star-Office-UI 做的事情很直接——把每个 AI 助手映射成像素办公室里的一把椅子。助手在写代码就坐到工作台在查资料就跑到研究区报错了就蹲在报错区冒烟。你打开浏览器瞄一眼整个办公室的状态一目了然。它基于 Flask 后端加 Phaser 前端代码是 MIT 协议美术资产限非商业学习使用GitHub 仓库在 ringhyacinth/Star-Office-UI。这个项目适合谁我梳理了三类一是本地同时挂多个编码助手的独立开发者二是需要向团队展示 AI 工作进度的技术负责人三是想把助手状态接进自己监控系统的折腾党。它默认监听 127.0.0.1:18791状态通过 RESTful API 推送六种标准状态idle、writing、researching、executing、syncing、error对应办公室里的不同区域。但这里有个容易被忽略的环节助手的状态数据从哪来如果你用的是云端模型 API每次状态推送背后其实都是一次模型调用或事件回传。如果每个助手各自配一套 Key管理起来会很乱。我的做法是统一走 TaoToken 的 API 通道一个 Key 覆盖多个助手的调用状态回传和模型请求都从同一个出口走看板上的数据才不会因为鉴权失败而断流。下面我把整套配置和验证步骤拆开讲。2. TaoToken 前置准备统一 Key 与 API 通道在动手改 Star-Office-UI 之前先把模型调用通道理顺。这一步不做后面看板刷新时你会遇到状态推上去了、但助手实际调用失败的情况排查起来很痛苦。TaoToken 的定位是统一的大模型 API 接入层官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 入口是 https://taotoken.net/api。你需要先在控制台创建一个 API Key这个 Key 后面会同时用在两个地方一是助手本身的模型调用二是 Star-Office-UI 状态推送脚本里的鉴权头。创建 Key 的路径是进控制台后找 API Keys 页面。这里有个细节要注意TaoToken 的 Key 是 Bearer 形式放在请求头的 Authorization 字段里格式是Authorization: Bearer sk-xxxx。很多人在配置 Star-Office-UI 的推送脚本时习惯性地把 Key 塞进 URL 参数结果 401就是因为没走标准头。模型 ID 这块TaoToken 兼容主流命名你在控制台的模型列表里能看到当前可用的 ID。我实测下来编码类任务用 claude 系列的 ID 比较稳状态摘要生成这种轻量任务用便宜的小模型就够。关键是同一个 Key 可以调不同模型所以你不需要为每个助手单独申请 Key这也是我推荐统一通道的核心原因。配置的时候建议把 Key 写进环境变量而不是硬编码在脚本里。Star-Office-UI 的推送脚本office-agent-push.py会读取环境变量这样你换 Key 的时候不用改代码。具体做法是在 shell 里 export或者写进.env文件用 python-dotenv 加载。我试过直接在脚本里写死结果提交到 Git 的时候差点把 Key 泄露出去这个坑你别踩。还有一点TaoToken 的 API 地址不带末尾斜杠写配置的时候是https://taotoken.net/api如果你在代码里拼接路径注意别拼成//v1/...。这个细节在后面的 settings 片段里我会标出来。3. 可复制配置状态字段映射与看板接入片段这一节是整篇的核心我直接把能复制粘贴的配置给你。Star-Office-UI 的状态推送依赖两个东西一是state.json里的 Agent 定义二是推送脚本里的字段映射。先看状态映射表这是把助手行为和办公室区域对应起来的关键。助手行为状态字段办公室区域动效表现等待指令idle休息区角色原地待命气泡显示待命中生成文档/注释writing文档工作台角色敲键盘气泡显示文档标题检索代码/查资料researching研究区角色翻书气泡显示检索关键词执行命令/跑测试executing任务执行区角色操作终端气泡显示命令摘要同步进度/提交syncing会议区角色举手气泡显示同步内容报错/异常error报错区角色头顶冒烟气泡显示错误码这张表你要记牢因为后面写推送脚本时status字段的值必须严格用这六个之一写错了前端不会报错但角色会站在原地不动你会以为是看板坏了。接下来是state.json的配置片段。这个文件从state.sample.json复制而来你需要改的是 agents 数组和 api 配置部分{ office_name: 我的 AI 协作办公室, main_agent: { id: main-claude, name: 主助手, status: idle, description: 负责代码审查与文档生成 }, agents: [ { id: agent-cline, name: Cline 编码助手, join_key: jk_cline_001, status: executing, description: 执行测试与构建任务 }, { id: agent-codex, name: Codex 补全助手, join_key: jk_codex_002, status: writing, description: 生成函数注释与文档 } ], api: { base_url: https://taotoken.net/api, model_id: claude-3-5-sonnet, auth_header: Authorization, auth_prefix: Bearer }, memory_dir: ./memory, refresh_interval: 5000 }注意base_url这里我写的是https://taotoken.net/api没有末尾斜杠。model_id你按控制台里实际可用的填我填的是示例值。refresh_interval是前端轮询间隔单位毫秒5000 就是 5 秒刷一次调太小会增加后端压力。然后是推送脚本的配置。Star-Office-UI 自带的office-agent-push.py需要你改几个地方我把它整理成环境变量形式这样更干净# .env 文件内容 TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api OFFICE_BASE_URLhttp://127.0.0.1:18791 AGENT_IDagent-cline AGENT_JOIN_KEYjk_cline_001推送脚本读取这些变量后会向http://127.0.0.1:18791/api/agent/push发 POST 请求请求体里带status和description。如果你用的是 Claude Code 这类工具它的 settings 文件里也要配 Base URL 和 Key我以 Claude Code 的settings.json为例{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的实际Key, ANTHROPIC_MODEL: claude-3-5-sonnet } }这三件套——Base URL、Key、Model ID——在 Claude Code、Cline、Codex 的配置里都要写全。Cline 是在 MCP 配置或扩展设置里填Codex 是在auth.json里填。我见过有人只填了 Key 没填 Base URL结果请求打到了默认地址一直超时还以为是 Key 失效。4. 本地启动与逐项验证看板刷新与协作事件联动配置写完现在启动服务并逐项验证。我按实际操作顺序来你跟着做就行。第一步克隆仓库并装依赖git clone https://github.com/ringhyacinth/Star-Office-UI.git cd Star-Office-UI python3 -m pip install -r backend/requirements.txt第二步初始化状态文件cp state.sample.json state.json然后把上一节的state.json内容覆盖进去记得把join_key改成你自己生成的。第三步启动后端cd backend python3 app.py看到输出里出现Running on http://127.0.0.1:18791就说明起来了。这时候打开浏览器访问这个地址你应该能看到像素办公室场景主助手角色在休息区待命。第四步验证状态切换。在项目根目录跑python3 set_state.py --status writing --description 正在整理接口文档刷新浏览器主助手角色应该从休息区走到文档工作台头顶气泡显示正在整理接口文档。如果角色没动先检查state.json里main_agent.status是否被正确更新再看后端日志有没有报 JSON 解析错误。第五步验证多 Agent 加入。用推送脚本模拟一个访客助手export TAOTOKEN_API_KEYsk-你的Key export OFFICE_BASE_URLhttp://127.0.0.1:18791 python3 office-agent-push.py --agent-id agent-cline --join-key jk_cline_001 --status executing --description 跑单元测试这一步会先调/api/agent/join加入再调/api/agent/push推状态。如果返回 401八成是TAOTOKEN_API_KEY没 export 成功或者 Key 前面少了Bearer前缀。如果返回 403检查join_key是否和state.json里的一致。第六步验证协作事件联动。开两个终端一个持续推executing另一个推researching然后刷新看板。你应该看到两个角色分别出现在任务执行区和研究区右上角的在线 Agent 数量变成 2。这时候点一下角色会弹出详情卡片显示最近活动时间。第七步验证昨日小记。在memory目录下放一个 Markdown 文件文件名带日期比如2025-01-15.md内容随便写几句工作记录。刷新看板左下角的小记卡片应该显示这个文件的内容摘要。如果没显示检查文件编码是不是 UTF-8以及state.json里memory_dir路径对不对。我实测下来整个流程从启动到多 Agent 联动大概十分钟能跑通。最容易卡住的地方是推送脚本的鉴权头因为 Star-Office-UI 默认模板里没强调这一点很多人直接复制示例代码就用了。5. 常见报错排查401、local proxy failed 与 choices 解析这一节我把踩过的坑列出来你对照报错信息找就行。401 Unauthorized这个最常见。原因有三个——Key 没传、Key 格式不对、Key 过期。先检查请求头里有没有Authorization: Bearer sk-xxx注意Bearer和 Key 之间有一个空格。如果你用的是 TaoToken 的 Key去控制台确认一下 Key 状态是否正常。还有一种情况是你在settings.json里把ANTHROPIC_API_KEY写成了ANTHROPIC_AUTH_TOKEN字段名错了也会 401。local proxy failed这个报错通常出现在你本地配了代理但代理没起来或者端口不对。Star-Office-UI 的推送脚本本身不走代理但如果你在 Claude Code 或 Cline 里配了HTTP_PROXY环境变量请求会先走代理。解决办法是检查环境变量把HTTP_PROXY和HTTPS_PROXY清掉或者确认代理服务确实在监听。注意这里说的是本地开发环境的网络配置问题不是让你去搞什么特殊通道。reading choices 报错这个一般出现在模型返回格式不符合预期的时候。比如你用的模型 ID 在 TaoToken 上不存在或者返回的是流式格式但脚本按非流式解析。检查state.json里的model_id是否和控制台一致以及推送脚本里解析响应的部分有没有做兼容。我遇到过把claude-3-5-sonnet写成claude-3.5-sonnet的情况点号写成横杠直接报 choices 字段读不到。OAuth 相关报错如果你在 Claude Code 里同时配了 OAuth 登录和 API Key可能会冲突。Claude Code 的settings.json里如果既有ANTHROPIC_API_KEY又有 OAuth 的 token 文件它会优先走 OAuth导致你的 TaoToken Key 不生效。解决办法是清掉 OAuth 缓存或者明确用环境变量覆盖。看板不刷新状态推上去了但前端不动。先看浏览器控制台有没有 WebSocket 连接失败再看后端日志有没有收到 push 请求。如果后端收到了但前端没更新检查refresh_interval是不是设太大了或者浏览器缓存了旧页面强制刷新一下。角色位置错乱状态字段拼写错误比如把executing写成execute前端匹配不到区域角色会停在原地。对照第 3 节的映射表逐个核对。排查的时候有个通用技巧先用 curl 直接打后端 API绕过推送脚本确认后端本身没问题curl -X POST http://127.0.0.1:18791/api/agent/push \ -H Content-Type: application/json \ -H Authorization: Bearer sk-你的Key \ -d {agent_id:agent-cline,status:executing,description:curl 测试}如果 curl 能通但脚本不通问题就在脚本的环境变量读取上。6. 把看板接进你的日常工作流跑通之后我建议你做一件事把状态推送和助手的实际动作绑起来。比如在 Claude Code 的 hook 里任务开始时推executing任务结束推syncing报错时推error。这样看板就不是手动维护的摆设而是真实反映助手状态的仪表盘。如果你需要长期跑多个编码 Agent可以考虑 TaoToken 的 Coding Plan一个通道覆盖多个助手的调用省去反复配 Key 的麻烦。模型对话调试可以去模型对话页面快速验证 Key 和模型 ID 是否匹配。接入文档里有完整的 API 说明API Keys 页面管理你的凭证。最后留个实用技巧Star-Office-UI 的memory目录可以直接软链到你助手的日志目录这样昨日小记会自动汇总真实工作记录不用手动维护 Markdown 文件。我试过把 Claude Code 的会话日志软链过去效果比手写摘要真实得多。 
长河君 · 2026/10/17 17:37:38 · 阅读 1.2k GitHub项目推荐--Star-Office-UI：AI助手协作的像素办公室可视化看板
1. 为什么要把 AI 助手塞进像素办公室我最初看到 Star-Office-UI 这个项目时第一反应是这不就是个花哨的看板吗。但真正跑起来之后才发现它解决的是一个很实际的问题当你在本地同时跑着 Claude Code、Cline、Codex 好几个助手每个都在不同的终端窗口里刷日志你根本不知道谁在干活、谁卡住了、谁在等你确认。Star-Office-UI 做的事情很直接——把每个 AI 助手映射成像素办公室里的一把椅子。助手在写代码就坐到工作台在查资料就跑到研究区报错了就蹲在报错区冒烟。你打开浏览器瞄一眼整个办公室的状态一目了然。它基于 Flask 后端加 Phaser 前端代码是 MIT 协议美术资产限非商业学习使用GitHub 仓库在 ringhyacinth/Star-Office-UI。这个项目适合谁我梳理了三类一是本地同时挂多个编码助手的独立开发者二是需要向团队展示 AI 工作进度的技术负责人三是想把助手状态接进自己监控系统的折腾党。它默认监听 127.0.0.1:18791状态通过 RESTful API 推送六种标准状态idle、writing、researching、executing、syncing、error对应办公室里的不同区域。但这里有个容易被忽略的环节助手的状态数据从哪来如果你用的是云端模型 API每次状态推送背后其实都是一次模型调用或事件回传。如果每个助手各自配一套 Key管理起来会很乱。我的做法是统一走 TaoToken 的 API 通道一个 Key 覆盖多个助手的调用状态回传和模型请求都从同一个出口走看板上的数据才不会因为鉴权失败而断流。下面我把整套配置和验证步骤拆开讲。2. TaoToken 前置准备统一 Key 与 API 通道在动手改 Star-Office-UI 之前先把模型调用通道理顺。这一步不做后面看板刷新时你会遇到状态推上去了、但助手实际调用失败的情况排查起来很痛苦。TaoToken 的定位是统一的大模型 API 接入层官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 入口是 https://taotoken.net/api。你需要先在控制台创建一个 API Key这个 Key 后面会同时用在两个地方一是助手本身的模型调用二是 Star-Office-UI 状态推送脚本里的鉴权头。创建 Key 的路径是进控制台后找 API Keys 页面。这里有个细节要注意TaoToken 的 Key 是 Bearer 形式放在请求头的 Authorization 字段里格式是Authorization: Bearer sk-xxxx。很多人在配置 Star-Office-UI 的推送脚本时习惯性地把 Key 塞进 URL 参数结果 401就是因为没走标准头。模型 ID 这块TaoToken 兼容主流命名你在控制台的模型列表里能看到当前可用的 ID。我实测下来编码类任务用 claude 系列的 ID 比较稳状态摘要生成这种轻量任务用便宜的小模型就够。关键是同一个 Key 可以调不同模型所以你不需要为每个助手单独申请 Key这也是我推荐统一通道的核心原因。配置的时候建议把 Key 写进环境变量而不是硬编码在脚本里。Star-Office-UI 的推送脚本office-agent-push.py会读取环境变量这样你换 Key 的时候不用改代码。具体做法是在 shell 里 export或者写进.env文件用 python-dotenv 加载。我试过直接在脚本里写死结果提交到 Git 的时候差点把 Key 泄露出去这个坑你别踩。还有一点TaoToken 的 API 地址不带末尾斜杠写配置的时候是https://taotoken.net/api如果你在代码里拼接路径注意别拼成//v1/...。这个细节在后面的 settings 片段里我会标出来。3. 可复制配置状态字段映射与看板接入片段这一节是整篇的核心我直接把能复制粘贴的配置给你。Star-Office-UI 的状态推送依赖两个东西一是state.json里的 Agent 定义二是推送脚本里的字段映射。先看状态映射表这是把助手行为和办公室区域对应起来的关键。助手行为状态字段办公室区域动效表现等待指令idle休息区角色原地待命气泡显示待命中生成文档/注释writing文档工作台角色敲键盘气泡显示文档标题检索代码/查资料researching研究区角色翻书气泡显示检索关键词执行命令/跑测试executing任务执行区角色操作终端气泡显示命令摘要同步进度/提交syncing会议区角色举手气泡显示同步内容报错/异常error报错区角色头顶冒烟气泡显示错误码这张表你要记牢因为后面写推送脚本时status字段的值必须严格用这六个之一写错了前端不会报错但角色会站在原地不动你会以为是看板坏了。接下来是state.json的配置片段。这个文件从state.sample.json复制而来你需要改的是 agents 数组和 api 配置部分{ office_name: 我的 AI 协作办公室, main_agent: { id: main-claude, name: 主助手, status: idle, description: 负责代码审查与文档生成 }, agents: [ { id: agent-cline, name: Cline 编码助手, join_key: jk_cline_001, status: executing, description: 执行测试与构建任务 }, { id: agent-codex, name: Codex 补全助手, join_key: jk_codex_002, status: writing, description: 生成函数注释与文档 } ], api: { base_url: https://taotoken.net/api, model_id: claude-3-5-sonnet, auth_header: Authorization, auth_prefix: Bearer }, memory_dir: ./memory, refresh_interval: 5000 }注意base_url这里我写的是https://taotoken.net/api没有末尾斜杠。model_id你按控制台里实际可用的填我填的是示例值。refresh_interval是前端轮询间隔单位毫秒5000 就是 5 秒刷一次调太小会增加后端压力。然后是推送脚本的配置。Star-Office-UI 自带的office-agent-push.py需要你改几个地方我把它整理成环境变量形式这样更干净# .env 文件内容 TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api OFFICE_BASE_URLhttp://127.0.0.1:18791 AGENT_IDagent-cline AGENT_JOIN_KEYjk_cline_001推送脚本读取这些变量后会向http://127.0.0.1:18791/api/agent/push发 POST 请求请求体里带status和description。如果你用的是 Claude Code 这类工具它的 settings 文件里也要配 Base URL 和 Key我以 Claude Code 的settings.json为例{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的实际Key, ANTHROPIC_MODEL: claude-3-5-sonnet } }这三件套——Base URL、Key、Model ID——在 Claude Code、Cline、Codex 的配置里都要写全。Cline 是在 MCP 配置或扩展设置里填Codex 是在auth.json里填。我见过有人只填了 Key 没填 Base URL结果请求打到了默认地址一直超时还以为是 Key 失效。4. 本地启动与逐项验证看板刷新与协作事件联动配置写完现在启动服务并逐项验证。我按实际操作顺序来你跟着做就行。第一步克隆仓库并装依赖git clone https://github.com/ringhyacinth/Star-Office-UI.git cd Star-Office-UI python3 -m pip install -r backend/requirements.txt第二步初始化状态文件cp state.sample.json state.json然后把上一节的state.json内容覆盖进去记得把join_key改成你自己生成的。第三步启动后端cd backend python3 app.py看到输出里出现Running on http://127.0.0.1:18791就说明起来了。这时候打开浏览器访问这个地址你应该能看到像素办公室场景主助手角色在休息区待命。第四步验证状态切换。在项目根目录跑python3 set_state.py --status writing --description 正在整理接口文档刷新浏览器主助手角色应该从休息区走到文档工作台头顶气泡显示正在整理接口文档。如果角色没动先检查state.json里main_agent.status是否被正确更新再看后端日志有没有报 JSON 解析错误。第五步验证多 Agent 加入。用推送脚本模拟一个访客助手export TAOTOKEN_API_KEYsk-你的Key export OFFICE_BASE_URLhttp://127.0.0.1:18791 python3 office-agent-push.py --agent-id agent-cline --join-key jk_cline_001 --status executing --description 跑单元测试这一步会先调/api/agent/join加入再调/api/agent/push推状态。如果返回 401八成是TAOTOKEN_API_KEY没 export 成功或者 Key 前面少了Bearer前缀。如果返回 403检查join_key是否和state.json里的一致。第六步验证协作事件联动。开两个终端一个持续推executing另一个推researching然后刷新看板。你应该看到两个角色分别出现在任务执行区和研究区右上角的在线 Agent 数量变成 2。这时候点一下角色会弹出详情卡片显示最近活动时间。第七步验证昨日小记。在memory目录下放一个 Markdown 文件文件名带日期比如2025-01-15.md内容随便写几句工作记录。刷新看板左下角的小记卡片应该显示这个文件的内容摘要。如果没显示检查文件编码是不是 UTF-8以及state.json里memory_dir路径对不对。我实测下来整个流程从启动到多 Agent 联动大概十分钟能跑通。最容易卡住的地方是推送脚本的鉴权头因为 Star-Office-UI 默认模板里没强调这一点很多人直接复制示例代码就用了。5. 常见报错排查401、local proxy failed 与 choices 解析这一节我把踩过的坑列出来你对照报错信息找就行。401 Unauthorized这个最常见。原因有三个——Key 没传、Key 格式不对、Key 过期。先检查请求头里有没有Authorization: Bearer sk-xxx注意Bearer和 Key 之间有一个空格。如果你用的是 TaoToken 的 Key去控制台确认一下 Key 状态是否正常。还有一种情况是你在settings.json里把ANTHROPIC_API_KEY写成了ANTHROPIC_AUTH_TOKEN字段名错了也会 401。local proxy failed这个报错通常出现在你本地配了代理但代理没起来或者端口不对。Star-Office-UI 的推送脚本本身不走代理但如果你在 Claude Code 或 Cline 里配了HTTP_PROXY环境变量请求会先走代理。解决办法是检查环境变量把HTTP_PROXY和HTTPS_PROXY清掉或者确认代理服务确实在监听。注意这里说的是本地开发环境的网络配置问题不是让你去搞什么特殊通道。reading choices 报错这个一般出现在模型返回格式不符合预期的时候。比如你用的模型 ID 在 TaoToken 上不存在或者返回的是流式格式但脚本按非流式解析。检查state.json里的model_id是否和控制台一致以及推送脚本里解析响应的部分有没有做兼容。我遇到过把claude-3-5-sonnet写成claude-3.5-sonnet的情况点号写成横杠直接报 choices 字段读不到。OAuth 相关报错如果你在 Claude Code 里同时配了 OAuth 登录和 API Key可能会冲突。Claude Code 的settings.json里如果既有ANTHROPIC_API_KEY又有 OAuth 的 token 文件它会优先走 OAuth导致你的 TaoToken Key 不生效。解决办法是清掉 OAuth 缓存或者明确用环境变量覆盖。看板不刷新状态推上去了但前端不动。先看浏览器控制台有没有 WebSocket 连接失败再看后端日志有没有收到 push 请求。如果后端收到了但前端没更新检查refresh_interval是不是设太大了或者浏览器缓存了旧页面强制刷新一下。角色位置错乱状态字段拼写错误比如把executing写成execute前端匹配不到区域角色会停在原地。对照第 3 节的映射表逐个核对。排查的时候有个通用技巧先用 curl 直接打后端 API绕过推送脚本确认后端本身没问题curl -X POST http://127.0.0.1:18791/api/agent/push \ -H Content-Type: application/json \ -H Authorization: Bearer sk-你的Key \ -d {agent_id:agent-cline,status:executing,description:curl 测试}如果 curl 能通但脚本不通问题就在脚本的环境变量读取上。6. 把看板接进你的日常工作流跑通之后我建议你做一件事把状态推送和助手的实际动作绑起来。比如在 Claude Code 的 hook 里任务开始时推executing任务结束推syncing报错时推error。这样看板就不是手动维护的摆设而是真实反映助手状态的仪表盘。如果你需要长期跑多个编码 Agent可以考虑 TaoToken 的 Coding Plan一个通道覆盖多个助手的调用省去反复配 Key 的麻烦。模型对话调试可以去模型对话页面快速验证 Key 和模型 ID 是否匹配。接入文档里有完整的 API 说明API Keys 页面管理你的凭证。最后留个实用技巧Star-Office-UI 的memory目录可以直接软链到你助手的日志目录这样昨日小记会自动汇总真实工作记录不用手动维护 Markdown 文件。我试过把 Claude Code 的会话日志软链过去效果比手写摘要真实得多。