说实话，我Zui近一直在折腾Claude Code的多Agent工作流，感觉挺有意思的。

咱就是说原来用命令行搞这些东西，挺麻烦的。

于是我就想：我Neng不Neng搞个可视化平台出来？

哈哈，这就是claude-studio的由来。

核心功Neng演示 可视化DAG工作流编辑器

这是我觉得Zui有价值的功Neng。

搭一个「Code Review流水线」的workflow，完整流程一眼kan清：Commander指派→Reviewer并行执行→结果回报→Commander汇总。

你懂的，这样搭原型省了hen多时间。

┌─────────────────────────────────┐│ GUI │├─────────────────────────────────┤│ Next.js API Routes │├─────────────────────────────────┤│ ~/.claude/ │├─────────────────────────────────┤│ Claude Code │└─────────────────────────────────┘

技术栈Next.js · React Flow v12 · Monaco Editor · TypeScript · Tailwind CSS · Lucide Icons

这个功Neng挺magic的。

启动

npx claude-code-studio

默认在http://localhost:启动。自定义端口：

npx claude-code-studio --port

说实话，这个工具解决了我不少痛点。

. 配置文件太散

claude-studio解决的核心问题是：把Claude Code多Agent工作流的配置管理从「文件散落在目录里」变成「可视化的图」。

谁调度谁？谁等谁的结果？Dispatch/Report/Sync/Roundtrip这四种边类型文档里dou有说明，但实际搭复杂流程的时候，脑子里要一直维护一张隐形的DAG图，hen费劲。

. 调试效率低

一条workflow跑起来哪个节点卡了哪个agent报错了靠命令行日志来trace基本是大海捞针。

为啥百度不收录我的文章呢？有人说是技术原因，有人说是内容质量问题——其实我觉得吧，可Neng跟我的标题党有关哈，不太确定。

. 流程关系不直观

这就是claude-studio的来历。

MCP服务器、Hook、权限等douKe以在Settings面板可视化配置，不需要手写JSON。

. 基本流程与优势

.

tips: claude agents,一个集中管理所有后台会话的界面,Ke以kan到哪些在运行、哪些在等待输入、哪些完成了。.以前我用Claude CodeZuo一个稍复杂的重构,工作流大概是这样的:.. 点击 Generate，claude-studio在后台调用claude -p，输出一个完整的DAG——agents、edges、skills、checkpoints全部到位。生成之后你Ke以在画布上继续可视化微调。 对于快速搭原型来说这个功Neng省了hen多时间。 你在studio中创建的内容与文件系统的对应关系： claude-studio→ ~/.claude/→ Claude Code. 左侧是项目导航区：当前项目的agents、skills、workflows、memories一目了然。 创建的每个agent自动保存为.claude/agents/<name>.md，格式与手写完全一致。 核心设计原则只有一条：claude-studio不拥有任何数据. 所有数据的source of truth是~/.claude/目录。studioZuo的事情只是： 它不改变Claude Code的执行机制，不引入新的运行时只是让配置过程geng直观、geng少出错. 理论上hen美好——定义一批agents，各司其职，通过Agent工具互相调度，Claude自动并行或串行执行，Zui后汇果。. Workflow搭好直接点Run，studio按拓扑序执行各节点，实时展示每个agent的运行状态. 支持深色、浅色、跟随系统三种模式，Monaco Editor也会跟着切换配色. 画布上Ke以拖拽agent节点，用种边类型连线，清楚地表达agent之间的协作关系： 不再需要在脑子里维护那张隐形的图了. CEO说一句话,系统自动跑十阶段工作流.我把它的结果可视化嵌入了我的个人网站上,对,网站是我在春节期间口喷那个。. 这里有个我hen喜欢的设计——CLAUDE.md自动同步.每次保存workflow，studio会自动把工作流定义同步写入CLAUDE.md，这样Claude Code打开同一个项目时agent团队结构直接可用，不需要手动同步. 安装只需要一行命令： npx claude-code-studio . 有问题或建议欢迎在 GitHub开issue，或者评论区聊. Ru果你在用Clade Code，也欢迎kankan我Zuo的另一个工具cc-statistics——专门追踪Claue Code / Gemini CLI / Cox / Crsor 的token消耗和费用统计，全本地，零依赖. 对于Yi经在用Claue Coe Agent Teams的人，直接 npx claudecodestdio 试一下就知道有没有用. 多智Neng体架构让你Ke以用「竞争假设」模式——让两个 agent将分别从不同角度分析同一个问题,Zui后合并结论,这在排查诡异bug时特别有用。. 理解这个层级关系,Neng帮你避免在设计工作流时踩到权限边界的坑。.

---