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}