Repolode
paulrobello

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. 1

    リポジトリをクローンする

    git clone https://github.com/paulrobello/claude-office.git
  2. 2

    プロジェクトディレクトリに移動する

    cd claude-office
  3. 3

    すべてのコンポーネント(バックエンド、フロントエンド、フック)をインストールする

    make install-all
  4. 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 の数値は毎日更新されます。

関連プロジェクト