MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析原创

发布于 2025-5-16 06:34

浏览

0收藏

随着 AI Agent 在企业中应用越来越广，AI Agent 在落地过程中，MCP 解决了 AI Agent 到 Tools 之间的通信标准，A2A 解决了 AI Agent 到 AI Agent 之间的通信标准。但是仍缺少一块：用户到 AI Agent 的通信协议。

MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析-AI.x社区

AG-UI 协议横空出世，专为解决前端应用与 AI Agent 的通信交互而设计。

MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析-AI.x社区

AG-UI 让你能够轻松地在网页、APP、应用程序或嵌入式设备中集成 AI 助手、AI 客服和智能问答 UI，避免了为每个应用程序重复开发基础功能的麻烦，也省去了处理交互逻辑的烦恼。

AG-UI 完善了 AI 协议栈，专注于构建 AI Agent 与用户前端之间的桥梁。它采用事件驱动的设计，定义了16种标准事件，并支持 SSE、WebSocket 和 Webhook 等传输方式，与 LangGraph、CrewAI 等框架兼容。

它就像是为你的前端安装了一个 AI “大脑”，无需绑定到特定的模型或框架，一套协议就能满足所有的交互需求。

为什么需要 AG-UI？

每个 AI Agent 后端都有自己的工具调用、ReAct 样式规划、状态差异和输出格式机制。

如果你使用 LangGraph，前端将实现自定义的 WebSocket 逻辑、杂乱的 JSON 格式和特定于 LangGraph 的 UI 适配器。

但要迁移到 CrewAI/Dify 等，一切都必须进行调整，这样工作量大大增加。

MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析-AI.x社区

Github 地址：

https://github.com/ag-ui-protocol/ag-ui

使用文档地址：

https://docs.ag-ui.com/introduction

下文对 AG-UI 详细剖析之。

AG-UI 架构设计剖析

第一、AG-UI 架构设计

AG-UI 使用一个轻量级、事件驱动的协议来连接 AI Agents 和前端应用程序，架构设计如图所示：

MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析-AI.x社区

Front-end：通过 AG-UI 进行通信的应用（聊天或任何启用 AI 应用）；
AI Agent A：前端可以直接连接的 AI Agent，无需通过代理；
Secure Proxy：一个中介代理，安全地将前端的请求路由到多个 AI Agents；
AI Agent B 和 C：由代理服务管理的 AI Agents。

第二、AG-UI 工作机制

AG-UI 的核心工作机制非常简洁而优雅，如下图所示：

客户端通过 POST 请求启动一次 AI Agent 会话；
随后建立一个 HTTP 流（可通过 SSE/WebSocket 等传输协议）用于实时监听事件；
每条事件都有类型和元信息（Metadata）；
AI Agent 持续将事件流式推送给 UI；
UI 端根据每条事件实时更新界面；
与此同时，UI 也可反向发送事件、上下文信息，供 AI Agent 使用。

AG-UI 不再是单向的信息流，而是一种真正的双向“心跳式”交互机制。AG-UI 就像 REST 是客户端到服务器请求的标准一样，AG-UI 将实时 AI Agent 更新流式传输回 UI 的标准。从技术上讲，AG-UI 使用服务器发送事件（SSE）将结构化 JSON 事件流式传输到前端。

每个事件都有一个显式的有效负载（比如：Python 字典中的 keys）：

TEXT_MESSAGE_CONTENT 用于令牌流式处理；
TOOL_CALL_START 以显示工具执行情况；
STATE_DELTA 更新共享状态（代码、数据等）；
AGENT_HANDOFF 在 AI Agent 之间顺利传递控制权。

并且 AG-UI 带有 TypeScript 和 Python 的 SDK，即插即用适用于任何技术栈，如下图所示：

MCP 之后又一 AI Agent 协议刷屏了：AG-UI 协议架构设计剖析-AI.x社区

在上图中，来自 AI Agent 的响应并不特定于任何工具包。这是一个标准化的 AG-UI 响应。

AG-UI 提供了前端 TypeScript 和后端 Python 的 SDK，可无缝接入到现有 AI Agent 代码中，核心模块包括：

RunAgentInput：运行 AI Agent 的输入参数；
Message：用户助手通信和工具使用；
Context：提供给 AI Agent 的上下文信息；
Tool：定义 AI Agent 可以调用的函数；
State：AI Agent 状态管理。

1.前端接入

npm install @ag-ui/core
npm install @ag-ui/client

2.后端 Python 端接入

from ag_ui.core import TextMessageContentEvent, EventType
from ag_ui.encoder import EventEncoder
# Create an event
event = TextMessageContentEvent(
    type=EventType.TEXT_MESSAGE_CONTENT,
    message_id="msg_123",
    delta="Hello, world!"
)
# Initialize the encoder
encoder = EventEncoder()
# Encode the event
encoded_event = encoder.encode(event)
print(encoded_event)
# Output: data: {"type":"TEXT_MESSAGE_CONTENT","messageId":"msg_123","delta":"Hello, world!"}\n\n