Agent Flow

Real-time visualization of LLM agent orchestration — see your agents think, branch, and return as they work.

Agent Flow visualization

Features

Live agent visualization — Watch agent execution as an interactive node graph with real-time tool calls, branching, and return flows
Auto-detect Claude Code sessions — Automatically discovers active Claude Code sessions in your workspace and streams events
Claude Code hooks — Lightweight HTTP hook server receives events directly from Claude Code for zero-latency streaming
Multi-session support — Track multiple concurrent agent sessions with tabs
Interactive canvas — Pan, zoom, click agents and tool calls to inspect details
Timeline & transcript panels — Review the full execution timeline, file attention heatmap, and message transcript
JSONL log file support — Point at any JSONL event log to replay or watch agent activity

Install the extension
Open the Command Palette (Cmd+Shift+P) and run Agent Flow: Open Agent Flow
Start a Claude Code session in your workspace — Agent Flow will auto-detect it

For the lowest-latency live streaming, configure Claude Code hooks:

Run Agent Flow: Configure Claude Code Hooks from the Command Palette
This adds hook entries to your Claude Code settings.json that forward events to Agent Flow's built-in HTTP server

You can also point Agent Flow at a JSONL event log file:

Set agentVisualizer.eventLogPath in your VS Code settings to the path of a .jsonl file
Agent Flow will tail the file and visualize events as they arrive

Command	Description
`Agent Flow: Open Agent Flow`	Open the visualizer panel
`Agent Flow: Open Agent Flow to Side`	Open in a side editor column
`Agent Flow: Connect to Running Agent`	Manually connect to an agent session
`Agent Flow: Configure Claude Code Hooks`	Set up Claude Code hooks for live streaming

Shortcut	Action
`Cmd+Alt+A` (Mac) / `Ctrl+Alt+A` (Win/Linux)	Open Agent Flow

Setting	Default	Description
`agentVisualizer.devServerPort`	`0`	Development server port (0 = production mode)
`agentVisualizer.eventLogPath`	`""`	Path to a JSONL event log file to watch
`agentVisualizer.autoOpen`	`false`	Auto-open when an agent session starts

MIT