【标签】 学习工作
【标题】 学习工作 | AI 信息中转工作台——让多个 AI 智能体在群聊里接力协作
【正文】
0. 先和大家打个招呼吧 
-
你是谁： 北京交通大学自动化与智能学院的研一学生，平时重度使用 TRAE 做开发，这个 demo 是我用 TRAE 完整跑出来的一个产品形态验证。
-
你是怎么用 TRAE 把 Demo 做出来的： 说实话，用 TRAE 做这个 demo 的过程，和我平时用它写代码没什么本质区别——并不是"第一次发现 AI 能写代码"的惊艳，而是长期使用后形成的稳定协作节奏：
- 把脑子里的产品形态讲清楚（三栏工作台、群聊接力、编排流水线），TRAE 产出 spec 文档；
- 引用飞书/QQ/Slack 的左栏设计共识，TRAE 立刻理解并产出符合市场惯例的重构方案；
- 描述群聊接力的队列规则（@插队+去重+8次上限），TRAE 用纯函数
injectMentioned落地，我直接补单测； - 要求"像真产品经理一样标注"工具型 agent，TRAE 给出「演示」badge + hover 提示。
整个过程没有"原来这么简单"的惊叹——因为我用 TRAE 已经很久了，它早就不是我"跨过某个坎"的工具，而是日常思维的延伸。你只需要把判断说清楚，剩下的它接得住。这个 demo 从 spec 定稿到 172 个单测全通过、236KB 单文件交付，TRAE 不是"帮我搞定一件难事"，而是"一直在那里，稳定地把我想做的事做完"。这种理所当然的协作感，可能才是 AI 辅助开发真正该有的样子。
1. Demo 简介
-
是什么：一个基于网页的「AI 智能体群聊工作台」——把多个 AI agent（产品经理、架构师、前端、后端、审查员、测试……以及 Claude/Trae/Codex 等工具型 AI）拉进同一个群聊房间，让它们像真实团队一样围绕一个任务接力发言、各司其职。支持群聊模式（自由讨论 + @ 插队接力）和编排模式（方案→执行→审查→回退修复→复审通过的自动流水线）。
-
面向谁：
- 想用多个 AI 协作完成一个复杂任务，但厌倦了在 Claude/Cursor/Trae/DeepSeek 之间来回复制粘贴上下文的开发者
- 需要快速验证"多 agent 协作"产品形态的产品经理与创业者
- 对 AI 编排（orchestration）感兴趣的研究者
-
主要功能：多 agent 群聊 + 接力发言：用户发一条消息，群里所有在线 agent 按顺序依次回复，每个 agent 都能看到之前所有人的发言（上下文累积）。agent 回复里如果 @ 了另一个 agent，被 @ 的人会立即插队发言——就像真实群里 @ 同事一样。
中栏消息流，显示用户提问后小岚→老陈→阿凯依次回复的气泡
-
编排模式（自动流水线）：点底部「编排」切换模式 →「启动流程」，观看 Claude 出方案 → Trae 执行实现 → Codex 审查发现问题 → Trae 回退修复 → Codex 复审通过。右栏实时显示流程图 + 干预按钮（暂停/跳过/结束）。
编排运行中的右栏流程图 + 中栏步骤卡
-
任务即群聊 + 成员管理：每个任务就是一个独立群聊房间，左栏是全局 agent 池（所有可用 agent），右栏是当前群聊成员。点中栏「管理成员」可从全局池勾选 agent 加入/移出当前群聊——和飞书/钉钉的群成员管理逻辑一致。
左栏 agent 池 + 中栏管理成员弹层 + 右栏当前群聊成员
2. Demo 创作思路
-
灵感来源：你为什么想到做这个；
-
想解决的问题：用户真实存在的痛点；
-
为什么做这个方向：你的判断和取舍。
3. Demo 体验地址（三选一）
ai-relay-workbench-demo.zip (66.1 KB)
体验方式：
- 下载并解压 Zip
- 双击
ai-relay-workbench-demo.html用浏览器打开（推荐 Chrome/Edge，宽度 1280px 以上） - 零配置即可体验：mock 模式下所有 agent 会回复预设内容，完整走通群聊 + 编排流程
- （可选）点右上角「设置」→ 填入 DeepSeek API key → 所有 persona agent 切换为真实 AI 对话（Claude/Trae/Codex 仍为演示模拟，标注「演示」badge）
评委快速体验路径（约 2 分钟）：
- 群聊：输入
大家好看全员依次回复；输入@小岚 你好看单个 agent 自然对话- 编排：点底部「编排」→「启动流程」，观看方案→执行→审查→修复→通过的完整流水线
- 详情：点任意消息卡，右栏查看原文、发起者、结构化审查结果
4. TRAE 实践过程
4.0 开发概览
| 项 | 说明 |
|---|---|
| 产品形态 | 单页 Web 应用（三栏工作台） |
| 技术栈 | 原生 JS（IIFE 命名空间模式）+ 单文件内联交付 |
| AI 后端 | DeepSeek API（OpenAI 兼容）+ mock 兜底 |
| 开发工具 | TRAE（全程 AI 驱动开发） |
| 测试 | 172 个单元测试全通过（node --test） |
| 交付物 | 236 KB 单文件 HTML |
4.1 用 TRAE 完成开发的关键流程
第一步：规格设计（spec） .4390781791502473:d8514688197a48438009f29043539cbf_6a36cdde4b087e2e10162972.6a36cebe4b087e2e10162974.6a36cebd0a9dd63a4abf686c:Trae CN.T(2026/6/21 01:32:46)
.4390781791502473:86a911a94a9ab9747fadc64cefc33ce8_6a36cdde4b087e2e10162972.6a36cfa24b087e2e101629aa.6a36cfa20a9dd63a4abf686d:Trae CN.T(2026/6/21 01:36:34)
.4390781791502473:09689e1f31847f486c64cace3fac9b6f_6a36cdde4b087e2e10162972.6a36d5c54b087e2e10162b44.6a36d5c40a9dd63a4abf686f:Trae CN.T(2026/6/21 02:02:45)
与 TRAE 协作产出 spec 文档（v2.2 定稿），定义三层能力（多 agent 群聊 + 操控本机工具 + 暴露端口接入）、三栏布局、6 个预设 persona、编排模板、@ 机制、轮流发言规则。
第二步：架构落地
.4390781791502473:3d5bff09eb2bcfd818d2904a418882ab_6a3cff1c7f39fed90c7af3db.6a3d08207f39fed90c7af42c.6a3d0820dbc336e67ce16066:Trae CN.T(2026/6/25 18:51:12)
TRAE 建议采用 IIFE 命名空间模式（单文件内联交付），ES module import 转为 window.<NS>.<symbol> 注入。拆分为 state/adapters/orchestrator/ui/data/utils 六层，build/inline.js 负责合并。
第三步：核心功能实现
- store.js：reducer + 14 个 action（ADD_PARTICIPANT_TO_TASK / REMOVE_PARTICIPANT_FROM_TASK 等）
- composer.js：@ 解析、发言队列、上下文累积（buildContextMessages 署名注入）
- engine.js：编排引擎（plan→execute→review→rollback→pass）
- deepseek.js：流式 SSE 适配器 + 群聊场景豁免指令
第四步：迭代打磨（TRAE 驱动的多轮优化）
.4390781791502473:ef01c947aa3e3c8a3f3dafc13c06dcd9_6a3cff1c7f39fed90c7af3db.6a3f54c17f39fed90c7b0bac.6a3f54bbdbc336e67ce1608d:Trae CN.T(2026/6/27 12:42:41)
- 修复 14 个前端设计缺陷（输入框占满、设置入口、hover 按钮、长消息展开、键盘快捷键……）
- 群聊接力逻辑重构：全员依次回复 + @ 插队 + 8 次上限 + 去重
- 左栏布局重构：参考飞书/QQ/Slack 市场共识，左=全局 agent 池，右=当前群聊成员
- persona 提示词重构：移除强制输出格式，寒暄能自然回应（解决"说你好被套成需求分析"）
- 新增工具型 agent（Claude/Trae/Codex）+「演示」badge 标注
4.2 关键任务对话 Session ID
请在此处填入不少于 3 个 TRAE Session ID：
- Session ID 1：.4390781791502473:3d5bff09eb2bcfd818d2904a418882ab_6a3cff1c7f39fed90c7af3db.6a3d08207f39fed90c7af42c.6a3d0820dbc336e67ce16066:Trae CN.T(2026/6/25 18:51:12)（spec 设计与架构落地）
- Session ID 2：.4390781791502473:ef01c947aa3e3c8a3f3dafc13c06dcd9_6a3cff1c7f39fed90c7af3db.6a3f54c17f39fed90c7b0bac.6a3f54bbdbc336e67ce1608d:Trae CN.T(2026/6/27 12:42:41)（群聊接力逻辑 + 左栏重构）
- Session ID 3：.4390781791502473:d2be7cb74832aade2adb531c0622907a_6a3cff1c7f39fed90c7af3db.6a40ac617f39fed90c7b0f7c.6a40ac5fdbc336e67ce16090:Trae CN.T(2026/6/28 13:08:49)（persona 重构 + 工具型 agent + 迭代打磨）
5. 对应的报名审核通过的帖子链接
附：开发心得
1. AI 驱动开发的关键是"把判断说清楚"
TRAE 不是"你说一句它写一堆"的代码补全，而是能理解产品意图的协作伙伴。但前提是你得把判断说清楚——比如"左栏应该放全局池不是当前群成员"，我引用了飞书/QQ/Slack 的设计共识，TRAE 立刻理解并产出符合市场惯例的重构方案。模糊的指令产出模糊的代码，精确的产品判断产出精确的实现。
2. mock 优先的 demo 策略
从一开始就设计 mock 兜底（不填 key 也能完整体验），这让评委零配置验收成为可能。真实 AI 对话是"锦上添花"，mock 是"保底体验"。这个策略让 demo 的可触达性大幅提升。
3. 单文件内联交付的取舍
为了"双击即开"的极致体验，选择了 IIFE 单文件内联（所有 JS/CSS 内联到一个 HTML）。代价是开发期不能用 ES module 的 import/export（要用 window 命名空间注入），但换来的是零部署、零依赖、可离线的交付物——对比赛 demo 来说这笔交易很值。
4. 群聊接力比想象中复杂
最初以为"多 agent 轮流发言"就是循环调 API，实际要处理：上下文累积（每条消息都能看到之前所有发言）、@ 插队（被 @ 的立即插队且从原位置移除避免重复）、死循环防护（8 次上限）、mock/真实模式分支。用纯函数（buildSpeakerQueue / injectMentioned）把队列逻辑抽出来单测，是保证正确性的关键。