为什么 A2UI 能在前端 Agent-to-User Interface 领域大火？

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 A2UI

A2UI（Agent to UI）是一种用于 Agent 驱动界面的声明式用户界面协议。人工智能 Agent 能够生成丰富的交互式用户界面，这些用户界面可以原生渲染于各种平台（Web、移动设备、桌面设备），而无需执行任意代码。

A2UI (Agent to UI) is a declarative UI protoc成为 Agent-to-User Interface 王炸？ol for agent-driven interfaces. AI agents generate rich, interactive UIs that render natively across platforms (web, mobile, desktop) without executing arbitrary code.

A2UI 的设计旨在解决 Agent 在互操作性、跨平台、生成式或基于模板的 UI 响应方面面临的特定挑战。该项目的核心理念是：

安全至上：运行由 LLM 生成的任意代码可能存在安全风险。A2UI 是一种声明式数据格式，而非可执行代码。客户端应用程序维护一个受信任的、预先批准的 UI 组件“目录”，例如：卡片、按钮、文本框等，Agent 只能请求渲染该目录中的组件。
对 LLM 友好且可增量更新：UI 以带有 ID 引用的扁平组件列表的形式表示，LLM 可以轻松地增量生成这些组件，从而实现渐进式渲染和响应式用户体验。随着对话的进行，Agent 可以根据新的用户请求高效地对 UI 进行增量更改。
框架无关且可移植：A2UI 将 UI 结构与 UI 实现分离。Agent 发送组件树及其关联数据模型的描述，而客户端应用程序负责将这些抽象描述映射到其原生组件，无论是 Web Component、Flutter 组件、React 组件、SwiftUI 视图，还是其他任何组件。来自 Agent 的同一个 A2UI JSON 有效负载可以在基于不同框架构建的多个不同客户端上渲染。
灵活性：A2UI 还具有开放的注册表模式，允许开发人员将服务器端类型映射到自定义客户端实现，从原生移动组件到 React 组件。通过注册“智能包装器”，开发者可以将任何现有的 UI 组件（包括用于传统内容的安全 iframe 容器）连接到 A2UI 的数据绑定和事件系统。这使得安全性牢牢掌握在开发人员手中，使其能够直接在自定义组件逻辑中强制执行严格的沙箱策略和“信任阶梯”，而不是仅仅依赖核心系统。

A2UI 的典型用例包括：

动态数据收集：Agent 根据对话的具体上下文生成定制表单（日期选择器、滑块、输入框）。
远程子 Agent：协调 Agent 将任务委托给远程专业 Agent，该 Agent 返回一个 UI 有效负载，以便在主聊天窗口中渲染。
自适应工作流：企业 Agent 根据用户的查询动态生成审批仪表板或数据可视化图表。

目前 A2UI 在 Github 通过 Apache-2.0 许可证开源，短短时间内有超过 10k 的 star，1k 的 fork，是一个值得关注的前端开源项目。

A2UI 的原理

在多 Agent 系统中，Agent 通常远程运行（位于不同的服务器），其无法直接操作用户界面，只能发送消息。传统的方法是在 iframe 中发送 HTML/JavaScript，但是有以下诸多缺点：

笨重，视觉效果不协调
安全性复杂
与应用程序风格不匹配

而 A2UI 选择通过 JSON 来描述用户界面，其功能如下：

LLM 生成结构化输出
可通过任何传输方式（A2A、AG UI、SSE、WebSocket）传输
客户端使用其原生组件进行渲染

结果就是客户端完全控制安全性和样式，此时 Agent 生成的用户界面更加自然流畅。

{"surfaceUpdate": {"surfaceId": "booking", "components": [  {"id": "title", "component": {"Text": {"text": {"literalString": "Book Your Table"}, "usageHint": "h1"}}},  {"id": "datetime", "component": {"DateTimeInput": {"value": {"path": "/booking/date"}, "enableDate": true}}},  {"id": "submit-text", "component": {"Text": {"text": {"literalString": "Confirm"}}}},  {"id": "submit-btn", "component": {"Button": {"child": "submit-text", "action": {"name": "confirm_booking"}}}}]}}

{"dataModelUpdate": {"surfaceId": "booking", "contents": [  {"key": "booking", "valueMap": [{"key": "date", "valueString": "2025-12-16T19:00:00Z"}]}]}}

{"beginRendering": {"surfaceId": "booking", "root": "title"}}

接着客户端将这些消息渲染为原生组件（Angular、Flutter、React 等）。

如何使用 A2UI

首先克隆相关仓库：

ui前端(为什么 A2UI 能在前端 Agent-to-User Interface 领域大火？)

git clone https://github.com/google/A2UI.gitcd A2UI

接着设置 API Key：

export GEMINI_API_KEY="your_gemini_api_key"

接着执行 Agent:

cd samples/agent/adk/restaurant_finderuv run .

最后运行客户端（前端），打开一个新的终端窗口：

# Install and build the Lit renderercd renderers/litnpm installnpm run build# Install and run the shell clientcd ../../samples/client/lit/shellnpm installnpm run dev