Google A2UI：让 AI 智能体「开口说界面」

前言

如果你最近关注过 AI Agent、智能体工作流，或者"AI 生成界面"这类新方向，可能已经发现一个趋势：AI 正在从"会聊天"走向"会办事"。

但当 AI 真正进入订餐、填表、审批、数据录入这些现实任务时，纯文本对话就开始显得不够用了。很多场景下，用户真正需要的并不是一段回答，而是一个可以直接点击、填写和提交的界面。

Google A2UI 就是在这样的背景下出现的。它试图回答一个很关键的问题：

当 AI 不只是回答问题，而是要驱动真实交互时，界面该如何被安全地生成出来？

这篇文章会尽量不用过多术语，带你从最直观的使用场景出发，一步步理解 A2UI 是什么、为什么重要、它背后的设计思想是什么，以及它可能会怎样影响未来的 AI 应用形态。

先从一个日常场景说起
[什么是 A2UI？一句话解释](#什么是 A2UI？一句话解释 "#%E4%BB%80%E4%B9%88%E6%98%AF-a2ui%E4%B8%80%E5%8F%A5%E8%AF%9D%E8%A7%A3%E9%87%8A")
[为什么需要 A2UI？背景与挑战](#为什么需要 A2UI？背景与挑战 "#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81-a2ui%E8%83%8C%E6%99%AF%E4%B8%8E%E6%8C%91%E6%88%98")
[A2UI 的工作原理](#A2UI 的工作原理 "#a2ui-%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86")
三大设计理念
[A2UI 长什么样？看看真实的 JSON](#A2UI 长什么样？看看真实的 JSON "#a2ui-%E9%95%BF%E4%BB%80%E4%B9%88%E6%A0%B7%E7%9C%8B%E7%9C%8B%E7%9C%9F%E5%AE%9E%E7%9A%84-json")
[A2UI 与生态系统](#A2UI 与生态系统 "#a2ui-%E4%B8%8E%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F")
它与竞品有何不同？
现在能用吗？如何上手
总结与展望

先从一个日常场景说起

假设你打开一个 AI 助手，跟它说：

「帮我预订本周六晚上 7 点，4 人，靠窗的位置，忌花生过敏，在台北东区的日料餐厅。」

如果是传统聊天 AI，它会反问你：「请问几人？」「几点？」「有没有忌口？」......一来一回，可能要聊 6、7 句话才能收集完信息。

但如果有 A2UI，AI 会直接生成一个预订表单，日期选择器、时间下拉框、人数输入框、过敏声明勾选框，全都出现在你眼前，填完点提交就好了。

这就是 A2UI 想解决的问题：让 AI 智能体不只会"说话"，也会"画界面"。

什么是 A2UI？一句话解释

A2UI ，全称 Agent-to-User Interface，直译"智能体到用户界面"。它是 Google 在 2025 年 12 月开源的协议和配套库，核心功能只有一件事：

让 AI 智能体用"声明式 JSON"描述它想要呈现的界面，然后由前端应用负责把这份描述渲染成真实的 UI 组件。

换句话说，AI 不再输出 HTML 代码或 JavaScript，而是输出一份"UI 设计图纸"。

这份图纸会说：

我需要一个日期选择器
我需要一个提交按钮

然后你的 App 自己决定用什么样式把它画出来。

为什么需要 A2UI？背景与挑战

要理解 A2UI 的价值，需要先了解当今 AI 智能体面临的两个核心困境。

困境一：纯文字回复体验太差

现在绝大多数 AI 助手只能用文字交流。遇到需要填写复杂信息的任务，比如订餐、报销、填表，用户要反复输入，AI 要反复追问，效率极低，体验也不好。理想的做法是给用户一个交互式 UI 组件。

困境二：多智能体时代的"界面孤岛"问题

Google 早先推出了 A2A 协议（Agent-to-Agent），让不同公司的 AI 智能体可以互相协作，比如你公司的订单系统 AI 和供应商的库存系统 AI 可以直接"对话"。

但问题来了：一个远程的 AI 智能体，运行在另一家公司的服务器上，如何在你的应用界面里展示 UI？它根本无法直接操作你的 DOM（网页结构）。

A2UI 的工作原理

A2UI 把"生成 UI"和"执行 UI"彻底分开，整个流程分为四步：

生成：AI 智能体（用 Gemini 等模型）生成 A2UI JSON，描述要展示的组件和数据。
传输：通过 A2A 协议或 AG UI 等传输层发送给前端客户端。
解析：客户端的 A2UI 渲染器解析 JSON，查询本地"组件目录"。
渲染：用宿主 App 自己的原生组件（React、Flutter、Angular）渲染出来。

关键理解：AI 只描述"我需要什么组件"，真正"画出来"的工作由客户端完成。就像建筑师画图纸，施工队负责盖楼。图纸里不含水泥和砖头，只有设计意图。

三大设计理念

1. 安全优先

A2UI 是数据格式，不是可执行代码。客户端维护一份"可信组件目录"，AI 只能使用目录里已审核的组件，彻底杜绝 UI 注入攻击。

2. LLM 友好，支持流式更新

UI 用扁平化列表 + ID 引用表示，LLM 可以逐步生成，支持流式渲染和增量更新，用户不需要等 AI "想完"才能看到界面。

3. 框架无关，跨平台

同一份 A2UI JSON，可以在 Web（Angular、Lit）、移动端（Flutter）、桌面端渲染为原生组件，风格和宿主 App 完全一致。

A2UI 长什么样？看看真实的 JSON

以"餐厅预订表单"为例，AI 智能体会生成类似这样的 A2UI 响应：

json 复制代码

{
  "version": "0.8",
  "components": [
    {
      "id": "card-main",
      "type": "card",
      "props": { "title": "预订餐厅" },
      "children": ["date-picker", "time-picker", "party-size", "submit-btn"]
    },
    {
      "id": "date-picker",
      "type": "date-field",
      "props": {
        "label": "就餐日期",
        "defaultValue": "2025-12-21"
      }
    },
    {
      "id": "party-size",
      "type": "number-field",
      "props": {
        "label": "用餐人数",
        "min": 1,
        "max": 20,
        "defaultValue": 4
      }
    },
    {
      "id": "submit-btn",
      "type": "button",
      "props": {
        "label": "确认预订",
        "variant": "primary",
        "action": "submit"
      }
    }
  ]
}

这份 JSON 没有任何 HTML 或 JavaScript。它只是在"说"：

我需要一个卡片
里面有日期选择器
有人数输入框
还有提交按钮

至于这些组件长什么样，那是你的 React 组件说了算，风格完全由你控制。

A2UI 让智能体说 UI 的语言，但说的是意图，不是代码。

A2UI 与生态系统

A2UI 不是孤立存在的，它和一批协议、框架共同构成了"智能体 UI"的完整生态：

A2A 协议：智能体之间的通信标准，由 Google 发起，已捐给 Linux 基金会
AG UI：CopilotKit 开发的交互协议，负责前端与 AI 后端的实时事件通信
Google ADK：构建复杂 AI 智能体的开源框架，可配合 A2UI 使用
GenUI SDK：Flutter 端的 UI 生成 SDK，底层就是 A2UI
Gemini：生成 A2UI JSON 的 LLM，支持流式输出以实现渐进渲染
CopilotKit：贡献了 A2UI + AG-UI 集成实现，简化全栈开发

它与竞品有何不同？

在 AI 界面标准这个赛道上，各家都在抢跑。A2UI 的核心差异在于"原生优先"的哲学：

维度	A2UI（Google）	MCP Apps（Anthropic + OpenAI）
渲染方式	原生组件优先，React / Flutter / Angular 等	Web 优先，沙盒 iframe 渲染
跨平台	Web、移动端（Flutter）、桌面端	主要面向 Web
安全机制	组件目录白名单，不执行代码	iframe 沙盒隔离
样式一致性	与宿主 App 完全一致	iframe 内外样式可能不一致
开源协议	Apache 2.0	依项目而定

现在能用吗？如何上手

A2UI 目前是 v0.8 公开预览版（Public Preview），规范和实现都已可用，但仍在积极演进中。你可以通过以下方式体验：

bash 复制代码

# 1. 克隆仓库
git clone https://github.com/google/A2UI

# 2. 进入示例目录，运行 Quickstart Demo
cd A2UI/samples
npm install && npm start

# 你会看到 Gemini 驱动的智能体实时生成界面

支持的渲染框架：

Angular
Flutter
Lit（Web Components）
Markdown 渲染器（纯文本降级）

计划支持：

React
SwiftUI
更多社区贡献

总结与展望

我们来回顾一下 A2UI 的核心价值：

技术的发展常常不是一下子改变世界，而是先悄悄改变我们与工具交互的方式。A2UI 也许还处在比较早期的阶段，但它已经清楚地展示出一种新可能：未来的 AI，不只是聊天框里的回答机器，而是能根据任务即时搭建交互界面的"数字协作者"。

对开发者来说，A2UI 值得关注，不只是因为它来自 Google，更因为它触碰到了一个很核心的问题：当 Agent 变得越来越强，我们该如何让它们以安全、可控、又自然的方式进入真实产品？

如果你是第一次接触这个概念，希望这篇文章至少帮你建立了一个基本判断：A2UI 不只是一个新名词，它更像是 AI 应用从"文字时代"走向"界面时代"的一个信号。

接下来最值得关注的，也许不是 A2UI 会不会火，而是这种"Agent 生成 UI"的模式，会不会成为未来软件的一种常态。

延伸阅读

GitHub · google/A2UI

a2ui.org · 官方网站与示例