Practical overview
When it fits
Use Agent Flow while an agent session is running to observe its execution, or afterward to review a JSONL event log and trace tool-call sequences.
Who it is for
- Developers debugging Claude Code or Codex agent behavior.
- Teams reviewing concurrent agent sessions and their coordination.
- Developers studying how agents interpret prompts and spend time during execution.
Documented uses
- Trace the sequence of decisions and tool calls that led to an unexpected result.
- Inspect agent branches, return flows and subagent coordination.
- Review execution timelines, transcripts and file-attention heatmaps.
- Compare concurrent sessions or watch activity from a JSONL event log.
Requirements & limits
- The README documents Claude Code and Codex as supported runtimes; additional orchestration systems are not demonstrated.
- The VS Code extension requires a VS Code-compatible IDE version 1.85 or later.
- The source-based setup lists Node.js 20+, pnpm and the Claude Code CLI.
- Opt-out anonymous telemetry is enabled by default only in the published npx binary; the README says the VS Code extension and
pnpm run devemit none.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Start the browser visualizer with npx
Open the browser visualizer and stream activity from a Claude Code session.
Before you start
- Node.js 20 or later
- Claude Code CLI
Steps
Run the command below.
npx agent-flow-appStart a Claude Code session in another terminal.
Expected outcome
The visualizer opens in a browser and receives events from the Claude Code session.
Guide limitations
- This quick-start path is documented for Claude Code; the README's stated event-streaming instruction here is to start a Claude Code session.
Set up the standalone web app from source
Install the project and start its web app and event relay.
Before you start
- Node.js 20 or later
- pnpm
- Claude Code CLI
Steps
Clone the repository and change into its directory.
Run
pnpm i.Run
pnpm run setupto configure Claude Code hooks.Run
pnpm run dev, then openhttp://localhost:3000and start a Claude Code session in another terminal.
Expected outcome
The local web app and event relay start, with Claude Code events streamed to the browser.
Guide limitations
- This documented setup configures Claude Code hooks; it does not describe a source-based setup procedure for Codex.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 11 October 2026
- Original website title
- patoles/agent-flow · Official homepage title · retained in its source language

