使用 A2UI 與 CopilotKit Agents 建構生成式 UI 應用

生成式 UI 的演進與 A2UI 標準

Google A2UI 團隊於 2026 年 10 月 29 日發布技術說明，指出代理程式與使用者的互動正從純文字對話轉向豐富的圖形介面。過去代理程式只能用文字堆疊回應，例如列出多個假期方案的細節，卻沒有標準方式能在對話中直接呈現可選列表、地圖或日期選擇器。生成式 UI 就是為了解決這個痛點：代理程式可以依請求內容，在執行階段建構介面，提供可互動的體驗。要實作這項技術，需要一種描述介面的方式，以及一套連接代理程式與應用程式、並負責渲染介面的代理程式堆疊。

A2UI（Agent-to-UI）是 Google 推出、與框架無關的開放標準，專為生成式 UI 設計。代理程式以資料形式描述介面，應用程式再用現有元件繪製。這套標準在設計上與傳輸方式無關，涵蓋從受控生成到開放式程式碼生成的整個光譜。在受控端，開發者預先建構每個元件，由代理程式選擇要渲染哪一個以及使用什麼資料；在開放端，代理程式可輸出 HTML、JavaScript 或 Dart 程式碼。其中最受歡迎的是 A2UI 的宣告式模式：代理程式組裝預先宣告的元件與函式，用共同語言從現有元件目錄生成介面。

安全性與技術架構優勢

A2UI 重視安全性，採用宣告式資料格式，而非可執行程式碼。客戶端維護一份受信任的元件目錄，代理程式自行發明、不在目錄內的內容，會在顯示前被攔截。此外，這個格式對大型語言模型友善，載荷是扁平、小型的 JSON 訊息列表，以 ID 互相引用，代理程式可以逐步送出，客戶端也能邊收邊渲染。

這套標準與框架無關，也具備可攜性：同一份回應可透過 React、Lit、Angular、SwiftUI、Jetpack Compose（Android）或 Flutter（跨平台）渲染，Vue 或終端機等社群渲染器也支援。前端開發者只需建立一次建構模組，再由代理程式依每次請求組合。基礎目錄提供 18 種通用原語，涵蓋配置、顯示、輸入與容器。生產環境的應用程式通常會定義自訂目錄，內容包括由代理程式填入座標的即時地圖等現有前端渲染內容。

CopilotKit 與 A2UI 的整合機制

CopilotKit 提供代理程式整合堆疊，支援 LangChain、AWS Strands、Google ADK 等框架，用來建構面向使用者的代理程式應用程式。它的工具組包含聊天介面與執行階段，並使用 A2UI 渲染器，支援 React 與 Angular，也提供 Vue 與 Slack 的自訂 A2UI 渲染器。CopilotKit 建立在 AG-UI（Agent-User Interaction Protocol）之上，AG-UI 支援 A2UI 載荷，並提供可跨多個代理程式後端使用的代理程式 SDK。

代理程式送出 A2UI 操作後，AG-UI 以類型化事件傳到客戶端。使用者做出任何動作時，數值會沿同一條串流回傳。A2UI 可搭配任何與 AG-UI 相容的代理程式運作，包括 Google ADK、LangChain、Mastra 與 Strands；無論代理程式跑在哪個框架上，設定方式都相同。

實作設定與雙向互動流程

設定 A2UI 應用，需要把代理程式連接到 CopilotKit，並定義代理程式可以使用的元件。以 Google ADK 為例，ag_ui_adk 套件會包裝 ADK 代理程式，在 FastAPI 上作為 AG-UI 端點提供服務。客戶端需要把端點註冊到 CopilotKit 執行階段，並定義代理程式可繪製的元件，把每個定義對應到渲染器，再將目錄傳給 CopilotKit 提供者。描述內容會放進代理程式提示，Zod 模式則負責驗證回傳的屬性。

A2UI 表面是雙向的，元件具反應性，因此可以做多步驟流程。使用者在介面上的任何動作，例如選擇日期或航班，都會沿同一條串流回傳，代理程式再用這些數值重新送出表面。這個循環仰賴綁定到資料路徑的輸入，以及帶有動作、並指明要回傳哪些路徑的按鈕。驗證在客戶端執行，錯誤訊息直接顯示在欄位旁，直到按鈕觸發，綁定的數值才會送給代理程式。代理程式重新送出時使用相同的表面 ID，因此航班搜尋、結果、乘客資料與確認等流程，都會留在同一個表面上。

技術效益與開發資源

在 AG-UI 之上執行 A2UI，有幾項好處。伺服器端設定極簡，目錄在設定時傳給代理程式，只需在客戶端註冊即可。生成過程在專用子代理程式中進行，目錄與協議規則不會占用主代理程式的上下文視窗，表面也隨子代理程式的產出串流到客戶端。輸出具備自我修復能力：無效的生成結果會被攔截，並回傳特定錯誤供修正，確保不會顯示損壞的內容。重試次數用盡時，表面會解析為一則簡短訊息，對話繼續進行，不會卡在錯誤狀態。

開發者可以用指令 `npx copilotkit@latest create --name my-app --framework a2ui` 建立 starter 應用程式。CopilotKit Dojo 提供可運行的 A2UI 示範，包含固定伺服器端模式、針對自訂目錄的動態模式，以及將無效的首次渲染修復為有效渲染的錯誤恢復範例。