跳到正文
新闻:Google 正式开源 A2UI

别光聊。
直接生成界面。

A2UI 是大模型 (LLM) 与前端之间的缺失一环。
将“文本气泡”升级为丰富的、原生的、可交互的应用程序。

A2UI 生成式 UI 画廊

构建下一代 App 的开发者的共同选择

生成式 UI 的 "握手协议"

A2UI (Agent-to-User Interface) 不是一个 UI 组件库,它是一个 协议标准。它解决了 AI 领域最大的难题: 如何让智能体安全地控制视觉界面?

A2UI 拒绝让 AI 编写危险的 HTML,而是通过结构化的 JSON 来协商意图。 你的 App 说“我会画图表”,Agent 说“这是一份数据,请画出来”。

是 JSON,非代码

Agent 发送声明式数据,你的代码库负责校验并渲染受控组件。

原生性能

渲染为宿主原生组件,减少额外 WebView 开销,并保留平台交互能力。

完全掌控

你定义设计系统。Agent 只是使用你提供的“乐高积木”来搭建。

赋能下一代
Agentic 体验

AI 旅行助手

不仅仅是聊航班。在对话框中直接展示实时票务、选座地图和预订流程。

对话式电商

将浏览转化为购买。直接展示商品轮播、尺码指南和支付按钮,无需离开聊天界面。

数据分析师

即时可视化 SQL 查询结果。将原始数据即刻渲染为交互式折线图、透视表和热力图。

工作原理

1

定义 (Define)

在代码库中创建一个组件注册表 (Registry),将 JSON 类型映射到 React/Vue 组件。

2

提示 (Prompt)

指示您的 LLM (GPT-4, Gemini) 输出符合您 Schema 定义的 JSON 数据。

3

渲染 (Render)

使用 `<AIOutput />` 组件解析数据流,并即时呈现原生 UI 界面。

协议流程

A2UI End-to-End Data Flow

通过声明式架构,实现 Agent 跨越信任边界安全生成 UI。

核心问题:Agent 需要具备 UI 能力

纯文本交互在处理复杂任务时低效且冗长。A2UI 允许 Agent 瞬间渲染出定制化的预订界面,而不是进行繁琐的“有空位吗?”式对话。

Comparison: Text Chat vs A2UI Reserve Table
纯文本聊天 A2UI 交互界面

A2UI 实战演示

观看智能体如何仅凭一张上传的照片,生成完整的景观设计师应用界面。

行业领袖的信赖

"

A2UI 非常适合 Flutter 的 GenUI SDK,因为它确保了每个平台上的每个用户都能获得高质量的原生体验。

V
Vijay Menon
Dart & Flutter 工程总监
"

它赋予了我们灵活性,让 AI 以新颖的方式驱动用户体验... 其声明式特性和对安全性的关注让我们能够快速、安全地进行实验。

D
Dimitri Glazkov
Google Opal 团队首席工程师
"

A2UI 带来了一种'原生优先'的方法:Agent 发送的是 UI 组件的描述,而非代码。您的应用将其映射到自己受信任的设计系统中,从而保持完美的品牌一致性和安全性。

M
Minko Gechev
Google Angular 产品负责人

常见问题 (FAQ)

A2UI 安全吗?
是的,非常安全。与生成并执行原始 HTML 或 JavaScript(存在严重 XSS 风险)的方案不同,A2UI 是纯数据驱动的。LLM 仅产生 JSON 数据,而您的客户端应用程序严格控制哪些组件可以被渲染。
它支持 Next.js / Vercel AI SDK 吗?
当然支持。A2UI 是一个开放协议,不是一种框架锁定。您可以将其与 Vercel AI SDK、LangChain 或任何其他 Agent 编排工具配合使用。我们提供了易于集成的适配器。
它是完全免费的吗?
是的。A2UI 是采用 Apache 2.0 许可证的开源项目,可依据许可证条款用于个人和商业项目。