Google + CopilotKit 联合出品

让 AI Agent
安全生成 UI

A2UI 是一个开放的声明式 UI 协议，让 AI 代理能够跨平台安全渲染丰富的交互界面，无需执行任意代码。

开始使用官方文档

v0.8

当前版本

Apache 2.0

开源协议

支持框架

a2ui-response.json

安全声明式

流式渲染

跨平台

Core Features

四大核心特性

为 AI 时代的 UI 交互而生，解决跨信任边界的安全渲染问题

安全优先

Security by Design

使用声明式数据格式，非可执行代码。Agent 只能使用预先批准的组件，从架构层面杜绝 UI 注入攻击风险。

了解更多

LLM 友好

LLM-Friendly Format

扁平化 JSON 结构，专为大语言模型逐 token 生成优化。邻接列表模型支持高效解析和增量更新。

了解更多

框架无关

Framework Agnostic

同一份 A2UI 响应可在 React、Angular、Flutter 或原生移动平台渲染，使用各平台的本地组件。

了解更多

渐进渲染

Progressive Rendering

支持流式传输 UI 更新，用户可实时看到界面逐步构建。即时响应，体验流畅自然。

了解更多

How It Works

工作原理

A2UI 通过声明式协议实现 AI Agent 与客户端的安全通信

STEP 01

用户发送消息

用户向 AI Agent 发送请求，例如"帮我找附近的餐厅"

STEP 02

Agent 生成 A2UI

AI Agent 生成描述 UI 的 A2UI 消息（JSON 格式的组件树）

STEP 03

流式传输

消息流式传输到客户端，支持边生成边渲染

STEP 04

本地渲染

客户端使用本地组件（React/Flutter/Angular）渲染界面

STEP 05

用户交互

用户与 UI 交互，事件发送回 Agent

STEP 06

响应更新

Agent 根据交互响应新的 A2UI 消息，界面动态更新

架构概览

用户

请求

AI Agent(Gemini, GPT...)

A2UI JSON

客户端(React, Flutter...)

渲染

原生 UI

在线体验 · 无需安装

立即体验 A2UI Composer

直接在浏览器中使用可视化工具构建和测试 A2UI 界面，
拖拽组件、实时预览、一键导出 JSON

打开演示

由 CopilotKit

可视化构建

拖拽组件快速搭建 UI，所见即所得

实时预览

即时查看渲染效果，秒级响应

导出 JSON

一键生成标准 A2UI 格式代码

A2UI Composer

点击打开 →

点击进入全屏演示

Code Example

代码示例

一份 A2UI 响应，多个平台原生渲染

1{
2  "type": "surface",
3  "surface_id": "main_content",
4  "components": [
5    {
6      "id": "card_1",
7      "type": "card",
8      "props": {
9        "title": "Italian Restaurant",
10        "subtitle": "0.5 km away",
11        "image": "https://..."
12      },
13      "children": ["rating_1", "btn_1"]
14    },
15    {
16      "id": "rating_1",
17      "type": "rating",
18      "props": { "value": 4.5, "count": 128 }
19    },
20    {
21      "id": "btn_1",
22      "type": "button",
23      "props": {
24        "label": "View Details",
25        "action": "view_restaurant"
26      }
27    }
28  ]
29}