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

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

瀏覽

0收藏

隨著 AI Agent 在企業(yè)中應用越來越廣，AI Agent 在落地過程中，MCP 解決了 AI Agent 到 Tools 之間的通信標準，A2A 解決了 AI Agent 到 AI Agent 之間的通信標準。但是仍缺少一塊：用戶到 AI Agent 的通信協(xié)議。

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

AG-UI 協(xié)議橫空出世，專為解決前端應用與 AI Agent 的通信交互而設計。

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

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

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

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

為什么需要 AG-UI？

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

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

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

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

Github 地址：

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

使用文檔地址：

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

下文對 AG-UI 詳細剖析之。

AG-UI 架構(gòu)設計剖析

第一、AG-UI 架構(gòu)設計

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

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

Front-end：通過 AG-UI 進行通信的應用（聊天或任何啟用 AI 應用）；
AI Agent A：前端可以直接連接的 AI Agent，無需通過代理；
Secure Proxy：一個中介代理，安全地將前端的請求路由到多個 AI Agents；
AI Agent B 和 C：由代理服務管理的 AI Agents。

第二、AG-UI 工作機制

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

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

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

每個事件都有一個顯式的有效負載（比如：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)設計剖析-AI.x社區(qū)

在上圖中，來自 AI Agent 的響應并不特定于任何工具包。這是一個標準化的 AG-UI 響應。

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

RunAgentInput：運行 AI Agent 的輸入?yún)?shù)；
Message：用戶助手通信和工具使用；
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