Agent Flow provides a robust solution for real-time visualization of Claude Code agent orchestration. This tool allows users to monitor agents as they think, branch, and collaborate during their processes. A demo video showcasing its capabilities can be found here.

Key Features

• Live Agent Visualization: Experience an interactive node graph illustrating agent execution, complete with real-time tool calls, branching decisions, and return flows.
• Auto-Detection of Claude Code Sessions: Seamlessly discover active Claude Code sessions in your workspace, enabling automatic event streaming.
• Claude Code Hooks: Implement a lightweight HTTP hook server that receives events directly from Claude Code, ensuring zero-latency streaming.
• Multi-Session Support: Manage multiple concurrent agent sessions conveniently through tabbed navigation.
• Interactive Canvas: Engage with the visualization by panning, zooming, and clicking on agents and tool calls for detailed inspection.
• Timeline and Transcript Panels: Access a comprehensive execution timeline, file attention heatmaps, and message transcripts.
• JSONL Log File Support: Point Agent Flow at any JSONL event log to replay or monitor agent activities.

Benefits of Using Agent Flow

Agent Flow enhances understanding and debugging of agent behavior in Claude Code by providing clarity into previously opaque processes. Key advantages include:

• Understanding Agent Behavior: Observe how agents dissect problems and decide on which tools to utilize.
• Debugging Tool Call Chains: Investigate the sequence of decisions and actions that lead to errors, facilitating efficient troubleshooting.
• Efficiency Insights: Quickly identify slow tool calls, excessive branching, or unnecessary redundancy in agent operations.
• Educational Value: Gain insights by witnessing how Claude interprets and executes prompts, leading to better prompt construction in the future.

Getting Started

To utilize Agent Flow, install the extension and use the Command Palette to open it. It auto-detects any active Claude Code sessions in your workspace for simplified operation. For environments where a JSONL event log file is used, configure the relevant settings within the VS Code application.

Agent Flow stands out as an essential tool for anyone working with Claude Code, turning the complexities of agent orchestration into a visual and understandable format.