ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Agent Teams AI技术架构深度解析:Electron+React如何驱动多Agent并行协作

2026/10/8 13:39:29 拓冰建站 浏览量
Agent Teams AI技术架构深度解析:Electron+React如何驱动多Agent并行协作 Agent Teams AI技术架构深度解析ElectronReact如何驱动多Agent并行协作【免费下载链接】agent-teams-aiYoure the boss, agents are your team. They handle tasks on their own, message each other, and review each others work. You just watch the kanban board and give high-level commands. Codex/Claude/OpenCode/Cursor/Grok/GitHub/Kiro/Z.AI/Xiaomi/MiniMax/Kimi(300 models, 200 LLM providers, free models no auth) Build your AI company with multiple teams项目地址: https://gitcode.com/gh_mirrors/cl/agent-teams-aiAgent Teams AI 是一款开源的多 Agent 团队协作桌面应用它是老板AI Agent 是你的团队——Agent 们自主领任务、互相发消息、互相评审代码而你只需要盯着一块看板、下达高层指令。项目基于Electron React 19 TypeScript构建内置 Kanban 看板、团队聊天、代码评审和多运行时适配Codex / Claude / OpenCode 等 300 模型、200 LLM 提供商并支持完全本地化运行。本文将从产品形态到进程架构带你拆解它如何驱动多个 AI Agent 并行协作。一、产品形态把管理 AI 团队装进一块看板 Agent Teams AI 的核心交互是一块实时更新的 Kanban 看板任务卡片由 Agent 自主创建和流转TODO → In Progress → Review → Done → Approved左侧是团队群聊Agent 之间、Agent 与用户之间的消息实时可见。你还能对任意 Agent 发送私信、在任务卡片上添加评论、查看每个任务的 diff 评审视图接受 / 拒绝 / 评论体验接近 Cursor 的 PR 评审。整个过程的源码约定可以在项目根目录的 CLAUDE.md 中找到详细说明。二、技术栈全景Electron 44 React 19 TypeScript ⚡层次选型用途桌面外壳Electron 44主进程、窗口、系统能力前端框架React 19 Zustand看板、聊天、任务详情等 UI 与状态管理构建工具electron-viteVite 6main / preload / renderer 三端分别打包语言TypeScript 5全栈类型安全本地存储better-sqlite3 JSONL团队数据、会话记录实时终端node-pty xterm内置 Agent 运行终端代码编辑CodeMirror 6应用内直接编辑代码样式Tailwind CSS 3 Radix UI组件化 UI 基座依赖清单都写在 package.json 中从 Radix 无头组件到 Sentry 错误上报一应俱全。三、三层进程架构Main / Preload / Renderer Electron 的经典安全边界在这里被严格执行入口构建配置见 electron.vite.config.ts其中main、preload、renderer三段分别对应三个打包目标Main主进程入口 src/main/index.ts负责窗口管理、IPC 注册、文件监听、Agent 进程生命周期Preload预加载脚本位于 src/preload/用contextBridge把受控 API 暴露给渲染层避免直接暴露 Node 能力Renderer渲染进程React 19 应用入口src/renderer/main.tsx所有看板、聊天、评审 UI 都长在这里。项目还定义了main、renderer、shared、preload、features五条路径别名并配套强制的架构规范 docs/FEATURE_ARCHITECTURE_STANDARD.md——每个中大型功能都是src/features/feature-name/下的独立切片目前已有 30 个功能模块如member-work-sync、team-provisioning、runtime-provider-management保证多进程边界清晰、可独立测试。四、IPC 通信与 Worker让看板永远丝滑 UI 与系统能力之间的所有通道集中在 src/main/ipc/40 个按领域拆分的 handler 文件teams.ts处理团队与消息、crossTeam.ts处理跨团队协作、terminal.ts/tmux.ts处理终端运行时、review.ts处理代码评审。每个 handler 都做参数校验与优雅降级不暴露危险的文件系统访问。更重的活儿被甩进独立的 Worker 线程见 src/main/workers/task-change-worker.ts— 任务变更流水解析team-data-worker.ts— 团队数据聚合team-fs-worker.ts— 团队目录文件读写internal-storage-worker.ts— 内部存储配合 chokidar 的文件监听与 100ms 防抖、LRU 缓存避免重复解析大型 JSONL 文件看板上 Agent 的任务状态变更能做到实时呈现而不阻塞 UI 线程。五、核心引擎agent-teams-controller 与 MCP Server 真正理解多 Agent 并行协作的钥匙在仓库内置的两个子包中1️⃣ agent-teams-controller纯 Node 包 入口 agent-teams-controller/src/controller.js 通过一个共享context把 10 个内部模块绑定成统一 APItasks任务生命周期、kanban看板流转、review评审状态机、messagesAgent 间消息、processesAgent 进程管理、crossTeam跨团队协作、runtime与workSync运行时与工作同步。所有写操作经过任务去重、级联守卫、所有权校验等护栏模块确保多个 Agent 并发写看板时状态一致。2️⃣ mcp-server模型上下文协议服务器 mcp-server/src/tools/ 下按领域拆出taskTools、kanbanTools、teamTools、messageTools、reviewTools、crossTeamTools等 12 个工具模块。也就是说Agent 操作看板的每一刀都是通过 MCP 工具调用落到 controller 上的——任务创建天然幂等有专门的taskCreationIdempotency测试这是多 Agent 并行不撞车的关键设计。六、本地优先的存储与实时同步 Agent Teams AI 是local-first架构团队持久化在~/.claude/teams/团队名/下成员 inbox 文件、任务存储、启动诊断产物都落盘可查会话记录读取 Claude 的~/.claude/projects/**/*.jsonl逐行流式解析 虚拟滚动渲染百万 token 的长会话也不卡应用内数据用 better-sqlite3经 Drizzle ORM管理见 src/features/internal-storage/。消息投递走 inbox 文件协议用户给成员的私信写入inboxes/{member}.jsonLead 的 stdin 消息经relayLeadInboxMessages()中继完整设计文档见 docs/team-management/ 目录下的research-messaging.md等调研笔记。七、多模型支持300 模型、200 提供商 右侧这张Add member面板展示了它的一个杀手级能力为团队每个成员独立选择运行时与模型——Anthropic、Codex、OpenCode、GitHub Copilot、OpenRouter268 个模型、Xiaomi、MiniMax、Kimi 等 200 提供商含大量免费且无需鉴权的模型。团队可以混搭不同模型Lead 用旗舰模型、成员用便宜模型对应实现在 src/features/runtime-provider-management/ 功能模块。八、团队聊天Agent 之间如何对话 群聊视图不仅给人看更是 Agent 协作的工作面成员消息卡片显示发送者、时间戳与引用上下文支持成员提及、文件附件底部输入框可以直接Do / Ask / Delegate三种姿态对 Agent 下指令。底层解析逻辑teammate-message消息识别、结构化任务引用 TaskRef、零宽字符保真编码保证了消息在多 Agent 转发后身份不丢失。九、跨团队协作一张图看懂整个AI 公司 当团队规模扩大Agent Teams AI 提供了组织地图Organization Map多个团队按公司-部门结构组织节点是 Agent连线是任务与消息关系一眼看清 10 个团队、16 个 Agent 的分工全貌。此外还有 Agent Graph 视图把跨团队消息流与任务依赖画成动态图谱是调试多 Agent 协作的利器十、上手指南从源码到运行 ️克隆仓库git clone https://gitcode.com/gh_mirrors/cl/agent-teams-ai cd agent-teams-ai项目强制使用 pnpmpreinstall会拦截 npm/yarnpnpm install pnpm dev # 启动 Electron 桌面应用热更新 pnpm typecheck # 类型检查 pnpm test # 运行全部 vitest 测试推荐按以下路径阅读源码主进程入口src/main/index.tsIPC 通信层src/main/ipc/协作引擎agent-teams-controller/src/MCP 工具集mcp-server/src/tools/渲染层状态src/renderer/store/架构规范docs/FEATURE_ARCHITECTURE_STANDARD.md写在最后Agent Teams AI 用一套教科书级的 Electron 多进程架构把多 Agent 并行协作这件复杂的事收敛为MCP 工具负责 Agent 的动作、controller 保证状态一致、Worker 保证 UI 流畅、看板负责人的监督。无论你是想用它搭建自己的 AI 团队还是想学习一个高质量 Electron React 工程的组织方式这个仓库都值得一读。【免费下载链接】agent-teams-aiYoure the boss, agents are your team. They handle tasks on their own, message each other, and review each others work. You just watch the kanban board and give high-level commands. Codex/Claude/OpenCode/Cursor/Grok/GitHub/Kiro/Z.AI/Xiaomi/MiniMax/Kimi(300 models, 200 LLM providers, free models no auth) Build your AI company with multiple teams项目地址: https://gitcode.com/gh_mirrors/cl/agent-teams-ai创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考