AG-UI: 标准化 Agent 与 UI 通信的开放事件协议

引言

在 AI Agent 应用开发中，一个核心挑战是如何让 Agent 后端与前端 UI 进行高效、实时的通信。传统的做法是为每个应用定制化实现流式输出、工具调用、状态同步等功能，导致代码难以复用、框架绑定紧密。

AG-UI（Agent-Graphical User Interface）应运而生——它是一个开放的事件协议，旨在标准化 "Agent 后端 ↔ 用户界面" 之间的通信方式，让不同的 Agent 框架与前端组件能够无缝互操作。

本文将深入介绍 AG-UI 的设计理念、三种 Generative UI 类型、以及它与 Vercel AI SDK 的关系。

什么是 Generative UI？

Generative UI（生成式 UI）指的是部分或完全由 AI Agent 生成的用户界面，而非完全由人类设计师和开发者预先手工编写。其核心思想是：随着 Agent 能力增强，界面的结构、布局、呈现方式都可以动态适应用户意图和应用上下文。

Generative UI 可以出现在应用的多个位置：

Generative UI 的三种类型

根据 UI 的"表达自由度"和"控制权归属"，Generative UI 可分为三种类型：

1. 静态 Generative UI（Static）

Agent 从预定义的组件库中选择要渲染的组件，不生成任意 UI。

特点：

• ✅ 保证高视觉质量和品牌一致性
• ✅ 可预测性强，适合关键业务场景
• ⚠️ 组件数量随功能线性增长，维护成本高

适用场景： 高流量、对 UI 一致性要求极高的产品界面

2. 开放式 Generative UI（Open-Ended）

Agent 返回完整的 HTML/iframe 等任意 UI 代码，前端直接渲染。

特点：

• ✅ 表达自由度高，可渲染任意复杂界面
• ✅ 前端与 Agent 解耦，快速原型开发
• ⚠️ 安全风险（XSS）、性能考量
• ⚠️ 难以迁移到原生环境，样式一致性难维护

适用场景： 快速原型、复杂可视化、需要高度自定义的场景

3. 声明式 Generative UI（Declarative）

Agent 返回结构化的 UI 规范（如 Card、List、Form 的 Schema），前端根据规范渲染。

特点：

• ✅ 平衡灵活性与一致性
• ✅ 同一规范可在多平台渲染（React、移动端、桌面端）
• ⚠️ 自定义 UI 模式受限
• ⚠️ 不同实现可能产生视觉差异

适用场景： 需要跨平台支持、希望平衡开发效率与 UI 一致性的应用

AG-UI 核心概念

协议设计

AG-UI 是一个事件驱动协议，定义了 Agent 与 UI 之间通信的标准事件类型：

核心特性

1. 流式通信：支持 Server-Sent Events (SSE) 和 WebSocket
2. 状态同步：统一的上下文状态管理
3. 工具调用标准化：工具调用与结果有标准的事件格式
4. UI 意图表达：Agent 可表达对 UI 的控制意图（如显示弹窗、高亮元素）
5. 协议无关性：不绑定特定 Agent 框架或前端技术栈

AG-UI vs Vercel AI SDK

这是两个经常被拿来比较的组件，但它们实际上处于不同层次，更多是互补而非竞争关系。

定位差异

关系类比

┌─────────────────────────────────────────────────┐
│              你的 AI 应用                         │
├─────────────────────────────────────────────────┤
│  AG-UI 协议层（事件流标准化）                      │
│    ↓ 事件转换                                     │
│  Vercel AI SDK（模型调用、流生成）                 │
│    ↓ API 调用                                    │
│  LLM（GPT-4o、Claude 等）                        │
└─────────────────────────────────────────────────┘

• AI SDK 负责："怎么调用模型" / "产出流"
• AG-UI 负责："怎么把 Agent 的运行过程用标准事件表达并接到 UI"

如何结合使用

AG-UI 的官方示例直接使用 @ai-sdk/openai 作为模型调用层：

import { openai } from '@ai-sdk/openai'
import { Agent, run, tool } from 'agent-runtime'
import { streamText } from 'ai'

// 使用 AI SDK 生成流
const result = await streamText({
  model: openai('gpt-4o'),
  tools: {
    // 定义工具...
  },
})

// 将 AI SDK 的输出包装成 AG-UI 事件流
// 由 AG-UI Agent 框架处理并发送给前端

生态映射

AG-UI 作为协议层，支持上述所有类型，并提供统一的事件通信标准。

选型建议

选择 AI SDK + AI SDK UI：

• 快速构建 Next.js 聊天/生成式 UI 应用
• 需要消息持久化、工具调用 UI 等开箱即用功能
• 已在 Vercel/Next.js 生态中

选择 AG-UI：

• 需要更"Agentic"的 UI 交互标准
• 想要统一表达工具调用、状态同步、UI 意图、HITL（人机协作）等
• 希望后端 Agent 框架可替换
• 需要跨框架、跨前端的互操作性

两者结合：

• 用 AI SDK 处理模型调用
• 用 AG-UI 标准化事件通信
• 获得最佳的开发体验与互操作性

总结

AG-UI 为 AI Agent 应用开发带来了一个重要的抽象层——它不关心你用什么模型、不关心你用什么框架，它只关心：Agent 与 UI 之间如何用标准化的方式通信。

这种协议优先的设计理念，使得 Agent 应用的前后端可以真正解耦，为未来的多框架、多平台互操作奠定了基础。

如果你正在构建 Agent 应用，不妨考虑将 AG-UI 纳入技术栈，让你的应用具备更强的可扩展性和互操作性。

参考链接：

• CopilotKit - Generative UI
• AG-UI 官方文档
• Vercel AI SDK