agent-flow

实时可视化 Claude Code 代理思考与协作，调试更直观。

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署开源模型 🍴 复刻 218 🐛 待处理 18 👀 关注 13

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1777

维护状态较活跃

是否开源开源

定价模式 🏷️完全免费开源项目，Apache-2.0 许可证，可免费使用和部署。

项目预览

项目数据

分类开源模型

开发团队patoles

官网地址https://marketplace.visualstudio.com/items?itemName=simon-p.agent-flow

GitHubhttps://github.com/patoles/agent-flow

定价模式🏷️完全免费

价格说明开源项目，Apache-2.0 许可证，可免费使用和部署。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议Apache-2.0

主要语言TypeScript

技术栈/模型agent-visualization,ai-agents,claude-code,developer-tools,llm,vscode-extension

GitHub 星标★ 1777

上线时间2026-03-21 00:00:00

代码更新2026-10-29

仓库体积1.1 MB

本站数据更新2026-11-10

维护状态较活跃

收录时间2026-08-09

浏览次数6

项目介绍

agent-flow 是一个用于实时可视化 Claude Code 代理编排的开源工具。它解决了开发者在运行 Claude Code 时难以直观理解代理内部思考、分支和协作过程的问题。通过提供实时可视化界面，开发者可以清晰地看到代理在执行任务时的思维路径、分支决策以及多个代理之间的协调配合。其核心能力包括捕获代理运行时的详细事件流，并以图形化方式展示代理的思考过程、工具调用和状态转换，从而帮助开发者调试、优化和理解复杂的代理工作流。该项目基于 TypeScript 构建，易于集成到现有的 Claude Code 使用流程中。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 1777

技术标签

ai-agents claude-code developer-tools llm vscode-extension

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 5 分钟部署方式：命令行工具 8 步

环境要求

本机具备 Node.js / npx 环境（命令通过 npx 运行）
一个正在运行的 Claude Code 或 Codex 会话，用于产生可视化事件
可选：VS Code，用于以扩展方式使用
默认会同时监听 ~/.claude/projects/ 与 ~/.codex/sessions/ 两个目录

安装与启动步骤

1确认 Node 环境

agent-flow 通过 npx 启动，先确认本机已装好 Node.js 与 npx，能联网拉取包。
```
node -v && npx -v
```
2启动可视化界面

无需 VS Code，该命令会在浏览器中启动可视化界面，并开始监听代理事件。
```
npx agent-flow-app
```
3另开终端跑代理

在另一个终端启动 Claude Code 会话，其运行事件会实时流入界面并绘制成节点图。
4指定端口启动

服务默认端口为 3001，若被占用可用 --port 换成其他端口。
```
npx agent-flow-app --port 3002
```
5控制打开与日志

--no-open 不自动打开浏览器；--verbose 打印更详细的事件日志，便于排查问题。
```
npx agent-flow-app --no-open --verbose
```
6只监听单一运行时

默认同时监听 Claude Code 与 Codex，用环境变量可只保留其中一个。
```
AGENT_FLOW_RUNTIME=claude npx agent-flow-app
```
7指定 Codex 路径

Codex 安装位置非默认时，设置 CODEX_HOME 指向实际的 Codex 主目录。
```
CODEX_HOME=/your/codex/home npx agent-flow-app
```
8VS Code 扩展方式

也可从 VS Code 市场安装 agent-flow 扩展，再用设置项控制运行时来源。

关键配置

配置项	必填	说明	示例
`agentVisualizer.runtime`	否	VS Code 扩展设置项，限定监听 auto/claude/codex	`auto`
`AGENT_FLOW_RUNTIME`	否	命令行启动时限定运行时为 claude 或 codex	`claude`
`CODEX_HOME`	否	Codex 非默认安装时，指向其主目录	`/your/codex/home`
`--port`	否	可视化服务端口，默认 3001	`3001`