paulrobello/claude-office
Real-time pixel art office simulation that visualizes Claude Code operations
Claude Office Visualizer – 它是什么
Claude Office 是一个开源工具，将 Claude Code（Anthropic 的 Claude 模型的命令行界面）的活动转化为有趣的实时像素艺术办公室模拟。一个“老板”角色代表主要的 Claude 代理，而生成的“员工”代理则显示子任务。当您运行 Claude 命令时，UI 会动画展示代理在多楼层建筑中移动，更新其状态、对话气泡和各种仪表盘。
该项目包含：
- 一个 FastAPI 后端，通过 HTTP/WebSocket 接收来自 Claude Code（或 OpenCode 替代方案）的事件，
- 一个 Next.js + PixiJS 前端，使用 React 组件和 2D 游戏引擎风格的动画层渲染办公室，
- Zustand 存储用于快速状态更新，以及
- 钩子 和一个 OpenCode 插件，将必要的事件发送逻辑注入 Claude CLI。
它本质上是一个 AI 代理工作流的监控仪表盘，以交互式游戏化视觉效果呈现。
主要功能（通俗解释）
| 功能 | 作用 |
|---|---|
| 实时可视化 | 在动画办公室平面图中实时显示 Claude 的操作。 |
| 老板与员工代理 | 主要 Claude 进程显示为老板；子代理显示为执行任务的员工。 |
| 多楼层建筑 | 导航独立的办公室楼层，每层关联不同的 Claude 会话。 |
| 指挥中心 | 跨会话概览，将所有活动会话的老板聚集到一个“像素办公室”中，带有状态列（需要您、工作中、已完成、已结束）。 |
| 白板模式 | 12 种视觉模式（看板、组织架构图、工具使用饼图、时间线等），可通过键盘快捷键选择。 |
| 上下文窗口跟踪器 | 随着 Claude 上下文的增长，一个动画垃圾桶会填满，老板可以“压缩”它。 |
| Git 状态面板 | 实时显示仓库更改。 |
| AI 增强名称与摘要（可选） | 使用 Claude OAuth 令牌，UI 显示友好的代理名称和任务摘要，而不是原始 ID。 |
| 支持 Docker | 一键 Docker compose 在端口 8050 提供 UI，在 8000 提供 API。 |
| 跨平台 | 可在 Linux、macOS 和 Windows 上运行。 |
快速开始（如何运行）
# 克隆并进入仓库
git clone https://github.com/paulrobello/claude-office.git
cd claude-office
# 安装所有内容（后端、前端、钩子）
make install-all
# 在 tmux 会话中启动整个堆栈（推荐）
make dev-tmux
打开浏览器访问 http://localhost:3000 查看可视化器。
如果您只想单进程运行，make dev 会在没有 tmux 的情况下并行启动后端和前端。
可选 AI 增强功能
要获得友好的名称和 AI 生成的任务摘要，请在 backend/ 文件夹中创建一个 .env 文件，包含您的 Claude Code OAuth 令牌：
claude setup-token # 获取长期令牌
echo "CLAUDE_CODE_OAUTH_TOKEN=YOUR_TOKEN" > backend/.env
没有令牌，可视化器仍然可以工作，但代理会显示原始 ID。
扩展或贡献
- 添加新的可视化 – 接入现有的 Zustand 存储或创建新的 PixiJS 系统。
- 支持其他后端 – 架构使用简单的事件模式；您可以编写新的钩子/插件，将相同的 JSON 发布到 FastAPI 端点。
- 运行测试 –
make checkall运行 linting、类型检查和完整测试套件（约 500 个测试）。 - Docker –
make docker-build && make docker-up构建容器并在http://localhost:8050提供 UI。
所有贡献都应通过 CI 检查并包含文档更新。
谁可能觉得这有用？
- 使用 Claude Code 的开发者，希望获得模型正在做什么的视觉提示。
- 研究人员，构建多代理 LLM 工作流，需要快速查看任务委派。
- 教育工作者，寻找 AI 代理在共享环境中交互的有趣演示。
了解更多
- 文档 –
docs/包含快速入门指南、架构概述、白板模式参考和 Docker 部署说明。 - 演示视频 – 链接在 README 徽章中。
- 源代码 – 仓库分为
backend/、frontend/、hooks/和opencode-plugin/目录，职责清晰分离。
总结
Claude Office 将 Claude Code 的内部事件转化为实时的像素艺术办公室模拟。使用 make install-all 安装，运行 make dev-tmux，并将浏览器指向 localhost:3000 观看您的 AI 代理工作。
相关
- 项目
- 项目
- 项目
- 项目
- 项目