点击上方蓝字加入我们
01
Agent 时代的 UI 有什么不一样
02
AG-UI：给交互定义一套共同的表达
@ag-ui/client，无须更换整套 UI 框架，因为 AG-UI 并不定义 UI 组件及渲染机制。
03
A2UI：Agent 描述 UI，前端再渲染
-
为什么有组件目录（Catalog）？ 这是一种安全机制：所有可渲染的 UI 组件（如 Button、Card、Text 等），都需要事先在目录中注册。Agent 只能“请求使用”这些白名单组件，而无法注入任意脚本或超出范围的元素。 -
同一份描述可以跨端复用。 前提是双方支持相同的组件版本与 Catalog，但不保证像素级的一致。 -
A2UI 是一种动态 UI 描述协议，所以其传输可以基于简单的 HTTP ；也可以基于前面的 AG-UI 或 A2A 协议来承载。
-
AG-UI 是后端只发送任务过程中的事件和数据；UI 如何展现完全由前端负责 -
A2UI 则是由前后端选定支持的组件目录，然后 Agent 直接返回 UI 描述消息
{
"version": "v0.9",
"createSurface": {
"surfaceId": "refund",
"catalogId": "https://refund-demo.local/catalog/v1"
}
} {
"version": "v0.9",
"updateComponents": {
"surfaceId": "refund",
"components": [{
"id": "root",
"component": "Column",
"appearance": "refund-card",
"children": ["eyebrow", "heading", "status-badge", "product", "details", "amount", "labelhint", "actions", "footer"]
}, {
"id": "eyebrow",
"component": "Text",
"appearance": "eyebrow",
"text": "REFUND REVIEW / 退款确认"
}, {
"id": "heading",
"component": "Column",
"appearance": "card-heading",
"children": ["title", "subtitle"]
}, {
"id": "confirm",
"component": "Button",
"variant": "primary",
"child": "confirm-label",
"action": {
"event": {
"name": "confirm_refund",
"context": {
"taskId": "0eebb393-201d-4e59-9dde-b739341e996d"
}
}
}
}, {
"id": "cancel",
"component": "Button",
"variant": "secondary",
"child": "cancel-label",
"action": {
"event": {
"name": "cancel_refund",
"context": {
"taskId": "0eebb393-201d-4e59-9dde-b739341e996d"
}
}
}
}]
}
}04
MCP Apps：让工具带着交互 UI
...
const result = await app.callServerTool({
name: "decide_refund",
arguments: { taskId, decision: "confirm" }
});
render(result);
...
-
create-mcp-app：从零到一个 MCP App项目的脚手架 -
add-app-to-server：给已有的 MCP Server 增加交互式 UI -
convert-web-app：普通 Web App 转化成 MCP App，快速与 Agent 集成
05
总结：区别与选择
-
已有前端 UI 页面，需要接入 Agent 的回复、进度和状态，优先考虑 AG-UI，界面仍由前端设计。 -
需要按任务动态组合表单、卡片，考虑 A2UI；但前提是客户端具备匹配的组件目录与渲染器。 -
外部工具需要配套地图、编辑器等交互界面，希望随工具一起复用，考虑 MCP Apps，但宿主必须支持该扩展。
