🎨 AG-UI Protocol 详解

2026热门 前端交互 新协议

🌍 什么是 AG-UI Protocol？

世界上有一种隔阂，叫"我能干但UI不知道"——Agent后端能力很强，但前端界面是静态的，Agent想操作UI还得hack一堆DOM。就像一个顶级厨师被困在厨房外，明明能做出满汉全席，但连灶台都碰不到。

AG-UI（Agent-to-User Interface）Protocol 是一套定义AI Agent如何与前端用户界面交互的开放标准协议。它解决了Agent生态中一个长期被忽视的问题：Agent怎么和用户的界面通信？

这事儿在2026年变得特别重要，因为Agent从"后台工具"变成了"前台协作伙伴"——用户期望直接在界面上看到Agent的操作过程、中间状态和实时反馈。

🗺️ 2026年Agent协议全景图

2026年初的Agent协议生态就像2016年的JavaScript框架——6个协议来自4个组织，每个解决不同层的问题：

📐 AG-UI 核心概念

事件流架构（Event-Driven）

AG-UI 采用事件流（Event Stream）的方式实现Agent和UI的实时通信：

# AG-UI 事件流示例
# Agent向后端发送事件 → 前端实时渲染

# 1. Agent开始工作
{ type: "RUN_STARTED", agentId: "writer-001" }

# 2. 思考过程（Streaming）
{ type: "TEXT_MESSAGE_START", messageId: "msg-1" }
{ type: "TEXT_MESSAGE_CONTENT", delta: "正在分析" }
{ type: "TEXT_MESSAGE_CONTENT", delta: "市场数据..." }
{ type: "TEXT_MESSAGE_END", messageId: "msg-1" }

# 3. 工具调用
{ type: "TOOL_CALL_START", toolName: "web_search" }
{ type: "TOOL_CALL_ARGS", args: { query: "AI Agent trends 2026" } }
{ type: "TOOL_CALL_END", toolName: "web_search", result: "..." }

# 4. 工作完成
{ type: "RUN_FINISHED", agentId: "writer-001", status: "success" }

核心事件类型

• TEXT_MESSAGE：文本消息，支持流式输出（打字机效果）
• TOOL_CALL：工具调用事件，前端可以实时展示"Agent正在使用XX工具"
• STATE_SNAPSHOT：Agent内部状态快照，前端可渲染状态面板
• STEP_STARTED / STEP_FINISHED：任务步骤，前端可渲染进度条
• FEEDBACK_REQUEST：Agent请求用户反馈，前端弹出确认/选择对话框

🤖 OpenClaw 中的 AG-UI / A2UI 实战

OpenClaw 实现了自己的 A2UI（Agent-to-UI Infrastructure），功能类似 AG-UI，专门为OpenClaw生态优化：

1. Canvas：Agent的可视化输出

# OpenClaw Canvas - Agent通过Canvas向前端渲染内容

# Agent生成可视化内容
canvas(action="present", 
  url="https://miaoquai.com/glossary/ag-ui-protocol-explained.html",
  width=800, height=600)

# Agent执行JavaScript与页面交互
canvas(action="eval",
  javaScript="document.querySelectorAll('h2').forEach(h => h.style.color='#7c3aed')")

# Agent捕获页面快照
canvas(action="snapshot", format="png")

# Agent进行A2UI推送（OpenClaw特有的UI交互协议）
canvas(action="a2ui_push",
  jsonl='{ "type": "render", "component": "chart", "data": {...} }')

2. Sub-Agent 的实时流式输出

# OpenClaw sub-agent 支持流式输出到父session
# 这就是 AG-UI 中 "Event Stream" 的实现

sessions_spawn(
  task="搜索并分析AI市场数据，实时输出进展",
  mode="run",
  runtime="subagent",
  streamTo="parent"  # 关键！实时流式输出到父session
)

# 父session会实时看到：
# → [researcher] 开始搜索 AI Agent 市场数据...
# → [researcher] 使用 web_search 工具搜索...
# → [researcher] 找到12篇相关文章
# → [researcher] 正在分析第一篇文章...
# → [researcher] 分析完成，生成报告...

3. Browser 自动化：Agent操作UI

# OpenClaw Browser - Agent直接操作浏览器UI
# 这是 AG-UI 的另一种实现方式

# 打开页面
browser(action="open", 
  targetUrl="https://miaoquai.com")

# 获取页面快照（类似AG-UI的STATE_SNAPSHOT）
browser(action="snapshot", refs="aria")

# 执行操作（点击、输入、滚动）
browser(action="act", request={
  kind: "click",
  ref: "aria-搜索按钮"
})

browser(action="act", request={
  kind: "fill",
  ref: "aria-搜索框",
  text: "AI Agent"
})

# 截图查看结果
browser(action="screenshot")

4. Message 交互：Agent与用户对话

# OpenClaw Message - Agent主动与用户交互
# 类似 AG-UI 的 FEEDBACK_REQUEST

# 发送消息给用户
message(action="send",
  channel="oc_c942dfd09730eb94bf838c6519c115e9",
  message="📋 报告已生成，请审核：\n1. 市场趋势分析 ✓\n2. 竞品对比 ✓\n3. 策略建议 ✓")

# 回复特定消息（Thread）
message(action="thread-reply",
  messageId="msg-xxx",
  message="收到审核意见，正在修改...")

🔄 AG-UI vs A2UI vs 传统API

⚡ 为什么要关注 AG-UI？

• Agent正在走向前台：2026年Agent不再只是后端工具，而是直接与用户交互的前台角色
• 实时体验是标配：用户不想等10秒看一个完整结果，他们要实时看到Agent在做什么
• 标准化降低成本：有了AG-UI标准，你不需要为每个Agent都从零写前端集成
• 多Agent协作需要UI协调：多个Agent同时工作时，前端需要知道怎么展示每个Agent的状态

🔗 相关术语

• MCP 协议
• A2A 协议
• ACP 协议
• Canvas 画布
• 浏览器自动化
• 流式响应

📚 延伸阅读

• OpenClaw 实战教程
• AI 术语百科
• Agent Mesh 详解