Claude Codeのターミナルエージェントを、仮想オフィスで働くアニメーション付きドット絵キャラクターとして表示するVS Code拡張機能および単体動作のブラウザーアプリ。
paulrobello/claude-office
Claude Codeのセッションをアニメーションで可視化し、メインエージェントを上司、サブエージェントを従業員として描くリアルタイムのドット絵オフィス。
- スター
- 603
- フォーク
- 139
- 未解決の Issue
- 2
- 最終コミット
- 一昨日
これは何?
Claude Office Visualizerは、Claude Codeのアクティビティをアニメーション付きのドット絵オフィスに変換します。メインのClaudeエージェントは仕事を割り振る「上司」キャラクターとして、各サブエージェントはタスクの実行中にオフィス内を動き回る「従業員」として表示されます。Claude CodeにインストールしたフックがライフサイクルイベントをFastAPIバックエンドに送り、バックエンドからWebSocket経由でNext.jsとPixiJSのフロントエンドに状態が配信されます。
メインのオフィス画面に加えて、稼働中のすべてのセッションの上司を一覧できるCommand Centerや、フロアごとにオフィスを表示する複数階建てのビル表示も利用できます。複数のモードを備えたホワイトボードでは、todoリスト、ツールの使用状況、バックグラウンドタスク、カンバンボードを確認できます。また、OpenCodeのイベントを同じバックエンドに送信するOpenCodeプラグインも含まれており、Dockerコンテナとして実行することもできます。
主な機能
- 01メインエージェントとサブエージェントを上司と従業員のキャラクターで表示するアニメーション付きオフィス
- 02稼働中のすべてのClaude Codeセッションをステータス別の列で確認できるCommand Center
- 03フロアごとのオフィス表示とセッション切り替えに対応した複数階建てビル表示
- 04todoリスト、ツール使用状況チャート、カンバンなどを含む12種類のホワイトボードモード
- 05コンテキストが増えるにつれて中身がたまるゴミ箱として表示するコンテキストウィンドウの追跡
- 06OpenCodeプラグインへの対応とDockerでのデプロイ
ユースケース
- 対応が必要なセッションや作業中のセッションがある複数のClaude Codeターミナルをひと目で把握する
- 複雑なコーディングタスクで、メインエージェントがサブエージェントに仕事を割り振る様子を確認する
- 視覚的でアニメーション付きのインターフェースを使って、エージェントのワークフローを実演または指導する
- ローカルツールからフックでイベントを受け取る共有Dockerサービスとしてビジュアライザーを実行する
クイックスタート
- 1
リポジトリをクローンする
git clone https://github.com/paulrobello/claude-office.git - 2
プロジェクトディレクトリに移動する
cd claude-office - 3
すべてのコンポーネント(バックエンド、フロントエンド、フック)をインストールする
make install-all - 4
tmuxで開発サーバーを起動し、http://localhost:3000 を開く
make dev-tmux
使う前に知っておきたいこと
- Python 3.13以降、Node.js 20以降、uv、およびClaude Code CLIまたはOpenCodeのセットアップが必要です。
- AIによる名前とタスクの要約にはClaude CodeのOAuthトークンが必要です。トークンがない場合は、agent IDがそのまま表示されます。
収録されている特集
トピック
よくある質問
- claude-office とは?
- Claude Codeのセッションをアニメーションで可視化し、メインエージェントを上司、サブエージェントを従業員として描くリアルタイムのドット絵オフィス。 Claude Office Visualizerは、Claude Codeのアクティビティをアニメーション付きのドット絵オフィスに変換します。メインのClaudeエージェントは仕事を割り振る「上司」キャラクターとして、各サブエージェントはタスクの実行中にオフィス内を動き回る「従業員」として表示されます。Claude CodeにインストールしたフックがライフサイクルイベントをFastAPIバックエンドに送り、バックエンドからWebSocket経由でNext.jsとPixiJSのフロントエンドに状態が配信されます。
- claude-office は無料で使えますか?ライセンスは?
- claude-office は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- claude-office は今もメンテナンスされていますか?
- 活発にメンテナンス中。claude-office の最終コミットは 2026年11月5日 です。
- claude-office は何に使えますか?
- 対応が必要なセッションや作業中のセッションがある複数のClaude Codeターミナルをひと目で把握する 複雑なコーディングタスクで、メインエージェントがサブエージェントに仕事を割り振る様子を確認する 視覚的でアニメーション付きのインターフェースを使って、エージェントのワークフローを実演または指導する ローカルツールからフックでイベントを受け取る共有Dockerサービスとしてビジュアライザーを実行する
- claude-office のインストール方法は?
- リポジトリをクローンする: git clone https://github.com/paulrobello/claude-office.git プロジェクトディレクトリに移動する: cd claude-office すべてのコンポーネント(バックエンド、フロントエンド、フック)をインストールする: make install-all tmuxで開発サーバーを起動し、http://localhost:3000 を開く: make dev-tmux
- claude-office はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/paulrobello/claude-office
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Claude CodeやCodexの各プロジェクトを部屋、各エージェントを活動状況がわかるドット絵キャラクターで表示するバーチャルオフィス。
Claude Code、Codex、Mistral Vibe、Coworkのエージェントセッションをローカルのセッションファイルから読み取り、ライブアニメーションのチーム通話として表示します。
Codexなどのコーディングエージェントに反応し、画面上を漂うドット絵ペットを閲覧・インストール・投稿できる公開ギャラリーとCLI。
コードベースやLLM Wikiを探索・検索できるナレッジグラフに変換する、Claude Codeプラグインとマルチプラットフォーム対応スキル群。
ストリーミングASR、話者ダイアライゼーション、ライブ翻訳、OpenAI/Deepgram互換APIに対応したセルフホスト型リアルタイム音声認識サーバー。