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

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

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 等，一切都必須進行調整，這樣工作量大大增加。

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 和前端應用程序，架構設計如圖所示：

• 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，即插即用適用于任何技術棧，如下圖所示：

在上圖中，來自 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

第三、AG-UI 關鍵特性

• ?? 輕量級：設計簡單，易于理解與擴展；
• ?? 支持多種傳輸協議：Server-Sent Events（SSE）、WebSocket、Webhook 任你選擇；
• ?? 真正雙向同步：支持實時對話、工具調用、上下文更新等；
• ?? 框架無關：LangGraph、CrewAI、Mastra 等框架均可無縫對接；
• ??? 寬松的 Schema 匹配策略：低耦合、高兼容，降低開發門檻；
• ?? 即插即用：開源協議，前端（比如：React/Vue）快速集成無門檻。

第四、AG-UI、A2A、MCP 協議對比

AG-UI 明確且專門針對 AI Agent-用戶交互層。它不與諸如 A2A（AI Agent 到 AI Agent 協議）和 MCP（模型上下文協議）等協議競爭。

比如：同一個 AI Agent 可能通過 A2A 與另一個 AI Agent 通信，同時通過 AG-UI 與用戶通信，同時調用由 MCP Server 提供的工具。

這些協議在 AI Agent 生態系統中起到互補的作用：

• AG-UI：處理人在循環中的交互和流式 UI 更新；
• A2A：促進 AI Agent 到 AI Agent 之間的通信和協作；
• MCP：在不同模型之間標準化工具調用和上下文處理。

本文轉載自??玄姐聊AGI??  作者：玄姐