用React Flow节点编辑器设计你自己的多智能体团队：The Delegation完全教程

【免费下载链接】the-delegationA no-code 3D playground to explore, design, and interact with Agentic AI systems项目地址https://gitcode.com/gh_mirrors/th/the-delegation点击查看免费下载The Delegation 是一个无代码no-code3D 游乐场你可以用基于React Flow 的节点编辑器像搭积木一样设计自己的多智能体团队Multi-Agent Team然后观看这些 AI 智能体在一个 3D 办公室里实时协作、推进项目。本文是一份面向新手的完全教程从本地启动到用节点式编辑器创建团队、配置每个智能体再到把团队交付给仿真引擎开工。快速开始三步在本地跑起 The Delegation这个项目基于 Vite React Three.js 构建启动非常简单克隆仓库git clone https://gitcode.com/gh_mirrors/th/the-delegation安装依赖npm install启动开发服务器npm run dev在浏览器中打开终端显示的本地地址通常是http://localhost:3000/the-delegation即可进入。⚠️注意BYOK运行仿真需要自带Gemini API Key。启动后按界面提示填入密钥智能体才能真正思考。完整说明见 README.md。打开团队编辑器进入 React Flow 画布进入应用后点击顶栏右侧的Manage Teams按钮实现在 Header.tsx应用会切换到design设计模式弹出全屏团队编辑器入口逻辑见 App.tsx。编辑器由三部分构成区域作用左侧 · Agent 配置面板选中某个节点后编辑它的名称、颜色、模型、职责中间 · React Flow 画布团队结构的可视化核心节点可拖拽、可缩放右侧 · Teams 面板团队列表内置模板 你的自定义团队画布底层使用xyflow/reactReact Flow节点和连线都做了定制智能体节点是 VisualFlowNode.tsx带方向的层级连线是 DirectionalEdge.tsx类型注册见 VisualConfigurator.tsx。读懂节点与连线团队结构的可视化语言在画布上你会看到一种清晰的层级语言User 节点You代表你自己是所有团队的起点Lead Agent主智能体用灰色虚线连接你负责接收项目 Brief 并统筹全局Subagent子智能体挂在 Lead 或更高层节点之下用各自颜色的虚线表示汇报关系。这套结构的数据定义非常简洁——AgentNode接口含name、description、model、humanInTheLoop、subagents等字段见 agents.ts。系统会把它递归转换成交互式的节点和连线转换逻辑在 flowUtils.ts 的systemToFlow函数中你在画布上的每一次拖拽都会写回同一份数据结构这就是所见即所得。从零创建你的第一个多智能体团队一键新建团队点击右侧 Teams 面板底部的Create New Team按钮TeamsPanel.tsx系统会自动生成一个包含 User Lead Agent 的初始团队并直接进入编辑模式。添加子智能体在画布中点击任意智能体节点选中它点击画布下方出现的Add Subagent按钮。新节点会自动选择一个不与已有节点重叠的位置布局算法见 VisualConfigurator.tsx并默认命名为Specialist N方便你直接重命名。两个小限制需要知道人数上限一个团队最多5 个智能体 1 个用户限制常量在 agents.ts 中定义自动保存所有改动都会实时写入全局状态库Zustand 的 teamStore.ts无需手动保存团队。用内置模板快速起步如果你不想从零画起右侧面板提供了6 个行业模板创意代理unboring.net、Nano Banana Lab图片生成、Lyria Factory音乐、Veo Studio视频等全部定义在 agents.ts。点开任意模板你就能直观看到图片生产线和创意代理这类多智能体编排模式长什么样照着抄作业是最高效的学习方式。配置每个智能体名称、模型与人工审批选中节点后左侧 AgentConfigPanel.tsx 会展开完整配置面板共有 5 个关键项Agent Color颜色节点与 3D 角色的主色。注意系统会检查亮度见 colorUtils.ts过亮的颜色无法保存因为白色画布上会看不清。Name名称只允许字母、数字和空格且不能与团队内其他成员重名重名会显示红色提示This name is already used in the team。LLM Model按智能体选模型每个角色可以单独指定 Gemini 模型——gemini-3-flash快、gemini-3.1-pro推理强、flash-lite便宜等可选清单见 constants.ts。比如让 Lead 用 Pro 做统筹让执行层用 Flash 抢速度。Description职责描述这是智能体的岗位说明书会直接成为它的系统提示词基础。写得越具体专长、目标、约束产出越稳定。Supervision → Human-in-the-Loop人工审批开关打开后该智能体完成任务时会暂停并提交给你评审模拟 Pull Request 式的审核流程你可以批准或给反馈开关实现见 AgentConfigPanel.tsx。此外Capabilities能力是按角色自动分配的Lead 拥有Set Project Brief和Deliver Project带下属的智能体拥有Propose Tasks所有智能体都有Execute Complete Tasks与Autonomous Reasoning。改完点击Update Agent保存Remove from Team可删除该节点。 保存按钮置灰时通常是名称为空、名称重名、或颜色太亮校验逻辑见 AgentConfigPanel.tsx。从设计回到仿真看团队在 3D 办公室开工关闭编辑器后回到simulation 视图你的节点图会活过来每个智能体变成对应颜色的 3D 角色基于NavMesh 导航网格NavMeshManager.ts自主走到工位坐下开工左侧Logs面板可切换 Activity / Technical 两个视图实时查看请求、响应与原始 LLM 工具调用底部Kanban展示任务在Scheduled / On Hold / In Progress / Done之间的流转右侧Project Info填写 User Brief项目简报并实时统计 Token 用量与成本估算逻辑见 pricing.ts开启过 Human-in-the-Loop 的智能体会弹出 PR 式评审弹窗等你点头才继续。常见问题Q1我真的完全不用写代码吗是的。团队结构、角色、模型、审批流全部在节点编辑器里完成。项目本身面向 AI 爱好者、教育者和创意开发者目标是零代码理解多智能体协作。Q2为什么我的 Agent 保存不了只有三种原因名称为空、与团队内其他成员重名、颜色过亮。面板会给出明确提示。Q3能同时跑很多智能体吗单个团队上限 5 个智能体 你MAX_AGENTS。想扩展可以创建多个团队分别编排。Q4费用怎么控制用flash-lite给低价值角色省钱、实时看 Token 成本面板、开启Auto-approve output控制何时触发最终生成图片/音乐/视频这三招基本够用。小结用 The Delegation 设计多智能体团队的路径非常短Manage Teams 进入 React Flow 画布 → Create New Team → 拖拽加节点 → 配置模型与审批 → 回到 3D 办公室看它们开工。从 VisualConfigurator.tsx 的画布逻辑到 agents.ts 的数据结构整个设计层代码量很小如果你想继续深挖节点编辑器实现这也是一个很好的阅读起点。赞分享【免费下载链接】the-delegationA no-code 3D playground to explore, design, and interact with Agentic AI systems项目地址https://gitcode.com/gh_mirrors/th/the-delegation点击查看免费下载相关推荐llmfit 本地大模型基准测试一次按键测出你的真实 tok/sllmfit 本地大模型基准测试一次按键测出你的真实 tok/s llmfit 是一个本地大模型硬件适配工具内置数百个模型与多家推理运行时的数据一条命令就人工智能大模型本地部署CLI桌面应用AI 评测前端后端如何定制自己的多智能体团队从零手写ClawTeam TOML模板的完整指南如何定制自己的多智能体团队从零手写ClawTeam TOML模板的完整指南 ClawTeam OpenClaw 是一款多智能体蜂群协调框架它让 OpenCl人工智能AI Agent多智能体Agent 编排MCP 服务CLI任务调度REA 逆向工程指南如何把 App 行为一路追到原生二进制并拿到完整证据链REA 逆向工程指南如何把 App 行为一路追到原生二进制并拿到完整证据链 让大模型解释一下这个功能怎么实现的最常见的结果是它一本正经地复述了一段根逆向工程MCP 服务AI 技能上一篇一行 Markdown 给 README 加 18 种统计徽章npmx.dev Badge API 完整使用教程下一篇FAST 官方文档站 fast-site 的演进与构建实践从 0.2.0 到 0.6.2 的变更记录解读与当前 Eleventy 架构剖析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考