Agent Flow：AI 代理编排的可视化工具
实时可视化 Claude Code 与 Codex 代理的编排过程，观察代理如何思考、分支和协作。
- Star 数
- ★ 1.7k
- 最近更新
- 9 天前
- License
- Apache-2.0
- 主语言
- TypeScript
- FA 评分
- 45/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 平台专用Codex · Claude Code
- 费用
- 软件免费，模型调用费用自付
- 上手难度
- 中 · 需要几步配置
- 开始前需要
- 典型场景
- 使用 Claude Code 开发复杂项目时，希望实时观察代理的执行过程，了解其如何分解问题和使用工具。
- 不适合
- 只使用 Claude Code 与 Codex 之外框架的团队
- 不愿安装 Node.js 20+ 与 pnpm 的轻量用户
这个 Agent 能做什么，适合哪些场景？
Agent Flow 是一个开发工具，提供实时可视化 Claude Code 和 Codex 代理的执行过程。它通过交互式节点图显示工具调用、分支和返回流程，帮助开发者理解代理行为、调试工具调用链、定位耗时环节并学习如何编写更优提示词。该工具提供多种接入方式：浏览器快速启动（npx agent-flow-app）、独立 Web 应用（pnpm run dev）、以及 VS Code 扩展。它支持多种功能，包括多会话标签页、交互式画布、时间线和转录面板、文件关注度热图以及 JSONL 日志文件回放。项目由 CraftMyGame 的开发者创建，采用 Apache 2.0 许可，并内置了可关闭的匿名遥测。
Agent Flow 通过三种方式捕获代理事件：Claude Code 的 HTTP 钩子服务器接收事件流，读取 Codex 的 ~/.codex/sessions/**/rollout-*.jsonl 文件（尊重 CODEX_HOME），以及支持读取任意 JSONL 事件日志文件。它将这些事件实时渲染为交互式节点图，展示代理的思考、工具调用和子代理协调。用户可以通过平移、缩放画布并点击节点查看详情，使用时间线和转录面板回放完整执行过程，查看文件关注度热图。它支持同时监控多个会话，并以标签页形式展示，可通过设置或环境变量限定只监控 Claude 或 Codex。
- 使用 Claude Code 开发复杂项目时，希望实时观察代理的执行过程，了解其如何分解问题和使用工具。
- 当代理执行出错时，回放工具调用链，精确定位导致错误的决策序列和调用序列。
- 在开发多代理协作系统时，观察不同代理之间的协调方式和返回流程，优化协作效率。
- 教学或学习场景中，通过可视化观察 Claude Code 如何解释和执行提示词，建立编写更好提示词的直觉。
- 使用 Codex 进行开发时，查看其工具调用、推理过程和准确的 token 计数。
- 分析离线 JSONL 事件日志文件，无实时会话时也能回放代理行为。
如何安装或部署这个 Agent？
Agent Flow 提供三种使用方式：
- 无 VS Code 的快速启动：运行
npx agent-flow-app（要求 Node.js 20+）。 - 从源码运行独立 Web 应用：克隆仓库，运行
pnpm i和pnpm run setup（一次性配置 Claude Code 钩子），然后pnpm run dev。 - VS Code 扩展：安装扩展后，打开命令面板运行 'Agent Flow: Open Agent Flow'，首次打开时扩展会自动配置 Claude Code 钩子。需要 Node.js 20+、pnpm 和 Claude Code CLI。
如何使用这个 Agent？
启动 Agent Flow 后，在另一个终端启动 Claude Code 或 Codex 会话，事件将实时流入浏览器。使用 --port 选项更改端口，--no-open 禁止自动打开浏览器，--verbose 显示详细日志。VS Code 扩展用户可通过 'Agent Flow: Open Agent Flow' 打开面板，或使用快捷键 Cmd+Alt+A (Mac) / Ctrl+Alt+A (Win/Linux)。可通过设置 agentVisualizer.runtime 限定运行时，或设置 agentVisualizer.eventLogPath 指向本地 JSONL 日志文件。
这个 Agent 有哪些优点和局限？
- 提供实时、交互式的代理执行可视化，使不可见的过程变得可见。
- 支持 Claude Code 和 Codex 双运行时，并同时监控多会话。
- 可通过 JSONL 日志文件离线回放，无需实时连接。
- 提供三种接入方式（CLI、Web 应用、VS Code 扩展），灵活适配不同开发环境。
- 内置可选的匿名遥测，默认关闭，保护隐私。
- 主要针对 Claude Code 和 Codex 设计，不支持其他 AI 代理框架或 LLM 提供商。
- 需要 Node.js 20+ 和 pnpm，可能增加开发环境配置负担。
- 遥测默认在 npx 版本中开启，用户需手动关闭。
- 依赖 Claude Code 的钩子机制和 Codex 的日志文件格式，若这些工具更新可能影响兼容性。
- 目前没有文档说明如何与其他 CI/CD 或自动化工具集成。
这个 Agent 与同类方案有什么区别？
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| Agent Flow：AI 代理编排的可视化工具 当前 | 45 · 缺口较多 | 命令行工具免费 + 模型费 | ★ 1.7k | 9 天前 | TypeScript | Codex · Claude Code |
| Ordewell | 67 · 存在缺口 | 命令行工具免费 + 模型费 | ★ 202 | 今天 | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| Plannotator | 78 · 表现良好 | 命令行工具免费版 + 付费版 | ★ 9.5k | 今天 | TypeScript | Codex · Claude Code |
| OpenChamber | 42 · 缺口较多 | 桌面应用免费 + 模型费 | ★ 12k | 今天 | TypeScript | — |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
证据显示：README 明确说明遥测为 opt-out，且仅聚合事件，不发送提示词、文件路径等敏感数据；但未提供用户确认机制（如安装时询问），也未说明权限最小化原则。数据流透明度较好，有遥测 schema 和序列化函数说明。敏感数据处理有说明但未验证实现。依赖安全仅见 package.json 中的版本范围，无锁文件或审计证据。外部影响包括自动配置 Claude Code hooks，但未说明是否需用户同意。回滚机制未提及。来源归属有作者信息，但发布者未验证。
证据显示：测试覆盖了关键解析器和文件读取逻辑，自洽性较好。依赖可用性仅见 package.json 中的版本范围，无锁文件或 CI 缓存证据。失败消息未在文档中明确说明，但测试中可能隐含。
证据显示：README 明确目标用户（Claude Code/Codex 用户）和使用场景（调试、学习）。能力边界清晰，支持多种入口和运行时选择。触发精度通过设置和环境变量控制。环境适配要求 Node 20+、pnpm、Claude Code CLI 等，但未说明对 Codex 的版本要求。
证据显示：信息架构清晰，有目录和命令表。安装说明详细，包括快速开始和源码安装。命名稳定性未明确说明，但版本号存在。示例和 FAQ 有 demo 视频和截图，但无 FAQ。已知限制未明确列出。许可证为 Apache-2.0，有 LICENSE 文件。版本变更日志在 extension/CHANGELOG.md 中提及，但未提供内容。维护责任有作者信息，但未说明维护策略。
证据显示：输出可用性高，提供实时可视化、时间线、转录等。边际价值明确，解决黑盒问题。成本效益未量化，但作为开源工具，成本低。
证据显示：README 中的功能声明有测试支持（如 Codex 解析器测试），但未提供独立验证。跨来源佐证有限，仅依赖单一仓库。事实与推断分离不明确，如遥测声明未验证。
- 源码中未见：执行前用户确认开启或自行加上执行前确认；先在沙箱或测试环境跑通，确认行为后再接入真实数据。
- 源码中未见：回滚或恢复路径运行前先备份，或在 git 分支、快照上操作，确保改动可以撤销。
- 遥测为 opt-out，默认启用，用户需主动关闭，可能引起隐私担忧。
- 自动配置 Claude Code hooks 可能修改用户配置，未明确征得同意。
- 发布者未验证，来源可信度未知。
- 依赖版本范围较宽，未提供锁文件，供应链风险未充分缓解。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
v0.9.2 v0.9.2: Hook setup safety and background subagent fixes
发布说明摘录
- Fix: hook setup no longer removes other tools' hooks from ~/.claude/settings.json (#73) - Setup (npx agent-flow-app, pnpm run setup, and the VS Code extension) treated any hook URL starting with http://127.0.0.1: as its own, so loopback HTTP hooks registered by other tools were deleted on install. On every activation, the VS Code extension also rewrote them into Agent Flow command hooks …在 GitHub 查看 ↗ -
v0.9.1 v0.9.1 — Windows Claude Code session discovery fix
发布说明摘录
- Fix: Claude Code session discovery on Windows — workspace-to-project-dir matching is now case-insensitive on win32 (#57, part of #4) - VS Code reports drive letters lowercase (c:\...) while Claude Code encodes them uppercase (C--...), so the encoded-directory lookup, the subfolder-session prefix check, and the cwd containment check could all silently miss — no sessions appeared at all - The workspace project dir is now resolved to its actual on-disk casing at startup, and all path comparisons are case-folded on Windows (matching the Codex-side fix from 0.9.0)在 GitHub 查看 ↗ -
v0.9.0 v0.9.0 — New model support + Codex discovery fixes
发布说明摘录
- New model support — Claude Fable 5 / Mythos 5, Sonnet 5, Opus 4.8, GPT-5.x Codex (#57) - Context window sizing: fable/mythos family recognized as 1M context (previously fell back to 200k, showing the gauge 5× overfull); gpt-* family recognized as 400k as the fallback when Codex doesn't report its own authoritative window. Sonnet 5 / Opus 4.8 already matched the existing family patterns …在 GitHub 查看 ↗