Google A2UI 团队与 CopilotKit 介绍如何构建生成式 UI 应用

Google 跟踪代码管理器（noscript）

2026年10月29日

Google A2UI 团队

Atai Barkai，CopilotKit 首席执行官

智能体与用户的交互如今正从文本交流演变为丰富的 UI。直到最近，大多数对话还是这样的：

用户：“帮我找一个三月去巴厘岛的度假套餐。”智能体：（用散文形式列出六个套餐，每个都包含日期、酒店、航班、价格）用户：“要那个含早餐的五晚套餐。”智能体：“这是链接。你可以在运营商的网站上预订。”

智能体能够规划行程，但所有内容都以大段文字的形式返回。它们没有标准方式来在对话本身之中渲染可选择的套餐列表、目的地地图，或引导你完成其余预订流程的日期选择器。

生成式 UI 是让智能体在运行时构建界面的层，界面形态由每个请求的需求决定——为用户带来丰富、交互式的体验。实现这一点需要两部分：一种描述 UI 的方式，以及一套智能体技术栈，将你的智能体连接到你的应用并渲染该 UI。

A2UI（Agent-to-UI）是 Google 推出的框架无关的生成式 UI 开放标准。智能体将界面描述为数据，你的应用则用你已有的组件将其绘制出来。它在设计上是传输无关的。

CopilotKit 提供智能体集成技术栈，可与“LangChain”、“AWS Strands”、“Google ADK”等智能体框架集成，用于构建面向用户的智能体应用。它提供了一套工具包，用于借助 A2UI 协议构建丰富的应用，包括聊天界面、运行时，并在 React 和 Angular 中利用 A2UI 渲染器。CopilotKit 还为 Vue 和 Slack 提供自定义 A2UI 渲染器。

什么是 A2UI？

生成式 UI 涵盖了一系列方法，从使用预定义的高阶组件，到让你的 AI 智能体灵活决定如何构建 UI。

在受控的一端，你预先构建每个组件，智能体选择渲染哪一个以及使用什么数据。这种方式品牌安全，但不允许基于用户意图进行深度定制和个性化。在开放的一端，智能体返回用 HTML、Javascript 和/或 Dart 编写的原始 UI 程序，在沙箱化的 iframe 中渲染。这涵盖了你未曾预料到的任何情况，代价是界面会偏离你的设计系统，并且会执行模型编写的代码。

A2UI 贯穿整个谱系。它既参与受控生成，配合 Typesafe 的 Jev 等决策模型，也参与可能输出 A2UI JSON 消息的开放式代码生成。声明式模式——智能体组装预先声明的组件和函数——是最受欢迎的方式。A2UI 是声明 UI 意图的框架无关标准，因此本地或远程智能体都能使用一种通用语言，从你现有的组件目录生成你的 UI。

安全优先。A2UI 是声明式数据格式，而非可执行代码。客户端维护一个受信任组件的目录，因此智能体在该集合之外发明的任何内容都会在到达屏幕之前被拦截。

对 LLM 友好且支持流式传输。载荷是一个由小型 JSON 消息组成的扁平列表，这些消息通过 ID 相互引用，因此智能体可以增量地发出它们，客户端则在组件到达时进行渲染。

框架无关且可移植。同一份响应可通过 React、Lit、Angular、SwiftUI、Jetpack Compose（Android）或 Flutter（多平台）渲染，也可通过 Vue 的社区渲染器，甚至终端渲染。

前端开发者现在可以一次性交付这些构建块，智能体则针对每个请求将它们组合起来。

基础目录提供 18 个通用原语，涵盖布局、显示、输入和容器。智能体可以仅凭这同样的 18 个原语，根据请求的需要组合出完全不同的界面。

基础目录刻意保持精简，因此大多数生产应用会定义自己的自定义目录。自定义组件可以是你前端已经渲染的任何内容，包括一张实时地图——智能体向其填入坐标，而你的渲染器绘制路线。

A2UI 与 CopilotKit 如何协同工作

CopilotKit 构建于 AG-UI（Agent-User Interaction Protocol，智能体-用户交互协议）之上，该协议支持 A2UI 载荷，并跨多种智能体后端提供智能体 SDK。

你的智能体发出 A2UI 操作。AG-UI 将它们作为类型化事件传送到客户端。当用户执行任何操作时，这些值会沿同一流被送回。

A2UI 可与任何兼容 AG-UI 的智能体配合使用。Google ADK、LangChain、Mastra 和 Strands 等框架都兼容 AG-UI，因此无论你的智能体运行在哪个框架上，设置方式都相同。

在你的应用中设置 A2UI

设置归结为两件事：将你的智能体连接到 CopilotKit，以及定义智能体允许使用哪些组件。

以 Google ADK 为例，ag_ui_adk 包可包装任何 ADK 智能体，并将其作为 AG-UI 端点提供在 FastAPI 上：

from fastapi import FastAPI

from google.adk.agents import LlmAgent

from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint

root_agent = LlmAgent(

name="flight_agent",

model="gemini-3.8-flash",

instruction="Help users find and book flights. Call generate_a2ui to show results.",

use_in_memory_services=True,

)

app = FastAPI()

add_adk_fastapi_endpoint(app, adk_agent, path="/")

Python

已复制

在应用端，你在 /api/copilotkit 处将该端点注册到 CopilotKit 运行时。这只是几行标准设置代码，Google ADK 快速入门中已有介绍，而且不需要任何 A2UI 特有的内容。

A2UI 本身从客户端开启，因为你的组件已经在那里了。定义智能体允许绘制什么，将每个定义映射到一个渲染器，然后把目录传给 CopilotKit provider。

import { CopilotKit, CopilotChat } from '@copilotkit/react-core/v2';

} from '@copilotkit/a2ui-renderer';

import { z } from 'zod';

const catalogDefinitions = {

FlightCard: {

description: 'A flight result with airline, times, and stops.',

} satisfies CatalogDefinitions;

const catalogRenderers = {

FlightCard: MyFlightCard, // your React component

} satisfies CatalogRenderers ;

const catalog = createCatalog(catalogDefinitions, catalogRenderers, {

catalogId: 'flight-catalog',

includeBasicCatalog: true,

描述会进入智能体的提示词，因此模型知道何时该使用 FlightCard 而不是通用卡片。Zod schema 会校验它发回的 props。

A2UI 配置可以提前在服务器上设置好，也可以动态创建，随请求从客户端发送到服务器。上面的 ADK 代码使用了动态配置，这就是它使用 generate_a2ui 而未定义它的原因。文档涵盖了这两种方法。

这就是 CopilotKit 路径。你也可以直接用 @ag-ui/client 消费事件流，并将 A2UI 操作交给任何兼容的渲染器：@a2ui/react，或 Flutter、Lit 或 Angular 的对应实现。

构建双向 A2UI 界面

大多数智能体生成的 UI 都是一次性的。智能体绘制出某些内容，你读取它，而一旦有任何变化，它就会过时。

A2UI 界面是双向的，组件是响应式的，这使得多步骤流程成为可能。用户在界面上执行的任何操作（选择日期、选择航班、输入乘客信息）都会沿同一条流返回，智能体随后使用这些值重新发出该界面。

下面是一个端到端预订流程的高层架构示例，其中 Cloud Run 上的 AG-UI 智能体将 A2UI 界面流式传输到 CopilotKit 前端。

往返能够成立靠两件事：绑定到数据路径的输入，以及携带一个动作、指明要回传哪些路径的按钮。

{ "id": "cabin", "component": "ChoicePicker", "variant": "mutuallyExclusive",

"options": [ { "label": "Economy", "value": "eco" },

{ "label": "Business", "value": "biz" } ],

"value": { "path": "/booking/cabin" } },

{ "id": "confirm", "component": "Button", "child": "confirm_label",

"action": { "event": { "name": "confirmBooking",

"context": { "cabin": { "path": "/booking/cabin" },

"email": { "path": "/booking/email" } } } } }

JSON

已复制

校验在客户端运行，因此错误的电子邮件会就地显示错误，而无需调用模型。在按钮触发之前，不会有任何内容到达智能体。

然后客户端发送绑定的值，智能体针对同一个 surfaceId 重新发出。这就是整个流程如何存在于同一个界面上：航班搜索、结果、乘客信息和确认。

在 AG-UI 上运行 A2UI 的好处

每个 AG-UI 集成都继承这些好处，因此你不必自己构建它们：

最少的服务器端设置：目录在设置时到达智能体，因此只需在客户端注册它即可。

在专用子智能体中生成：目录和协议规则不会进入主智能体的上下文窗口，并且界面会在子智能体生成时流式传输到客户端。

自愈输出：无效的生成会被捕获，具体错误会被送回以进行修正，因此不会有损坏的内容到达屏幕。

优雅失败：当重试耗尽时，界面会解析为一条简短消息，对话会继续，而不是陷入错误状态。

创建一个完整的 A2UI + CopilotKit 应用。这会创建一个带有 Copilotkit Agent 集成的 A2UI 起始应用。

npx copilotkit@latest create --name my-app --framework a2ui

Shell

已复制

CopilotKit Dojo 中有可运行的 A2UI 演示：固定服务器端 schema、针对自定义目录的动态 schema，以及一个错误恢复示例，其中无效的首次渲染会修复为有效渲染。

A2UI Composer

CopilotKit A2UI 文档

探索如何使用 CopilotKit 构建生成式 UI 智能体，或深入阅读 A2UI 文档，了解如何将 A2UI 与你选择的任何框架集成。

快速、可靠的 A2UI，支持可替换的推理格式

2026 年 10 月 27 日

AI Cloud 教程 影响力

2026 年 10 月 28 日

通过 Google Play 服务中的 LiteRT 实现更小的应用和更快的 GPU 推理

2026 年 10 月 28 日