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 はエージェントが複数フロアの建物内を移動し、状態、吹き出し、さまざまなダッシュボードを更新する様子をアニメーション表示します。
このプロジェクトには以下が含まれます：
- HTTP/WebSocket を介して Claude Code（または OpenCode 代替）からイベントを受信する FastAPI バックエンド、
- React コンポーネントと 2D ゲームエンジンスタイルのアニメーションレイヤーでオフィスをレンダリングする Next.js + PixiJS フロントエンド、
- 高速な状態更新のための Zustand ストア、および
- 必要なイベント送信ロジックを Claude CLI に注入する フック と OpenCode プラグイン。
これは本質的に、AI エージェントワークフロー用の監視ダッシュボードであり、インタラクティブなゲーム風ビジュアルとして提示されます。
主な機能（専門用語を控えめに）
| 機能 | 説明 |
|---|---|
| リアルタイム可視化 | Claude のアクションをアニメーション化されたオフィスフロアプランでライブ表示します。 |
| ボスと従業員エージェント | メインの Claude プロセスはボスとして表示され、サブエージェントはタスクを実行する従業員として表示されます。 |
| 複数フロアの建物 | それぞれ異なる Claude セッションに関連付けられた個別のオフィスフロアをナビゲートします。 |
| コマンドセンター | すべてのライブセッションのボスをステータス列（要対応、作業中、完了、終了）付きの 1 つの「ピクセルオフィス」に集約するセッション横断の概要。 |
| ホワイトボードモード | キーボードショートカットで選択可能な 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/ フォルダーに Claude Code OAuth トークンを含む .env を作成します：
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/ディレクトリに分割され、関心事が明確に分離されています。
TL;DR
Claude Office は Claude Code の内部イベントをライブのピクセルアートオフィスシミュレーションに変換します。make install-all でインストールし、make dev-tmux を実行して、ブラウザを localhost:3000 に向けると、AI エージェントが作業する様子を確認できます。
関連
- プロジェクト
- プロジェクト
- プロジェクト
- プロジェクト
- プロジェクト