patoles/agent-flow

Agent Flow – Claude CodeおよびCodexエージェントのための視覚的デバッガー

概要 – Claude CodeおよびCodex AIエージェントの隠れた内部動作をインタラクティブなノードグラフに変換するリアルタイム可視化ツールです。エージェントがどのように問題をステップに分解し、ツールを呼び出し、サブエージェントを生成し、結果を返すかを表示し、その「思考プロセス」全体を発生と同時に観察できます。

重要性 – AI駆動型アプリケーション（例：Anticsゲーム作成プラットフォーム）を構築する際、開発者はLLMエージェントの最終出力しか見えないことが多く、デバッグが推測作業になりがちです。Agent Flowは実行トレース、ツール呼び出しチェーン、タイミング情報を公開するため、遅延やエラーのあるステップを特定し、分岐ロジックを理解し、プロンプトエンジニアリングを改善できます。

主な機能

• ライブ可視化 – パン/ズーム可能なインタラクティブキャンバス。ノードは推論ステップ、ツール呼び出し、サブエージェントを表します。
• デュアルランタイムサポート – Claude CodeとCodexを同時にサポート。両方を並べて表示したり、設定で一方に制限したりできます。
• ゼロレイテンシストリーミング – 軽量なHTTPフックがClaude Codeイベントを直接受信。CodexイベントはロールアウトJSONLログから読み取られます。
• マルチセッション処理 – 複数の同時エージェントセッションがタブとして表示されます。
• タイムライン＆トランスクリプトパネル – 時系列ビュー、ファイルアテンションヒートマップ、完全なメッセージトランスクリプトを確認できます。
• JSONLリプレイ – 保存されたイベントログを読み込んで過去のセッションをリプレイします。
• VS Code拡張機能 – 単一のコマンドまたはショートカット (Cmd/Ctrl+Alt+A) でエディタ内にビジュアライザーを開きます。

使用方法

1. クイックスタート – npx agent-flow-app (Node 20+, pnpm) を実行すると、ブラウザウィンドウが localhost:3001 で開きます。
2. ソースから実行 – リポジトリをクローンし、pnpm i && pnpm run setup && pnpm run dev を実行します。開発サーバーはNext.js Webアプリと、SSEデータをUIにストリーミングするイベントリレーをホストします。
3. VS Code – 拡張機能をインストールし、コマンドパレットから Agent Flow: Open Agent Flow を実行します。
4. 設定 – agentVisualizer.runtime 設定または AGENT_FLOW_RUNTIME 環境変数を使用して、Claude、Codex、または両方を選択します。agentVisualizer.eventLogPath に .jsonl ファイルを指定すると、オフラインログを可視化できます。

典型的なワークフロー

• ターミナルでClaude CodeまたはCodexセッションを開始します。
• Agent Flowが自動的にセッションを検出し、イベントのストリーミングを開始します。
• グラフが成長する様子を観察：各ノードには推論スニペット、呼び出されたツール、タイミングが表示されます。
• ノードをクリックして詳細（プロンプト、レスポンス、トークン数など）を検査します。
• タイムラインパネルを使用して、ボトルネックや予期しない分岐を特定します。

プライバシー – テレメトリはオプトアウト可能で、匿名化された集計データ（セッション数、期間、モデルID、OS）のみを送信します。プロンプト、ファイルパス、ユーザーデータがマシンから外部へ送信されることはありません。AGENT_FLOW_TELEMETRY=false または DO_NOT_TRACK=1 で無効化できます。

開発者 – Simon Patole（Antics AI駆動型ゲーム作成プラットフォームの作成者）。

ライセンス – Apache 2.0。

---

Agent Flowは、LLMエージェントランタイムを可視化およびデバッグするための純粋なオープンソースツールであり、AI/エージェントツールエコシステムに完全に適合します。