谷歌推 A2UI 0.9：AI Agent 终于能画界面了

行业快讯

谷歌发布 A2UI 0.9 标准，让 AI Agent 通过 JSON 描述生成可交互界面，解决了 Agent UI 的动态性和安全性问题，支持 React、Flutter 等主流框架。

谷歌推 A2UI 0.9：AI Agent 终于能画界面了

谷歌昨天（4月18日）发布了 A2UI 0.9，这是一个专门为 AI Agent 设计的生成式 UI 标准。简单说，就是让 AI 不再只会吐文字，而是能直接「画」出可交互的界面——从表单、按钮到数据可视化组件，都能用结构化的 JSON 描述出来，前端负责渲染。

这事儿的意义在于：过去 AI Agent 要么只能输出纯文本，要么得开发者手写一堆 UI 代码来适配 Agent 的输出。现在有了统一标准，Agent 和前端之间有了「共同语言」，开发效率能提升一大截。

A2UI 架构示意图，展示 AI Agent 通过 JSON 描述 UI，前端渲染器负责呈现

声明式 UI：Agent 说「要什么」，不说「怎么做」

A2UI 的核心思路是声明式（Declarative）。Agent 不需要关心具体的渲染逻辑，只需要用 JSON 描述「我要一个表单，里面有两个输入框和一个提交按钮」，前端渲染器会根据这个描述生成对应的 UI 组件。

这种设计有两个好处：

  1. 安全性：Agent 生成的是数据结构，不是可执行代码。前端渲染器可以做严格的校验和沙箱隔离，避免 XSS 或代码注入风险。这对企业级应用尤其重要——你不可能让 Agent 直接往页面里塞任意 JavaScript。

  2. 跨框架兼容：同一份 JSON 描述，可以用 React 渲染，也可以用 Flutter 或 Angular 渲染。谷歌这次直接提供了 React 官方渲染器，并更新了 Flutter、Lit、Angular 的适配方案。对多端应用来说，这意味着一套 Agent 逻辑可以跑在 Web、移动端、桌面端。

举个例子，Agent 想生成一个航班查询结果的卡片，A2UI 的 JSON 可能长这样：

{
  \"type\": \"card\",
  \"children\": [
    {
      \"type\": \"text\",
      \"content\": \"CA1234 北京 → 上海\",
      \"style\": \"heading\"
    },
    {
      \"type\": \"row\",
      \"children\": [
        {\"type\": \"text\", \"content\": \"起飞: 08:30\"},
        {\"type\": \"text\", \"content\": \"到达: 11:00\"}
      ]
    },
    {
      \"type\": \"button\",
      \"label\": \"预订\",
      \"action\": \"book_flight\",
      \"params\": {\"flight_id\": \"CA1234\"}
    }
  ]
}

前端渲染器拿到这个 JSON，直接渲染成卡片组件。用户点击「预订」按钮时，触发 book_flight 动作，Agent 接收到事件后继续处理。整个流程不需要 Agent 写一行 UI 代码。

0.9 版本带来了什么

A2UI 其实去年就有早期版本在内部测试，这次 0.9 是首个公开发布的稳定版本。主要更新包括：

1. 共享 Web 核心库和官方 React 渲染器

谷歌提供了一个标准的 Web 核心库（@a2ui/core），封装了 JSON 解析、组件映射、事件处理等基础能力。React 渲染器（@a2ui/react）是官方维护的参考实现，开箱即用。

对开发者来说，接入成本很低：

npm install @a2ui/core @a2ui/react

然后在 React 组件里这样用：

import { A2UIRenderer } from '@a2ui/react';

function AgentChat() {
  const [uiSpec, setUiSpec] = useState(null);

  // Agent 返回的 JSON 描述
  useEffect(() => {
    fetchAgentResponse().then(data => setUiSpec(data.ui));
  }, []);

  return <A2UIRenderer spec={uiSpec} onAction={handleAction} />;
}

2. Agent SDK：Python 优先

谷歌同步发布了 Agent SDK，目前支持 Python（通过 pip 安装）。这个 SDK 封装了生成 A2UI JSON 的常用方法，Agent 开发者不需要手写 JSON，直接调 API 就行：

from a2ui import Card, Text, Button

card = Card([
    Text(\"CA1234 北京 → 上海\", style=\"heading\"),
    Button(\"预订\", action=\"book_flight\", params={\"flight_id\": \"CA1234\"})
])

ui_json = card.to_json()

谷歌表示后续会推出 Go 和 Kotlin 版本的 SDK，覆盖更多后端技术栈。

3. 客户端自定义函数

A2UI 0.9 允许前端注册自定义函数，Agent 可以在 UI 描述中调用这些函数。比如前端注册了一个 formatCurrency 函数，Agent 生成的 UI 可以直接引用：

{
  \"type\": \"text\",
  \"content\": {\"function\": \"formatCurrency\", \"args\": [12345.67]}
}

前端渲染时会执行 formatCurrency(12345.67)，返回 ¥12,345.67。这种机制让 Agent 可以复用前端的业务逻辑，而不是把所有格式化、计算都在后端做一遍。

4. 客户端与服务器数据同步

这是个比较实用的功能。Agent 生成的 UI 可能包含表单或可编辑组件，用户修改数据后，A2UI 会自动把变更同步回 Agent。Agent 可以基于最新数据动态更新 UI，形成一个实时交互的闭环。

比如用户在表单里选了「经济舱」，Agent 立刻重新计算价格并更新 UI 上的金额显示，不需要用户手动提交或刷新。

5. 改进的错误处理

之前版本如果 Agent 生成的 JSON 格式有问题，前端渲染器会直接崩溃或显示空白。0.9 版本加强了错误处理：

  • JSON 校验失败时，渲染器会显示友好的错误提示，而不是白屏
  • 支持部分渲染：即使某个组件描述有问题,其他正常的组件仍然会显示
  • 提供详细的错误日志，方便开发者调试

生态已经在动了

谷歌在公告里提到，A2UI 生态正在快速发展，目前已经有几个集成方案：

  • AG2：微软开源的 AutoGen 框架的升级版，支持多 Agent 协作。AG2 已经内置了 A2UI 支持，Agent 可以直接生成 UI 组件。
  • A2A 1.0：Agent-to-Agent 通信协议，允许不同 Agent 之间传递 UI 描述。比如一个 Agent 负责查询数据，另一个 Agent 负责生成可视化图表，两者通过 A2A + A2UI 协作。
  • json-render：一个轻量级的 JSON 驱动 UI 渲染库，现在也支持 A2UI 格式。

这些集成方案的出现，说明 A2UI 不是谷歌自己玩的闭环标准，而是在往开放生态的方向走。对开发者来说，这意味着可以在不同的 Agent 框架、UI 库之间自由切换，不会被锁定在某个技术栈上。

跟现有方案比怎么样

生成式 UI 不是新概念。之前已经有一些方案在尝试解决类似问题：

  1. Vercel 的 AI SDK UI：主要面向 Next.js 生态，Agent 可以通过 React Server Components 生成 UI。但这个方案跟 React 绑定太深，迁移成本高。

  2. LangChain 的 Streamlit 集成：用 Python 写 Agent 逻辑，用 Streamlit 快速搭 UI。问题是 Streamlit 的交互模式比较受限，复杂场景下不够灵活。

  3. 自定义 JSON 格式：很多团队自己定义了一套 JSON 格式来描述 UI。但每家格式不一样,没法复用,也没有统一的渲染器和工具链。

A2UI 的优势在于：

  • 跨框架：不绑定特定前端技术栈，React、Flutter、Angular 都能用
  • 标准化：有明确的规范文档和参考实现，不是各家自己瞎搞
  • 安全性：从设计层面就考虑了沙箱隔离和权限控制
  • 工具链完整：SDK、渲染器、错误处理、调试工具一应俱全

当然，A2UI 也不是完美的。目前 0.9 版本的组件库还比较基础，只覆盖了常见的表单、卡片、列表等组件。复杂的数据可视化（比如自定义图表）、富文本编辑器这些还需要开发者自己扩展。谷歌表示后续会逐步丰富组件库，并开放社区贡献机制。

对开发者意味着什么

如果你在做 AI Agent 相关的产品，A2UI 值得关注。几个典型场景：

1. 企业内部工具

很多公司在用 Agent 做内部的数据查询、报表生成、工单处理。以前这些 Agent 只能输出文本或表格，用户体验很差。有了 A2UI，Agent 可以生成带筛选器、排序、分页的交互式表格，甚至直接嵌入操作按钮（比如「批准」「驳回」）。

2. 客服和销售助手

客服 Agent 可以根据用户问题动态生成 FAQ 卡片、产品推荐列表、订单详情页。销售 Agent 可以生成报价单、合同预览、签约流程引导。这些 UI 都是实时生成的，不需要提前写死所有可能的页面。

3. 开发者工具

Agent 辅助编程的场景越来越多。A2UI 可以让 Agent 生成代码 diff 预览、测试结果面板、性能分析图表。用户可以直接在 UI 上点击「应用修改」或「查看详情」，而不是复制粘贴一堆文本。

4. 多模态交互

A2UI 不仅支持传统的点击、输入，还预留了语音、手势等多模态交互的扩展接口。未来 Agent 可以根据用户的语音指令动态调整 UI 布局，或者在 AR/VR 环境中生成 3D 界面。

如果你想试试

谷歌已经在 GitHub 上开源了 A2UI 的核心库和渲染器（仓库地址：google/a2ui）。文档还在完善中，但基本的 Quick Start 和 API Reference 已经可用。

如果你的 Agent 后端用的是 OpenAI 格式的 API（比如通过 OpenAI Hub 调用各种模型），可以这样集成 A2UI：

import openai
from a2ui import Card, Text, Button

# 配置 OpenAI Hub
openai.api_base = \"https://api.openai-hub.com/v1\"
openai.api_key = \"your-openai-hub-key\"

def generate_ui_with_agent(user_query):
    # 调用模型生成回复
    response = openai.ChatCompletion.create(
        model=\"gpt-4\",
        messages=[
            {\"role\": \"system\", \"content\": \"你是一个航班查询助手，用 A2UI 格式返回结果\"},
            {\"role\": \"user\", \"content\