MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析原創(chuàng)

發(fā)布于 2025-5-16 06:34

瀏覽

0收藏

隨著 AI Agent 在企業(yè)中應(yīng)用越來(lái)越廣，AI Agent 在落地過(guò)程中，MCP 解決了 AI Agent 到 Tools 之間的通信標(biāo)準(zhǔn)，A2A 解決了 AI Agent 到 AI Agent 之間的通信標(biāo)準(zhǔn)。但是仍缺少一塊：用戶(hù)到 AI Agent 的通信協(xié)議。

MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析-AI.x社區(qū)

AG-UI 協(xié)議橫空出世，專(zhuān)為解決前端應(yīng)用與 AI Agent 的通信交互而設(shè)計(jì)。

MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析-AI.x社區(qū)

AG-UI 讓你能夠輕松地在網(wǎng)頁(yè)、APP、應(yīng)用程序或嵌入式設(shè)備中集成 AI 助手、AI 客服和智能問(wèn)答 UI，避免了為每個(gè)應(yīng)用程序重復(fù)開(kāi)發(fā)基礎(chǔ)功能的麻煩，也省去了處理交互邏輯的煩惱。

AG-UI 完善了 AI 協(xié)議棧，專(zhuān)注于構(gòu)建 AI Agent 與用戶(hù)前端之間的橋梁。它采用事件驅(qū)動(dòng)的設(shè)計(jì)，定義了16種標(biāo)準(zhǔn)事件，并支持 SSE、WebSocket 和 Webhook 等傳輸方式，與 LangGraph、CrewAI 等框架兼容。

它就像是為你的前端安裝了一個(gè) AI “大腦”，無(wú)需綁定到特定的模型或框架，一套協(xié)議就能滿(mǎn)足所有的交互需求。

為什么需要 AG-UI？

每個(gè) AI Agent 后端都有自己的工具調(diào)用、ReAct 樣式規(guī)劃、狀態(tài)差異和輸出格式機(jī)制。

如果你使用 LangGraph，前端將實(shí)現(xiàn)自定義的 WebSocket 邏輯、雜亂的 JSON 格式和特定于 LangGraph 的 UI 適配器。

但要遷移到 CrewAI/Dify 等，一切都必須進(jìn)行調(diào)整，這樣工作量大大增加。

MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析-AI.x社區(qū)

Github 地址：

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

使用文檔地址：

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

下文對(duì) AG-UI 詳細(xì)剖析之。

AG-UI 架構(gòu)設(shè)計(jì)剖析

第一、AG-UI 架構(gòu)設(shè)計(jì)

AG-UI 使用一個(gè)輕量級(jí)、事件驅(qū)動(dòng)的協(xié)議來(lái)連接 AI Agents 和前端應(yīng)用程序，架構(gòu)設(shè)計(jì)如圖所示：

MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析-AI.x社區(qū)

Front-end：通過(guò) AG-UI 進(jìn)行通信的應(yīng)用（聊天或任何啟用 AI 應(yīng)用）；
AI Agent A：前端可以直接連接的 AI Agent，無(wú)需通過(guò)代理；
Secure Proxy：一個(gè)中介代理，安全地將前端的請(qǐng)求路由到多個(gè) AI Agents；
AI Agent B 和 C：由代理服務(wù)管理的 AI Agents。

第二、AG-UI 工作機(jī)制

AG-UI 的核心工作機(jī)制非常簡(jiǎn)潔而優(yōu)雅，如下圖所示：

客戶(hù)端通過(guò) POST 請(qǐng)求啟動(dòng)一次 AI Agent 會(huì)話(huà)；
隨后建立一個(gè) HTTP 流（可通過(guò) SSE/WebSocket 等傳輸協(xié)議）用于實(shí)時(shí)監(jiān)聽(tīng)事件；
每條事件都有類(lèi)型和元信息（Metadata）；
AI Agent 持續(xù)將事件流式推送給 UI；
UI 端根據(jù)每條事件實(shí)時(shí)更新界面；
與此同時(shí)，UI 也可反向發(fā)送事件、上下文信息，供 AI Agent 使用。

AG-UI 不再是單向的信息流，而是一種真正的雙向“心跳式”交互機(jī)制。AG-UI 就像 REST 是客戶(hù)端到服務(wù)器請(qǐng)求的標(biāo)準(zhǔn)一樣，AG-UI 將實(shí)時(shí) AI Agent 更新流式傳輸回 UI 的標(biāo)準(zhǔn)。從技術(shù)上講，AG-UI 使用服務(wù)器發(fā)送事件（SSE）將結(jié)構(gòu)化 JSON 事件流式傳輸?shù)角岸恕?/p>

每個(gè)事件都有一個(gè)顯式的有效負(fù)載（比如：Python 字典中的 keys）：

TEXT_MESSAGE_CONTENT 用于令牌流式處理；
TOOL_CALL_START 以顯示工具執(zhí)行情況；
STATE_DELTA 更新共享狀態(tài)（代碼、數(shù)據(jù)等）；
AGENT_HANDOFF 在 AI Agent 之間順利傳遞控制權(quán)。

并且 AG-UI 帶有 TypeScript 和 Python 的 SDK，即插即用適用于任何技術(shù)棧，如下圖所示：

MCP 之后又一 AI Agent 協(xié)議刷屏了：AG-UI 協(xié)議架構(gòu)設(shè)計(jì)剖析-AI.x社區(qū)

在上圖中，來(lái)自 AI Agent 的響應(yīng)并不特定于任何工具包。這是一個(gè)標(biāo)準(zhǔn)化的 AG-UI 響應(yīng)。

AG-UI 提供了前端 TypeScript 和后端 Python 的 SDK，可無(wú)縫接入到現(xiàn)有 AI Agent 代碼中，核心模塊包括：

RunAgentInput：運(yùn)行 AI Agent 的輸入?yún)?shù)；
Message：用戶(hù)助手通信和工具使用；
Context：提供給 AI Agent 的上下文信息；
Tool：定義 AI Agent 可以調(diào)用的函數(shù)；
State：AI Agent 狀態(tài)管理。

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