ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

CopilotKit × AG2 集成中的 Sub-Agents 多代理委派与实时委派日志验证指南

CopilotKit × AG2 集成中的 Sub-Agents 多代理委派与实时委派日志验证指南 CopilotKit × AG2 集成中的 Sub-Agents 多代理委派与实时委派日志验证指南【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit本篇技术指南围绕 CopilotKit 仓库中 AG2 集成showcase/integrations/ag2的Sub-Agents子代理Demo展开一个顶层 supervisor监督代理通过工具调用编排三个专用子代理研究、写作、批评并把每一次委派实时写入共享状态在前端渲染成一条可视化的委派日志。读者将掌握该 Demo 的前后端实现原理、环境搭建前提以及一份可直接执行的 5 步 QA 验证清单含数据断言与预期结果并了解对应的 Playwright E2E 自动化保障。一、Demo 概览supervisor 编排 实时委派日志Sub-Agents Demo 展示的是子代理即工具Sub-agents-as-tools这一经典多代理编排模式在 AG2autogen中的落地形态并借助 CopilotKit 的 AG-UI shared-state 通道把委派过程实时暴露给前端三个专用子代理research_agent搜集事实、writing_agent起草段落、critique_agent评审草稿。每个子代理都是独立的 AG2ConversableAgent拥有聚焦的 system prompt互不共享内存与工具。子代理以工具形式暴露supervisor 通过tool包装调用它们每次调用都会向共享的delegations状态槽追加一条记录。实时委派日志左侧面板渲染agent.state.delegations随着 supervisor 把工作分发出去日志实时增长——而不是等整个回合结束才一次性出现。完整实现位于 showcase/integrations/ag2/src/agents/subagents.py前端页面位于 showcase/integrations/ag2/src/app/demos/subagents/page.tsx。二、环境前置条件Prerequisites在执行下述验证步骤之前需要先确认以下环境就绪对应 QA 文档的 Prerequisites 一节Demo 已部署并可访问/demos/subagents路径。Agent 后端健康通过GET /api/copilotkit检查响应中agent_status应为reachable。该健康检查由 showcase/integrations/ag2/src/app/api/copilotkit/route.ts 实现——它向后端AGENT_URL默认http://localhost:8000的/health端点发起带 3 秒超时的探活请求。后端已设置OPENAI_API_KEYsupervisor 与子代理均使用gpt-4o-mini模型缺 key 时 LLM 调用必然失败。健康检查响应中的env.OPENAI_API_KEY字段会返回set或NOT SET供快速确认。subagentssupervisor 已挂载在 FastAPI 的/subagents路径见 showcase/integrations/ag2/src/agent_server.pyapp.mount(/subagents, subagents_app)将该子应用挂载为独立路径使它的 ContextVariables 状态槽与其他 Demo 相互隔离。三、后端实现原理子代理即工具3.1 三个子代理的定义在 subagents.py 中三个子代理共享同一份 LLM 配置关闭流式单次补全_SUB_LLM_CONFIG LLMConfig({model: gpt-4o-mini, stream: False}) _research_agent ConversableAgent( nameresearch_sub_agent, system_messagededent( You are a research sub-agent. Given a topic, produce a concise bulleted list of 3-5 key facts. No preamble, no closing. ).strip(), llm_config_SUB_LLM_CONFIG, human_input_modeNEVER, max_consecutive_auto_reply1, )writing_agent与critique_agent结构一致只是 system prompt 分别要求产出精炼的单段草稿和给出 2-3 条可执行的批评。关键约束human_input_modeNEVER子代理完全自动执行不请求人工输入max_consecutive_auto_reply1子代理内部不做自我多轮循环一次generate_reply即返回结果。3.2 委派状态模型Delegation 与 SubagentsSnapshot每次委派在前端渲染为一条日志条目对应后端 Pydantic 模型SubAgentName Literal[research_agent, writing_agent, critique_agent] DelegationStatus Literal[running, completed, failed] class Delegation(BaseModel): One entry in the delegation log shown by the UI. id: str sub_agent: SubAgentName task: str status: DelegationStatus completed result: str class SubagentsSnapshot(BaseModel): Shape of the shared delegations state slot rendered by the UI. delegations: List[Delegation] Field(default_factorylist)SubagentsSnapshot就是前端读取的共享状态槽delegations的精确形状前端 TypeScript 侧在 delegation-log.tsx 中声明了与之对应的Delegation接口id/sub_agent/task/status/result。3.3 委派执行与记录ReplyResult ContextVariables子代理的调用被封装在_invoke_sub_agent中。AG2 的generate_reply是同步阻塞的 LLM 往返因此用asyncio.to_thread卸载到工作线程避免卡住 asyncio 事件循环async def _invoke_sub_agent(sub_agent: ConversableAgent, task: str) - str: reply await asyncio.to_thread( sub_agent.generate_reply, messages[{role: user, content: task}], ) if reply is None: return if isinstance(reply, dict): return str(reply.get(content) or ) # 可能是 {content: ...} return str(reply)_record_delegation是写入共享状态的核心把新的Delegation追加进快照、通过context_variables.update(...)回写并返回一个同时携带结果文本与新状态变量的ReplyResult——supervisor 在下一轮把它当作工具输出读取def _record_delegation(context_variables, sub_agent, task, result, statuscompleted) - ReplyResult: snapshot _load_snapshot(context_variables) snapshot.delegations.append(Delegation(idstr(uuid.uuid4()), ...)) context_variables.update(snapshot.model_dump()) return ReplyResult(messageresult, context_variablescontext_variables)值得一提的容错设计_run_delegation捕获generate_reply抛出的任何异常传输错误、配额、SDK bug 等把委派记录为statusfailed并返回一条只暴露异常类名、指向服务端日志的安全提示sub-agent call failed: {ExcName} (see server logs)完整 traceback 仅记录在服务端避免向前端泄露内部细节也让 supervisor 能继续恢复而不是整轮崩溃。此外_load_snapshot在状态校验失败时以 WARNING 级别记录日志并回退到空快照避免静默损坏。3.4 supervisor三个工具 编排约束supervisor 本身也是一个ConversableAgent把三个子代理以functions注册为可调用工具。每个tool的签名都是(context_variables, task) - ReplyResult例如tool() async def research_agent(context_variables: ContextVariables, task: str) - ReplyResult: Delegate a research task to the research sub-agent. return await _run_delegation(context_variables, research_agent, _research_agent, task)supervisor 的 system prompt 明确要求对大多数非平凡请求按research - write - critique顺序委派并强调不要逐字复述子代理输出只需总结——这正是 QA 文档第 4 步回复卫生的底层来源。它的配置与子代理的关键差异supervisor ConversableAgent( namesupervisor, ... llm_configLLMConfig({model: gpt-4o-mini, stream: True}), human_input_modeNEVER, # Limit supervisor steps to bound delegation fan-out. max_consecutive_auto_reply8, functions[research_agent, writing_agent, critique_agent], )max_consecutive_auto_reply8用于约束委派扇出上限防止 supervisor 无限迭代。3.5 FastAPI 挂载与 AG-UI 流文件末尾把 supervisor 包装成 AG-UI 流并构建独立的 FastAPI 子应用stream AGUIStream(supervisor) subagents_app FastAPI() subagents_app.mount(, stream.build_asgi())随后在 agent_server.py 中挂载到/subagentsNext.js 侧的 route.ts 通过dedicatedAgents映射把名为subagents的 agent 指到HttpAgent(/subagents/)实现前后端经由 AG-UI 协议的连通。注意该文件顶部还有两个顺序关键点先load_dotenv()再导入 agent 模块LLM client 在导入期读取OPENAI_API_KEY以及先挂载命名子应用再挂载根路径的 catch-all。四、前端实现实时委派日志 聊天4.1 CopilotKit Provider 与 useAgent页面入口在 page.tsxCopilotKitprovider 指向/api/copilotkit且agentsubagentsDemoContent内通过useAgent订阅状态与运行状态变更const { agent } useAgent({ agentId: subagents, updates: [UseAgentUpdate.OnStateChanged, UseAgentUpdate.OnRunStatusChanged], }); const agentState agent.state as SubagentsAgentState | undefined; const delegations agentState?.delegations ?? []; const isRunning agent.isRunning;delegations与isRunning是驱动左侧日志面板的两路数据源。4.2 委派日志组件delegation-log.tsxdelegation-log.tsx 渲染左侧面板包含 QA 文档中的全部关键 DOM 钩子头部标题Sub-agent delegations右侧计数器data-testiddelegation-count显示N callssupervisor 运行中时出现data-testidsupervisor-running徽标Supervisor running带脉冲动画三个常驻可见的角色指示芯片data-testidsubagent-indicator-researcher|writer|critic无论是否已委派都展示便于用户与 E2E 一眼看到子代理全集及当前激活状态空状态文案Ask the supervisor to complete a task. Every sub-agent it calls will appear here.每条委派记录data-testiddelegation-entry展示#N序号、带 emoji 与配色的角色徽标 Research / ✍️ Writing / Critique、Task: ...行以及真实 LLM 输出块。4.3 聊天流内的子代理活动卡片除侧边日志外聊天流内还通过useRenderTool为三个工具各注册一个渲染器把Researcher 正在执行任务 Y内联展示在对话中page.tsx。subagent-activity-card.tsx 实现活动卡片状态机inProgress → executing → complete对应徽标 starting / running / done测试选择器为data-testidsubagent-card-researcher|writer|critic、结果区data-testidsubagent-result。当有尚未被 ToolMessage 回复的委派调用时supervisor-activity-banner.tsx 会在聊天面板顶部渲染粘性横幅data-testidactive-subagent-banner提示当前正在运行的子代理与任务判定逻辑见 active-subagent.ts它结构性地扫描消息流容忍流式参数不完整、兼容不同运行时消息形状找到最新未答复的工具调用。布局上demo-layout.tsx 左栏放DelegationLog右栏420px放CopilotChat占位文案 Give the supervisor a task...与可选的活动横幅。三枚建议 pill 由 suggestions.ts 通过useConfigureSuggestions提供Write a blog post、Explain a topic、Summarize a topic。五、QA 验证步骤逐项执行清单以下为 QA 文档 showcase/integrations/ag2/qa/subagents.md 的完整验证流程建议按序执行并勾选。1. 页面渲染委派日志 聊天导航到/demos/subagents。左侧面板显示Delegation log面板data-testiddelegation-log。头部文案为 Sub-agent delegations带计数器data-testiddelegation-count初始显示0 calls。空状态文案Ask the supervisor to complete a task. Every sub-agent it calls will appear here.右侧面板显示聊天区输入框占位文案为 Give the supervisor a task...。2. 单次委派链Single delegation chain点击建议Write a blog post或发送等价消息。supervisor 运行期间头部出现data-testidsupervisor-runningSupervisor running徽标。委派过程中日志陆续出现条目data-testiddelegation-entry预期至少 3 条按Research → Writing → Critique顺序排列。每条条目包含#N序号、带子代理名称 emoji 的彩色徽标、Task: ...委派摘要行、包含子代理真实 LLM 输出的result块非占位符。计数器更新为3 calls若 supervisor 迭代则可能更多。3. 独立委派Independent delegations刷新页面状态重置。发送Research what causes the northern lights.——出现至少 1 条Research委派result 为要点列表。发送Now write a paragraph aimed at a 10-year-old, using those facts.——出现Writing委派result 为润色后的段落。发送Critique that paragraph.——出现Critique委派result 含 2-3 条可执行的批评。4. Supervisor 回复卫生Supervisor reply hygiene每条链结束后supervisor 的聊天回复保持简短——只做总结不复述完整子代理输出完整输出已存在于委派日志中。运行结束后 Supervisor running 徽标消失。5. 错误处理Error handling发送极短消息如 Hisupervisor 优雅回应对琐碎问候可以不做委派。正常使用过程中控制台无报错。六、预期结果Expected Results页面在3 秒内加载完成。每个非平凡的用户请求都产生至少一条委派记录。委派日志在运行过程中实时增长而非运行结束才一次性填充。子代理结果为真实 LLM 输出非硬编码桩字符串。七、E2E 测试把验证固化为自动化上述手工清单在 showcase/integrations/ag2/tests/e2e/subagents.spec.ts 中有对应的 Playwright 自动化版本值得在手工验证之外一并了解页面加载测试断言聊天输入框、3 枚建议 pill与3 个常驻子代理指示器均可见。三个 pill 端到端测试blog / explain / summarize点击 pill 后等待subagent-card-researcher|writer|critic全部可见且data-statuscomplete再断言每个卡片的subagent-result非空、不为(empty)、且不含 showcase 助手欢迎语样板Hi there! Im your showcase assistant等——后者用于回归防护Writer/Critic 卡片泄漏聊天欢迎文本的历史 bug。Critic 恰好运行一次点击 pill 后断言 critic 卡片数量恒为 1 且 5 秒停留后仍保持complete用于回归防护critic 无限循环 bug。delegations reducer 回归测试summarize pill 历史上有过INVALID_CONCURRENT_GRAPH_UPDATEdelegations状态键缺少 reducer导致 HTTP 400 的回归当前实现通过 AG2ContextVariables的状态更新机制规避三卡全部到达complete即为通过信号。整体而言这份 QA 验证清单覆盖了 Sub-Agents Demo 的状态写入正确性、委派链路顺序、实时流式可见性、supervisor 输出纪律、故障容错五个维度配合 E2E 自动化是验证 AG2 多代理编排 CopilotKit shared-state 可视化这一组合是否健康运转的完整度量。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表