Agent Flow: Real-Time AI Agent Orchestration Visualizer
See your Claude Code and Codex agents think, branch, and coordinate in real-time.
Evidence shows: README clearly states telemetry is opt-out and only aggregate events are sent, not prompts, file paths, etc.; but no user confirmation mechanism (e.g., prompt at install) is provided, and least-privilege principle is not discussed. Data flow transparency is good with telemetry schema and serialize() function. Sensitive data handling is described but implementation not verified. Dependency security only shows version ranges in package.json, no lockfile or audit evidence. External effects include auto-configuring Claude Code hooks, but consent is not mentioned. Rollback mechanism not mentioned. Source attribution has author info, but publisher unverified.
Evidence shows: Tests cover key parsers and file reading logic, self-consistency is good. Dependency availability only shows version ranges in package.json, no lockfile or CI cache evidence. Failure messages not explicitly documented, but tests may imply.
Evidence shows: README clearly identifies target users (Claude Code/Codex users) and use cases (debugging, learning). Capability boundaries are clear with multiple entry points and runtime selection. Trigger precision via settings and env vars. Environment fit requires Node 20+, pnpm, Claude Code CLI, but no version requirement for Codex.
Evidence shows: Information architecture is clear with directory and command tables. Install notes are detailed including quick start and from source. Naming stability not explicitly stated, but version numbers exist. Examples and FAQ have demo video and screenshots, but no FAQ. Known limitations not explicitly listed. License is Apache-2.0 with LICENSE file. Version changelog mentioned in extension/CHANGELOG.md but content not provided. Maintenance responsibility has author info but no maintenance policy.
Evidence shows: Output usability is high with real-time visualization, timeline, transcript. Marginal value is clear, solving black-box problem. Cost-benefit not quantified, but as open-source tool, cost is low.
Evidence shows: README feature claims have test support (e.g., Codex parser tests), but no independent verification. Cross-source corroboration limited, only single repo. Fact-inference separation unclear, e.g., telemetry claims not verified.
- Telemetry is opt-out and enabled by default, users must actively disable, potential privacy concern.
- Auto-configuring Claude Code hooks may modify user config without explicit consent.
- Publisher unverified, source credibility unknown.
- Dependency version ranges are broad, no lockfile, supply chain risk not fully mitigated.
What does this agent do, and when should you use it?
Agent Flow is a developer tool that provides real-time visualization of Claude Code and Codex agent execution via an interactive node graph. It captures events through Claude Code's HTTP hook server and Codex's rollout logs, displaying tool calls, branching, and return flows live. The tool offers multiple entry points: a quick-start browser app (`npx agent-flow-app`), a standalone web app run via `pnpm run dev`, and a VS Code extension. Key features include multi-session tab support, interactive canvas with pan/zoom, timeline and transcript panels, a file-attention heatmap, and JSONL log file replay. Built by the creator of CraftMyGame, Agent Flow is open-sourced under Apache 2.0 and includes opt-out telemetry for the npm binary.
Agent Flow captures agent events through three mechanisms: an HTTP hook server that receives events directly from Claude Code; tailing Codex session files at ~/.codex/sessions/**/rollout-*.jsonl (respecting CODEX_HOME); and watching arbitrary JSONL event log files. It then assembles these into a real-time interactive node graph that shows agent thinking, tool calls, and subagent coordination. Users can pan, zoom, and click nodes to inspect details, review the full timeline and message transcript, and see a file-attention heatmap. The tool supports multiple concurrent sessions, displayed as tabs, and can restrict monitoring to one runtime via settings or environment variables. It also supports replaying events from JSONL files for offline analysis.
- Debugging complex Claude Code agent workflows where you need to trace the exact sequence of tool calls and decisions that led to an error.
- Monitoring multiple concurrent AI agent sessions in real time during a large refactoring or feature development.
- Learning how Claude interprets and executes prompts by watching its real-time reasoning and tool selection.
- Analyzing historical agent sessions by pointing the visualizer at a JSONL event log file for post-mortem review.
- Optimizing prompt design for Claude Code by observing branch points and unnecessary tool calls in the visualization.
- Using Codex with its accurate token counts and reasoning output to understand resource usage and logic.
What are this agent's strengths and limitations?
- Real-time interactive visualization makes agent execution transparent and debuggable.
- Supports both Claude Code and Codex simultaneously with multi-session tabs.
- Offers JSONL log file replay for offline analysis and debugging.
- Multiple deployment options: CLI, standalone web app, and VS Code extension, catering to different workflows.
- Opt-out telemetry, with local data inspection and identity reset capability.
- Tied to Claude Code and Codex runtimes; no support for other agent frameworks or LLM providers.
- Requires Node.js 20+ and pnpm, adding environment setup overhead.
- Telemetry is enabled by default in the npx binary, though opt-out is available.
- Dependence on Claude Code hooks and Codex log formats may break if those tools change.
- No documented integration with CI/CD pipelines or other automation tools.
How do you install or deploy this agent?
Agent Flow offers three installation paths:
- Quick Start (no VS Code): Run
npx agent-flow-app(requires Node.js 20+). - Standalone Web App: Clone the repo, run
pnpm i, thenpnpm run setup(one-time hooks configuration), and finallypnpm run devto start the app. - VS Code Extension: Install the extension, then run 'Agent Flow: Open Agent Flow' from the Command Palette. It will auto-configure Claude Code hooks on first open. Requirements include Node.js 20+, pnpm, and the Claude Code CLI.
How do you use this agent?
Start Agent Flow using one of the installations. Then, in a separate terminal, start a Claude Code or Codex session; events will stream to the visualizer in real-time. Use --port to change the server port, --no-open to prevent auto-opening the browser, and --verbose for detailed logs. For the VS Code extension, use the Command Palette commands or keyboard shortcut Cmd+Alt+A / Ctrl+Alt+A. Configure runtime via agentVisualizer.runtime setting or AGENT_FLOW_RUNTIME environment variable. To watch a JSONL log, set agentVisualizer.eventLogPath.
FAQ
Does Agent Flow support monitoring both Claude Code and Codex at the same time?
agentVisualizer.runtime setting or the AGENT_FLOW_RUNTIME environment variable.Can Agent Flow be used without a live agent session?
agentVisualizer.eventLogPath to the path of a .jsonl file and it will tail and visualize the events.What data is sent in the telemetry?
export AGENT_FLOW_TELEMETRY=false or export DO_NOT_TRACK=1.