Claude Code is powerful, but until now, its execution has been a black box. You give a command, you get a result, but you have no visibility into the journey—how Claude breaks down the problem, which tools it calls, how subagents coordinate, or where it's spending time and tokens. Agent Flow changes that.
What It Does — Real-Time Visualization Inside VS Code
Agent Flow is an open-source VS Code extension that installs as a panel alongside your editor. When you run claude code, it visualizes everything happening in real-time:
- Live Agent Activity: See agents spawn, branch, and complete as Claude decomposes your task.
- Tool Call Chains: Every file read, command execution, and MCP server call appears with timing and token cost.
- Relationship Maps: Visual parent-child connections show how Claude orchestrates subagents.
- File Attention Heatmaps: Identify which files Claude is reading and writing most frequently.
- Token & Time Analytics: See consumption per task, per session, and identify bottlenecks.
You can pan, zoom, and click into any node to inspect the full context—what prompt triggered it, what the tool call returned, and how long it took.
Why You Should Install It Today
This isn't just for debugging. Agent Flow gives you three immediate advantages:
Prompt Optimization: Watch how Claude interprets your instructions. You'll see when it makes unnecessary file reads, creates redundant agents, or misses obvious shortcuts. This builds intuition for writing more efficient prompts.
MCP Server Tuning: If you've installed MCP servers (like the Stripe server we covered recently), you can see exactly when Claude calls them, how long they take, and whether they're being used effectively.
Cost Control: The token consumption visualization makes waste visible. You can identify patterns where Claude re-reads the same files or makes expensive tool calls that could be avoided.
Setup — Two Minutes to Transparency
# Clone the repository
git clone https://github.com/patoles/agent-flow.git
# Follow the VS Code extension installation instructions
# The extension connects automatically when Claude Code runs
Once installed, open the Agent Flow panel in VS Code (View → Extensions → Agent Flow). Run any claude code command in your terminal, and the visualization appears live.
When It Shines — Specific Use Cases
- Debugging Complex Tasks: When Claude Code produces unexpected results, trace the exact decision chain that led there.
- Optimizing Multi-Step Workflows: See where time is spent in your build/test/deploy automation.
- Learning Agent Behavior: New to Claude Code? Watching it work teaches you its problem-solving patterns faster than any documentation.
Currently, Agent Flow works with Claude Code specifically. The roadmap includes Codex support and iTerm2 integration.
gentic.news Analysis
This tool arrives at a critical moment for Claude Code's ecosystem. Our recent analysis showed Claude Code agents average 25 navigation actions per code edit—Agent Flow makes those actions visible. This follows Anthropic's March 2026 release of official @modelcontextprotocol packages, which received a perfect security score and accelerated MCP adoption. With developers connecting more tools via MCP, understanding the orchestration chain becomes essential.
The visualization of token waste directly connects to our coverage of Claude Code's new read cache (which blocks 8% of token waste automatically) and our guide on cutting token costs 32% by fixing navigation problems. Agent Flow provides the diagnostic layer to apply those optimizations intelligently.
As Claude Code's usage surges (appearing in 127 articles this week alone, per our KG data), tools like Agent Flow shift the developer experience from passive consumption to active optimization. This aligns with Anthropic's broader trend toward transparency—their recent CLI integration saved 37% tokens versus MCP servers by giving developers more direct control. Agent Flow extends that philosophy to the agent layer itself.
