patoles/agent-flow

Agent Flow – Claude Code 与 Codex 代理的视觉化调试器

它是什么 – 一款实时可视化工具，将 Claude Code 和 Codex AI 代理隐藏的内部运作转化为交互式节点图。它展示了代理如何将问题拆解为步骤、调用工具、生成子代理并返回结果，让您能实时观察整个“思考过程”。

为什么重要 – 在构建 AI 驱动的应用程序（例如 Antics 游戏创作平台）时，开发人员通常只能看到 LLM 代理的最终输出，导致调试变成猜测游戏。Agent Flow 揭露了执行追踪、工具调用链和时间信息，让您能精确定位缓慢或错误的步骤、理解分支逻辑并改进提示工程。

主要功能

• 实时可视化 – 具备平移/缩放功能的交互式画布；节点代表推理步骤、工具调用和子代理。
• 双运行时支持 – 同时支持 Claude Code 和 Codex；您可以并排查看两者，或通过设置限制为其中之一。
• 零延迟流式传输 – 轻量级 HTTP hook 直接接收 Claude Code 事件；Codex 事件则从其部署 JSONL 日志中读取。
• 多会话处理 – 多个并发的代理会话会以标签页形式显示。
• 时间轴与文字记录面板 – 查看时间顺序视图、文件关注热点图以及完整的消息记录。
• JSONL 重播 – 加载任何已保存的事件日志以重播过去的会话。
• VS Code 扩展 – 使用单个命令或快捷键 (Cmd/Ctrl+Alt+A) 在编辑器内打开可视化工具。

如何使用

1. 快速开始 – 运行 npx agent-flow-app (Node 20+, pnpm)，浏览器窗口将在 localhost:3001 打开。
2. 从源码运行 – 克隆仓库，运行 pnpm i && pnpm run setup && pnpm run dev。开发服务器会托管 Next.js Web 应用以及将 SSE 数据流式传输至 UI 的事件转发器。
3. VS Code – 安装扩展，然后从命令面板运行 Agent Flow: Open Agent Flow。
4. 配置 – 使用 agentVisualizer.runtime 设置或 AGENT_FLOW_RUNTIME 环境变量来选择 Claude、Codex 或两者。将 agentVisualizer.eventLogPath 指向 .jsonl 文件以可视化离线日志。

典型工作流程

• 在终端中启动 Claude Code 或 Codex 会话。
• Agent Flow 会自动检测会话并开始流式传输事件。
• 观察图表增长：每个节点显示推理片段、调用的工具和时间。
• 点击节点以检查详细信息（提示、响应、Token 数量等）。
• 使用时间轴面板定位瓶颈或意外的分支。

隐私 – 遥测功能默认可选择退出，仅发送匿名汇总数据（会话数量、持续时间、模型 ID、操作系统）。没有任何提示、文件路径或用户数据离开机器。可通过 AGENT_FLOW_TELEMETRY=false 或 DO_NOT_TRACK=1 禁用。

开发者 – Simon Patole，Antics AI 驱动游戏创作平台的创建者。

授权 – Apache 2.0。

---

Agent Flow 是一款用于可视化和调试 LLM 代理运行时的纯粹开源工具，完美契合 AI/代理工具生态系统。