UI 与协议:让 Agent 走出控制台
前面几章讲的都是 Agent "在后端怎么跑"——管道、工具、记忆、安全。但 Agent 最终要为人服务、要和别的 Agent 协作,就必然面对两个问题:
- 人怎么和 Agent 交互——不止是控制台打字,而是流式渲染、工具审批、状态同步、多模态输入。
- Agent 怎么和别的 Agent 交互——不同团队、不同框架的 Agent 怎么互相调用。
这一章用三个协议/工具把这两件事讲清楚。它们各自的位置:
| 协议/工具 | 解决的问题 | 谁和谁 |
|---|---|---|
| DevUI | 开发期怎么"看见"Agent | 开发者 ↔ 本地 Agent |
| AG-UI | 生产前端怎么和 Agent 流式交互、审批、同步状态 | Web/移动前端 ↔ Agent 后端 |
| A2A | 不同框架的 Agent 怎么互相调用 | Agent ↔ Agent |
补充:Agent 调"工具/数据源"用的是 MCP,那属于《1.base/11.mcp.md》的内容,不在本章。简单记忆:MCP 调工具、AG-UI 对接人、A2A 对接 Agent。
章节目录
1. DevUI:Agent 的开发期调试界面
DevUI 是 Agent Framework 自带的轻量级 Web 调试界面。把 DI 里的 Agent/Workflow 自动列出来,给你一个浏览器对话窗口、文件上传、流式渲染、OpenAI 兼容 API。讲它的架构(嵌入前端资源 + ASP.NET Core 中间件)、三个核心端点(/devui、/meta、/v1/entities)、Workflow 结构化输入表单、安全(默认 loopback + token)、Aspire 进程内聚合器。这是开发期工具,不要用于生产。
对应官方文档:DevUI Overview(C# 文档官方标注 "Coming Soon",本章基于 .NET SDK 源码
Microsoft.Agents.AI.DevUI整理)
2. AG-UI 协议:让 Agent 拥有真正的 Web 前端
AG-UI 是 Agent 后端和 Web 前端之间的开放协议(HTTP + SSE)。讲清楚为什么需要它(标准化让任何前端能直接接)、协议的 7 大特性、MAF 概念到 AG-UI 事件的映射(TextContent→TEXT_MESSAGE_*、FunctionCallContent→TOOL_CALL_*、DataContent→STATE_SNAPSHOT/DELTA)、服务端 AddAGUI/MapAGUI、客户端 AGUIChatClient、后端工具 vs 前端工具(前端只发声明、本地执行)、共享状态与预测式状态、CopilotKit 接法、安全(可信前端服务器模式)。
对应官方文档:AG-UI Integration 及其子页(Getting Started、Backend Tool Rendering、Frontend Tools、State Management、Security Considerations)
3. AG-UI 人在回路与审批交互
AG-UI 最复杂的特性:让工具在执行前停下来等用户确认。和《3.safe/2.approval-and-sandbox.md》的"执行层审批"叠加——本章重点讲怎么穿过 HTTP+SSE 边界把"暂停"传给前端。核心设计是把 ToolApprovalRequestContent 伪装成 request_approval 工具调用,复用 AG-UI 的工具调用通道;服务端和客户端各需要一层中间件做四次"改写"。还包括消息历史清理(避免 tool_call/tool_result 不匹配)、AdditionalProperties 跟踪配对、审批不是认证的安全提醒。
4. A2A 协议:Agent 与 Agent 之间怎么对话
A2A 是 Google 牵头的开放协议,让"任何框架构建的 Agent"互相调用。先讲清三个协议的定位(MCP 调工具、AG-UI 对接人、A2A 对接 Agent),再讲 A2A 四个核心概念(AgentCard 名片、Message/Part、Task 长任务、ContextId 会话)、两种传输绑定(JSON-RPC vs HTTP+JSON)、服务端 AddA2AServer/MapA2A*/MapWellKnownAgentCard、客户端 A2ACardResolver.GetAIAgentAsync() 把远程 Agent 当本地 AIAgent 或当工具调,最后给出"主机 Agent + 多专家 Agent"的典型编排架构。
对应官方文档:A2A Integration、A2A 协议规范
阅读顺序建议
- 只想快速调试 Agent:直接看 1. DevUI。
- 要做生产 Web 前端:先 2. AG-UI,再按需看 3. 审批。
- 要做多 Agent 系统 / 跨框架协作:看 4. A2A。
- 想理解全套对外能力:按 1→2→3→4 顺序读,它们是递进的(开发期 → 单 Agent 前端 → 前端审批 → 多 Agent)。
参考资料
- DevUI Overview | Microsoft Learn
- AG-UI 协议官网、CopilotKit MAF 集成
- A2A 协议规范、a2aproject/a2a-dotnet
- SDK 源码:
F:/sourcecode/agent-framework/dotnet/src/(Microsoft.Agents.AI.DevUI、Microsoft.Agents.AI.Hosting.AGUI.AspNetCore、Microsoft.Agents.AI.AGUI、Microsoft.Agents.AI.Hosting.A2A*、Microsoft.Agents.AI.A2A)