5分钟看懂 Agent 在干什么：Agent Flow npx agent-flow-app 快速上手完整教程

【免费下载链接】agent-flowReal-time visualization of Claude Code agent orchestration — see your agents think, branch, and coordinate as they work.项目地址https://gitcode.com/gh_mirrors/age/agent-flow点击查看免费下载Agent Flow是一个 AI Agent 实时可视化工具real-time visualization of agent orchestration当你在跑 Claude Code 或 Codex 会话时它能让你像看监控画面一样实时看到每个 Agent 节点在思考什么、调用了哪些工具、花了多少 Token 和多少钱。一行命令npx agent-flow-app即可启动无需安装 VS Code5 分钟就能上手。 什么是 Agent Flow先看看它的界面跑 Agent 任务时终端里只有密密麻麻的文本日志出了问题只能事后翻记录。Agent Flow 把这些过程变成了一张动态节点图每个 Agent 是一个六边形节点工具调用Bash、Read、Write、Edit…是围绕它的对话气泡右上角还有实时的成本统计面板。上图就是它的主画布中间是正在工作的 Agent 节点带 Token 用量进度条周围漂浮着它正在执行的npm test、Edit: jest.config.ts等工具调用右上角面板显示本次会话累计花费 $0.249、消耗 41k tokens并按工具Read、Grep、Write…拆分了费用。它解决的核心问题理解 Agent 行为看它如何拆解问题、如何拆分子 Agentsubagent协作调试工具调用链出问题时精确回溯每一步决策看清时间/金钱花在哪慢调用、冗余分支一眼可见边看边学观察 Agent 如何理解和执行你的 prompt帮你写出更好的提示词 最快启动方法npx 一行命令这是官方推荐的免 VS Code 快速入门方式来自 README.md 的 Quick Start 章节。前置条件已安装 Node.js 18推荐 20 LTS和 Claude Code CLI。操作步骤只需两步打开终端运行npx agent-flow-app浏览器会自动打开可视化页面。再开一个终端启动你的 Claude Code 会话——事件就会实时流入浏览器开始观看。就这么简单不需要 clone 仓库、不需要构建。3 个常用命令行参数参数作用--port 编号修改服务端口默认 3001--no-open启动后不自动打开浏览器--verbose输出详细的事件日志排障时用例如换端口启动npx agent-flow-app --port 3002。 想只看单一运行时可设置环境变量AGENT_FLOW_RUNTIME为claude或codex默认是同时监控两者互不干扰。 可视化面板里能看懂什么打开页面后建议按这个顺序认识各个区域主画布Agent 节点 工具调用气泡支持拖拽平移、滚轮缩放点击任意节点/气泡可查看详情右上角成本面板总花费、总 Token 数以及按工具类型Read/Grep/Write/Edit的费用拆分——想知道读代码烧了多少钱就看这里底部时间轴LIVE实时模式显示已运行时长如0:46点击 Review 可像播放器一样回放整个执行过程顶部切换栏Files / Chat /Cost/ Timeline 四个视图Cost 视图就是上面截图里的成本面板多会话标签页同时跑多个 Agent 会话时用 tabs 切换跟踪想从源码了解画布是怎么画的可以看 web/components/agent-visualizer/canvas/index.ts 和 draw-agents.ts。 另外两种打开方式进阶除了 npxAgent Flow 还有两个入口按需选择① VS Code 插件安装扩展后打开命令面板CmdShiftP/CtrlShiftP运行Agent Flow: Open Agent Flow即可之后在编辑器里用快捷键CmdAltAMac/CtrlAltAWin/Linux一键打开。首次打开面板时会自动帮你配置好 Claude Code hooks。② 从源码运行 Web 版clone 仓库后执行pnpm i pnpm run setup # 一次性配置 Claude Code hooks pnpm run dev # 启动 Web 应用 事件中继然后打开 http://localhost:3000 即可。还能回放 JSONL 日志文件Agent 会话结束后你还可以把任意 JSONL 事件日志指向 Agent Flow设置agentVisualizer.eventLogPath它会自动 tail 该文件并可视化——等于给历史会话也配了个回放器。❓ 新手常见问题Q启动后浏览器是空的看不到任何节点A先确认另一个终端里确实启动了 Claude Code / Codex 会话且和npx agent-flow-app在同一个工作目录下启动Codex 会话匹配是按工作目录判断的。Q我同时用 Claude Code 和 Codex会冲突吗A不会。默认两者并发监控、并排展示并打上运行时标签只用一个的话另一个就是无害的空转。Q隐私安全吗Apnpm run dev和 VS Code 插件不发送任何遥测仅发布的npx agent-flow-app默认发送匿名聚合用量可关闭不会上传 prompt 与文件内容详见 README.md 的 Privacy Telemetry 章节。 值得顺手翻的项目资料README.md完整功能、命令与设置项一览app/package.jsonnpx 发布包agent-flow-app的定义Node ≥ 18extension/CHANGELOG.md版本迭代记录能看到功能演进web/components/agent-visualizer/index.tsx可视化主组件入口✅ 总结场景命令/操作快速体验推荐npx agent-flow-app换端口npx agent-flow-app --port 3002VS Code 内使用命令面板 → Agent Flow: Open Agent Flow源码开发pnpm i pnpm run setup pnpm run dev5 分钟回顾运行npx agent-flow-app→ 开一个 Claude Code 会话 → 在浏览器里看节点图、成本面板和时间轴回放。从此你的 Agent 不再是黑盒思考、分支、协作全都看得见。赞分享【免费下载链接】agent-flowReal-time visualization of Claude Code agent orchestration — see your agents think, branch, and coordinate as they work.项目地址https://gitcode.com/gh_mirrors/age/agent-flow点击查看免费下载相关推荐如何5分钟找到最相关的AI Agent论文awesome-ai-agent-papers快速上手教程如何5分钟找到最相关的AI Agent论文awesome ai agent papers快速上手教程 awesome ai agent papers 是一个Agent OS 5 分钟快速上手用 Agent Governance Toolkit 的 KernelSpace 为 AI Agent 加上内核级策略治理Agent OS 5 分钟快速上手用 Agent Governance Toolkit 的 KernelSpace 为 AI Agent 加上内核级策略治理人工智能AI AgentAI 安全治理策略引擎认证鉴权Agent 沙箱可观测性MaterialShowcaseView最佳实践避免常见错误的8个专业技巧MaterialShowcaseView最佳实践避免常见错误的8个专业技巧 MaterialShowcaseView是一款专为Android应用设计的Mate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考