精選 AI Agents Google Open Source UI Claude Code

Google A2UI：當 AI Agent 學會「說 UI」

Google 開源新標準 A2UI，讓 AI Agent 用宣告式 JSON 生成豐富互動介面。上線數天即獲 12.9K 星。這對 Agent 開發意味著什麼？

2026年3月13日 • 8 min read • 作者：Claude World

AI Agent 會寫程式、會搜尋網路、會執行 Shell 指令。但你叫它顯示一個漂亮的互動儀表板？它只能給你一大段文字。

Google 剛開源了解決方案：A2UI（Agent-to-User Interface）——上線幾天就拿到 12.9K GitHub 星星。

GitHub: github.com/google/A2UI（Apache 2.0）

問題：Agent 不會「說 UI」

今天的 AI Agent 只能用文字溝通。當它需要顯示結構化資訊——比較表格、訂票表單、資料視覺化——最好的情況是 Markdown，最差是一坨 JSON。

這是根本性限制：

  • 純聊天介面 無法處理複雜互動（日期選擇器、滑桿、多步驟表單）
  • 直接生成程式碼（生成 React/HTML）是安全噩夢——你等於在跑 LLM 生成的程式碼
  • 跨平台 不可能——Agent 沒辦法同時生成 Flutter widget 和 React 元件

A2UI 的設計哲學：安全如資料，表達如程式碼

Google 的做法很優雅：Agent 送出宣告式 JSON，描述 UI 的「意圖」，而非實作。

{
  "type": "card",
  "children": [
    { "type": "text", "content": "找到餐廳" },
    { "type": "image", "src": "https://..." },
    { "type": "button", "label": "立即預訂", "action": "book" }
  ]
}

客戶端應用程式把這些抽象元件對應到自己的原生 widget——React 元件、Flutter widget、SwiftUI view，什麼都行。

為什麼這很重要

  1. 安全優先：LLM 不產出可執行程式碼，Agent 只能請求預先批准的元件
  2. LLM 友好：扁平化元件列表 + ID 引用——模型容易逐步生成
  3. 框架無關：同一份 JSON 在 web、mobile、desktop 都能渲染
  4. 增量更新：Agent 可以只更新特定元件，不需重新生成整個 UI

架構：4 步流程

Agent (LLM) → A2UI JSON → 傳輸 (A2A/AG UI) → 客戶端 Renderer → 原生 UI
  1. 生成：Agent 建立描述 UI 元件的 JSON
  2. 傳輸：透過 Google A2A 協定、AG UI 或任何傳輸層發送
  3. 解析：客戶端的 A2UI Renderer 解析 JSON
  4. 渲染：抽象元件對應到原生實作

真實使用場景

這不是理論。A2UI 能實現純文字 Agent 做不到的事：

  • 動態表單：Agent 根據對話上下文生成帶日期選擇器和滑桿的訂票表單
  • 遠端子 Agent：旅遊 Agent 在主聊天視窗中回傳豐富的 UI 卡片
  • 自適應儀表板：企業 Agent 即時生成審批流程和資料視覺化

對 Claude Code 開發者的意義

如果你用 Claude Code 開發，A2UI 打開了新可能：

Agent Teams + UI 輸出

想像 Claude Code Agent Teams 中，每個 Agent 能回傳豐富的 UI 元件而非純文字。Code review Agent 可以回傳互動式 diff 檢視器。部署 Agent 可以顯示即時狀態儀表板。

MCP + A2UI 整合

MCP Server 目前回傳文字結果。有了 A2UI，MCP Server 可以回傳結構化 UI 元件讓客戶端原生渲染。你的自訂 MCP 工具可以顯示圖表、表單或互動式表格。

突破終端機

Claude Code 目前活在終端機裡。A2UI 提供了一個標準，定義了 Agent 突破純文字介面後該怎麼做——而且是開放標準，不綁定任何廠商。

競爭格局

A2UI 不是唯一的方案：

方案優點缺點
A2UI（Google）安全優先、框架無關、開放標準早期階段（v0.8）、渲染器有限
AG UI即時串流、React 導向與 React 生態系強耦合
直接生成 HTML/React最大彈性安全風險、單一框架
Markdown通用、簡單無互動性、佈局有限

A2UI 的賭注是安全 + 可攜性比最大表達力更重要。考慮到企業市場，這可能是正確的方向。

快速開始

git clone https://github.com/google/A2UI.git
cd A2UI
export GEMINI_API_KEY="your_key"

# 跑餐廳搜尋 demo
cd samples/agent/adk/restaurant_finder
uv run .

目前支援：

  • 渲染器：Lit（web）、Flutter（mobile）
  • Agent 框架：Google ADK，LangGraph/Genkit 即將推出
  • 傳輸層：A2A Protocol、AG UI

我們的觀點

A2UI 解決了一個真實問題。AI Agent 的純終端機時代正在結束。隨著 Agent 越來越強大（Claude Code 已經能自主管理整個專案），它們需要更豐富的方式與人類溝通。

問題不是 Agent 會不會生成 UI——而是哪個標準會贏。Google 的優勢：

  • 開源（Apache 2.0）
  • 框架中立
  • 安全優先設計
  • 既有生態系（Flutter、Angular、Android）

缺什麼：React 支援（web 端最主流的框架）和更多 Agent 框架整合。兩者都在路線圖上。

結論：如果你在開發跟人類互動的 AI Agent，把 A2UI 加入收藏。它今天是 v0.8，但核心概念——Agent 透過安全的宣告式格式「說 UI」——就是未來。

原文：github.com/google/A2UI