Star Office UI：开源像素风 AI 智能体可视化看板，实时呈现多 Agent 办公协作状态

一、Star Office UI是什么

Star Office UI是由ringhyacinth团队联合开发者打造的开源多人协作AI智能体状态看板系统，整体采用复古像素RPG美术风格，将抽象的AI后台运行数据，转化为具象生动的虚拟办公室交互场景。简单来说，该项目能让看不见、摸不着的AI工作流程“可视化、趣味化、透明化”，使用者可直观查看每一个AI智能体当下的工作状态、历史工作记录以及在线活跃度。

该项目拥有双重适配定位，一方面可与OpenClaw（龙虾AI）深度联动，实现智能体工作状态全自动同步更新，无需手动干预；另一方面支持完全独立部署，普通用户可通过脚本、API接口手动推送状态数据，适配各类自研AI工具、本地智能体项目的可视化需求。项目摒弃复杂的技术门槛，兼顾轻量化部署与个性化定制，既适合技术爱好者搭建趣味可视化界面，也能满足小型AI团队日常运维监控的基础需求。

二、功能特色

1. 核心状态可视化，动态场景交互

项目内置六大标准化AI工作状态，每种状态对应像素办公室专属场景区域与动态动画，搭配气泡文字实时备注工作详情，让状态展示清晰易懂。

2. 多智能体协同，多人在线管控

支持通过专属join邀请密钥，添加多个AI智能体入驻虚拟办公室，所有角色状态实时同步展示，实现多成员团队化管控。无论是多个创作类AI、运维类智能体，还是跨场景协作的AI工具，都能在同一看板中集中查看动态，清晰分辨每一个智能体的工作进度与在线情况。

3. 工作记录复盘，留存操作轨迹

内置昨日小记专属模块，可自动读取项目memory目录下的Markdown格式工作记录文件，完成脱敏处理后展示在看板界面。使用者无需手动整理日志，就能快速查阅AI智能体前一日的全部工作内容，方便任务追溯、成果复盘与工作衔接。

4. 多语言全局适配，全球化使用

原生搭载中文、英文、日文三种语言模式，支持界面文案、状态提示、功能备注一键切换，全场景文字联动生效。无论是国内用户日常使用，还是海外开发者二次开发、部署分享，都能适配对应的语言使用习惯。

5. 个性化素材自定义，自由装修场景

开放全量美术资产管理权限，侧边栏内置素材管理面板，支持自定义替换角色形象、办公室背景、装饰摆件等视觉资源。同时接入Gemini AI生图API，可通过AI自动生成专属办公背景，打造独一无二的个性化像素办公室；未接入API的情况下，默认素材可正常使用，不影响核心功能运行。

6. 多端适配覆盖，全场景灵活使用

全面适配移动端网页访问，手机、平板可直接打开看板查看状态，满足外出随时管控的需求；额外提供Electron封装版本，可将看板转化为桌面透明宠物窗口，实现后台常驻桌面、实时悬浮查看AI状态，兼顾便捷性与趣味性。

7. 安全加固防护，保障部署稳定

针对生产环境优化安全机制，侧边栏素材管理、后台设置页面增设密码保护；系统自动拦截弱密码配置，规避恶意篡改风险；同时加固Session Cookie加密规则，避免状态数据泄露，保障多智能体部署场景下的数据安全。

三、技术细节

1. 整体技术栈构成

项目采用前后端分离轻量化架构，核心技术选型通俗易懂，降低二次开发与部署难度：

• 前端层面：依托原生HTML、CSS、JavaScript搭建像素交互界面，结合动画引擎实现角色移动、状态切换、场景联动效果，兼顾流畅度与轻量化；

• 后端层面：基于Python框架搭建核心服务，配套简易接口开发，支持状态数据接收、存储、实时推送，兼容脚本调用与第三方API对接；

• 拓展封装：通过Electron实现桌面端、桌面宠物版封装，依托Docker完成容器化打包，支持一键快速部署，适配各类服务器、本地设备环境。

2. 项目目录结构清晰规整

整体文件分类明确，便于开发者修改配置、新增功能，核心目录与文件作用如下：

• backend目录：存放后端核心服务代码、接口逻辑、状态数据处理脚本，是整个项目的数据中枢；

• frontend目录：包含前端页面、像素素材、动画配置、交互逻辑，支撑可视化界面展示；

• assets目录：收纳全部美术资源，含角色贴图、场景背景、动态帧图、装饰素材，支持自定义替换；

• desktop-pet与electron-shell目录：负责桌面端、悬浮宠物窗口的封装适配，实现多端形态拓展；

• 核心脚本：set_state.py用于手动修改智能体工作状态，convert_to_webp.py优化图片素材格式，healthcheck.sh保障服务稳定运行；

• 配置文件：.env.example提供环境变量配置模板，state.sample.json为默认状态配置文件，新手可直接复制修改使用。

3. 数据交互与同步逻辑

状态数据采用轻量化JSON文件存储，读写效率高、部署无依赖，本地部署无需额外搭建数据库。智能体状态更新支持两种模式：自动模式依托OpenClaw插件实现实时同步，无需人工操作；手动模式可通过命令行脚本、HTTP接口推送自定义状态与备注信息，适配第三方AI工具对接。前端通过定时轮询拉取最新状态数据，搭配帧同步技术避免动画闪烁，保障界面动态展示流畅稳定。

4. 部署优化设计

原生支持三种部署模式，适配不同技术基础的用户：极简本地脚本部署、Docker容器化一键部署、云端公网部署。同时兼容Cloudflare Tunnel快速实现公网访问，无需配置复杂域名与反向代理，新手也能轻松将看板分享至外网查看。

四、应用场景

1. 个人AI助手管控场景：普通用户搭建专属AI可视化看板，实时查看本地写作AI、绘图AI、办公辅助AI的运行状态，避免后台静默运行无法感知进度。

2. 多智能体团队运维场景：小型AI开发团队借助多Agent协作功能，集中管控多个业务智能体，实时监控任务执行、故障报错、数据同步情况，简化运维流程。

3. 趣味可视化展示场景：技术爱好者、博主可搭建像素办公室看板，用于创意分享、内容创作，将枯燥的AI运行数据转化为趣味交互画面，提升展示效果。

4. 桌面常驻监控场景：依托桌面宠物版本，将AI状态悬浮在电脑桌面，日常办公时随时查看智能体动态，无需频繁打开网页登录后台。

5. 教学与二次开发场景：开发者可基于该开源项目学习前后端交互、可视化动画开发、多端封装技术，也可修改素材与逻辑，定制专属行业化AI看板。

五、使用方法

1. 基础环境准备

部署前需提前配置Python 3.10及以上版本环境，确保设备支持Git工具拉取代码；Docker部署模式下，仅需安装Docker与Docker Compose，无需额外配置Python环境。

2. 源码本地快速部署

打开终端，依次执行以下命令完成基础搭建，全程操作简洁易懂：

# 克隆官方开源仓库
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

# 进入后端目录，启动核心服务
cd backend
python3 app.py

服务启动成功后，浏览器访问http://127.0.0.1:19000，即可打开像素办公室看板首页。

3. 手动修改智能体状态

通过内置脚本可自由切换AI工作状态，自定义备注文字，命令示例如下：

# 设置为创作状态，备注工作详情
python3 set_state.py writing "正在整理办公文档与文案素材"

# 设置为异常状态，标注故障原因
python3 set_state.py error "接口连接异常，正在排查网络问题"

# 恢复待命空闲状态
python3 set_state.py idle "任务完成，待机等待新指令"

4. OpenClaw联动全自动部署

已使用OpenClaw智能体的用户，可直接向AI发送部署指令，实现全程自动化配置：

请按照官方SKILL.md文档，完成Star Office UI的全自动部署与状态联动：
https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md

指令发送后，AI会自动完成代码拉取、环境配置、插件对接，实现工作状态无缝同步。

5. Docker容器化部署

适合追求便捷稳定的用户，直接依托容器打包，规避环境兼容问题，参考官方docker-compose配置，一键启动服务，部署后操作逻辑与本地部署完全一致。

6. 桌面宠物版本启用

部署完成基础网页端后，进入electron-shell目录，安装Electron依赖并启动程序，即可生成透明悬浮桌面窗口，支持主界面与迷你宠物窗口自由切换，状态实时同步。

六、常见问题解答：

Q：没有OpenClaw智能体，还能正常使用这个项目吗？

A：完全可以。该项目支持独立离线部署，无需依赖任何AI框架，使用者可通过自带的set_state.py脚本手动修改状态，也能对接自研工具的API接口推送数据，单纯作为个性化趣味状态看板使用，核心可视化功能不会受限。

Q：手机端打开看板出现画面错乱、动画卡顿怎么办？

A：首先检查网络稳定性，移动端建议切换稳定WiFi访问；其次确认前端素材完整，未随意删减assets目录图片文件；若仍卡顿，可关闭自定义AI生图背景，恢复默认基础场景，降低画面资源占用，优化流畅度。

Q：如何添加多个AI智能体，实现多人协同展示？

A：在看板侧边栏找到智能体邀请功能，生成专属join密钥，将密钥同步至其他部署节点的项目配置中，完成绑定后，多个智能体即可加入同一办公室，所有角色状态会实时汇总展示在主界面。

Q：接入Gemini AI生图API失败，无法生成自定义背景？

A：首先核对API密钥填写无误，确认密钥拥有生图权限；其次检查设备网络可正常访问Gemini接口；若无需自定义背景，可直接关闭API接入开关，默认像素背景可正常使用，不影响核心状态展示。

Q：修改状态配置文件后，界面没有实时更新怎么办？

A：状态数据会定时自动刷新，可手动刷新浏览器页面生效；同时避免直接手动编辑state.json文件，优先使用官方set_state.py脚本修改，防止文件格式错误导致数据读取失败。

Q：部署后外网无法访问，只能本地打开怎么解决？

A：可借助Cloudflare Tunnel工具一键配置公网穿透，无需备案域名；也可通过服务器反向代理配置专属外网地址，开放19000端口权限，保障外网设备正常接入看板。

七、相关链接

• 官方开源代码仓库主地址：https://github.com/ringhyacinth/Star-Office-UI

八、总结

Star Office UI凭借轻量化架构、趣味像素视觉与实用可视化能力，填补了AI智能体工作状态直观展示的需求空白，既解决了传统AI后台运行看不见、摸不着、难追溯的痛点，又以复古可爱的像素风格降低了技术项目的生硬感。项目兼顾新手友好性与开发者拓展性，部署门槛低、适配场景广，原生支持多智能体协作、多语言适配、多端形态拓展，同时开放素材自定义与二次开发权限，无论是普通用户打造专属趣味AI看板，还是技术团队搭建轻量化运维监控界面，都能快速落地使用，是一款兼具实用性、趣味性与开源价值的AI可视化工具。