[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fiprQlfC8s2jpZiPotNVKG3V7nV1G-L381oSpmKjn1OE":3},{"item":4,"related":51},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":39,"sourceName":40,"sourceUrl":41,"status":42,"seoTitle":43,"seoDescription":44,"canonicalUrl":45,"isFeatured":46,"sno":47,"sortOrder":48,"publishedAt":49,"updatedAt":50,"createdAt":50},"894ac568-3ef4-4514-a4c7-fe92c5a63b46","article","AG-UI：为什么 Agent 需要一套面向前端的交互协议？","ag-ui-agent-frontend-interaction-protocol","AG-UI 是面向 Agent 与用户界面的事件驱动协议。本文解释它如何统一流式输出、工具反馈、状态同步和人工介入，并比较它与 MCP、A2A 及 SSE、WebSocket 的分工。","当 Agent 进入一个真实产品，用户看到的往往不只是最终答案。界面还要显示它正在检索、调用了哪个工具、是否需要用户确认、状态是否发生变化，以及中途生成的内容应该放到哪一块区域。很多团队一开始用 SSE 或 WebSocket 把事件传到前端，后来却发现：通道统一了，事件含义仍然各说各话。\n\nAG-UI，即 Agent-User Interaction Protocol，关注的正是这层语义。它把 Agent 后端和面向用户的应用连接起来，提供一套事件驱动的交互约定。它不要求所有 Agent 使用同一个模型或框架，也不绑定某一种传输协议，而是试图让前端知道“发生了什么”。\n\n## SSE 只负责传输，不负责解释\n\n假设后端发来一串 JSON。第一条表示开始生成文本，第二条表示工具调用，第三条是工具结果，第四条请求用户确认。即使它们都能通过 SSE 送达，前端仍然需要自己猜字段、维护状态机和处理异常。不同 Agent 框架如果定义不同事件格式，前端组件就很难复用。\n\nAG-UI 把这件事拆成事件类型、输入参数和状态语义。后端发出兼容的 Agent 事件，前端根据事件更新消息、工具卡片、进度、上下文和人工介入状态。传输层仍然可以是 SSE、WebSocket 或 webhook，协议关注的是事件代表什么，而不是字节如何抵达。\n\n```mermaid\nflowchart LR\n    A[Agent Runtime] -->|标准化事件| B[AG-UI Middleware]\n    B -->|SSE \u002F WebSocket \u002F Webhook| C[Frontend App]\n    C -->|用户输入与上下文| B\n    B --> A\n    A --> D[Tools and Models]\n    D --> A\n```\n\n## 它在 Agent 协议栈里处于哪一层\n\n可以把几类协议放在不同位置理解。MCP 主要解决 Agent 如何获得工具和上下文；A2A 主要解决 Agent 如何与另一个 Agent 协作；AG-UI 则解决 Agent 如何进入用户正在使用的前端应用。它们可以组合，但没有谁能替代谁。\n\n例如，一个旅行规划 Agent 可以通过 MCP 查询航班和酒店，通过 A2A 把酒店比价委派给另一个 Agent，再通过 AG-UI 把搜索进度、候选卡片和待确认的预算展示给用户。前端不需要知道后端到底用了哪个模型，只需要理解“搜索开始”“候选结果更新”“需要确认”和“任务完成”等事件。\n\n## 事件协议不等于组件库\n\nAG-UI 不会替你决定界面一定要长什么样。它可以让不同应用收到相同的状态变化，但具体是显示成聊天气泡、时间线、表格还是侧边栏，仍然属于产品设计。这个边界很重要：协议负责互操作，组件库负责视觉和交互表达。\n\n同样，AG-UI 也不等于把所有后端日志原样暴露给用户。生产系统需要区分模型思考过程、可展示的进度、工具调用摘要和内部调试信息。一个事件可以服务于前端状态同步，但不代表其中每个字段都适合直接显示给用户。\n\n## 人在回路中的关键是可恢复\n\n用户介入不是简单弹出一个“确定\u002F取消”按钮。前端还要知道当前 Agent 处于什么状态，用户输入会补充哪个步骤，确认后是否继续原任务，以及页面刷新后能否恢复上下文。事件协议如果没有清晰的生命周期，用户一旦离开页面，Agent 就容易变成一个无法解释的后台进程。\n\n因此，采用 AG-UI 这类协议时，团队应先设计事件的幂等标识、顺序、重放和错误语义，再讨论动画和卡片样式。前端需要能够处理重复事件、乱序消息、断线重连和后端取消；后端则要明确哪些状态对用户可见，哪些数据只能留在内部审计中。\n\nAG-UI 的价值可以用一句话概括：SSE 和 WebSocket 解决“怎么把消息送到浏览器”，AG-UI 试图解决“浏览器应该如何理解这些消息”。当 Agent 从聊天框走进真正的产品界面，这一层共享语义会比单纯增加一个传输协议更重要。\n\n来源：[AG-UI 官方仓库](https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui)","\u002Fuploads\u002F2026-09-12\u002F0c1b85e6-bfeb-4730-b1e8-a80b366ed413.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31,35],{"id":24,"name":25,"slug":26},"88d2bc27-0e0f-468a-b907-2991cb97b87b","人工智能","ai",{"id":28,"name":29,"slug":30},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",{"id":32,"name":33,"slug":34},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":36,"name":37,"slug":38},"7da20200-5815-42a5-851a-bc8c1db554cb","应用","app","AG-UI 官方仓库","AG-UI Agent-User Interaction Protocol","https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui","published","AG-UI 是什么：Agent 如何通过事件协议连接前端","从流式消息、工具调用、状态同步和人工介入出发，解释 AG-UI 如何把 Agent 接入用户界面，以及它与 MCP、A2A 的区别。",null,false,56,0,"2026-09-12T00:00:00.000Z","2026-09-12T03:56:46.137Z",[52,61,69],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":59,"createdAt":60},"7f7b281e-b9d6-406f-8d79-9dfb33145f5e","WebTransport：为什么实时 AI 应用不一定应该使用 WebSocket？","webtransport-realtime-ai-apps","WebSocket 适合通用双向消息，但复杂实时 AI 应用还可能需要可靠流、双向流和可以丢弃的临时数据。本文解释 WebTransport 的 session、stream 和 datagram，比较它与 SSE、WebSocket、WebRTC 的边界，并讨论鉴权与部署。","\u002Fuploads\u002F2026-09-08\u002F2247cab5-87b7-4b92-8871-e6adac14dc47.jpg",44,"2026-09-08T00:00:00.000Z","2026-09-08T03:19:19.069Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":14,"sno":67,"publishedAt":59,"createdAt":68},"5c48f6e2-585c-425d-a16c-4fddbe52b592","浏览器自带 AI API：网页如何本地完成翻译、摘要和改写？","browser-built-in-ai-apis-explained","Chrome Built-in AI 把部分模型能力放进浏览器，由网页调用翻译、语言检测、摘要、写作和改写 API。本文解释本地推理的优势与限制、模型下载和兼容性问题，以及更现实的本地与云端混合架构。","\u002Fuploads\u002F2026-09-08\u002Fff6756e6-ef33-4d7a-bb3b-2b3d2394c8f5.jpg",47,"2026-09-08T03:19:16.095Z",{"id":70,"type":6,"title":71,"slug":72,"summary":73,"coverUrl":74,"authorName":14,"sno":75,"publishedAt":49,"createdAt":76},"0c00fd8d-379a-4c58-a542-460bb3575b72","MCP Apps：让 AI 对话里的工具带上交互界面","mcp-apps-interactive-tool-ui","MCP Apps 通过 ui:\u002F\u002F 资源、工具元数据和沙箱 iframe，让 MCP 服务器可以向宿主提供交互式 HTML 界面。本文解释工具与 UI 的关联、权限边界、文本回退和安全模型。","\u002Fuploads\u002F2026-09-12\u002F9e795ab0-aa98-480f-ad6d-a2013530b302.jpg",48,"2026-09-12T03:56:44.551Z"]