Build Generative UI Apps with A2UI & CopilotKit Agents

使用 A2UI 与 CopilotKit Agents 构建生成式用户界面 - Google 开发者博客

Google Tag Manager (noscript)

结束 Google Tag Manager (noscript)

HTML

使用 A2UI 与 CopilotKit Agents 构建生成式用户界面

2026年10月29日

Google A2UI 团队

Atai Barkai

CopilotKit 首席执行官

分享

• Facebook

• Twitter

• LinkedIn

• 邮件

代理与用户之间的交互正在从文本交流演变为丰富的用户界面。直到最近，大多数对话看起来都像这样：

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

代理可以规划行程，但所有信息都以大段文字形式返回。它们没有标准方式在对话中直接呈现可选套餐列表、目的地地图或日期选择器等交互元素。

生成式用户界面是让代理在运行时构建界面的层，界面形态由每次请求的具体需求决定——为用户提供丰富且交互式的体验。实现这一点需要两个要素：一种描述用户界面的方式，以及将代理与应用程序连接并渲染该界面的代理堆栈。

• A2UI（Agent-to-UI）是 Google 的开放标准，与框架无关，用于生成式用户界面。代理以数据形式描述界面，而您的应用程序使用现有组件进行渲染。其设计上与传输方式无关。

• CopilotKit 提供了代理集成堆栈，可与 "LangChain"、"AWS Strands"、"Google ADK" 等代理框架集成，用于构建面向用户的代理应用程序。它提供了用于构建丰富应用的工具包，包括聊天界面、运行时，并在 React 和 Angular 中利用 A2UI 渲染器。CopilotKit 还为 Vue 和 Slack 提供了自定义的 A2UI 渲染器。

什么是 A2UI？

生成式用户界面涵盖了一系列方法，从使用预定义的高阶组件，到赋予 AI 代理决定如何构建用户界面的灵活性。

在受控端，您提前构建每个组件，代理选择要渲染的组件及其数据。这种方式品牌安全，但无法根据用户意图进行深度定制和个性化。在开放端，代理返回一个用 HTML、JavaScript 和/或 Dart 编写的原始用户界面程序，在沙箱 iframe 中渲染。这种方式可以处理您未计划到的任何情况，但代价是界面可能偏离您的设计系统，并执行模型生成的代码。

A2UI 覆盖整个光谱。它与 Typesafe 的 Jev 等决策模型参与受控生成，也支持可能生成 A2UI JSON 消息的开放式代码生成。声明模式（代理组装预声明组件和函数）是最受欢迎的方式。A2UI 是声明用户界面意图的框架无关标准，因此本地或远程代理可以使用通用语言，从您现有的组件目录中生成用户界面。

• 首重安全。A2UI 是声明式数据格式而非可执行代码。客户端维护受信任组件目录，因此代理生成的任何超出该目录范围的内容在到达屏幕前都会被拦截。

• 与大语言模型友好且支持流式传输。负载是一个由 ID 相互引用的小型 JSON 消息平面列表，因此代理可以逐步生成，客户端在消息到达时逐步渲染组件。

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

前端开发人员现在可以一次性发布这些构建模块，而代理会根据每个请求进行组合。

Sorry, your browser doesn't support playback for this video

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

基础目录刻意保持简洁，因此大多数生产应用都会定义自己的自定义目录。自定义组件可以是前端已经渲染的任何内容，包括代理在绘制路线时填充坐标的实时地图。

A2UI 和 CopilotKit 如何协同工作

CopilotKit 基于 AG-UI（Agent-User Interaction Protocol）构建，支持 A2UI 负载，并为多个代理后端提供 Agent SDK。

您的代理会发出 A2UI 操作。AG-UI 将它们作为类型化事件传递到客户端。当用户执行任何操作时，值会通过同一流返回。

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

在您的应用中设置 A2UI

设置主要涉及两件事：将您的代理连接到 CopilotKit，以及定义代理被允许使用的组件。

以 Google ADK 为例，ag_ui_adk 包可以包装任何 ADK 代理，并通过 FastAPI 作为 AG-UI 端点提供服务：

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.",
)

adk_agent = ADKAgent(
    adk_agent=root_agent,
    app_name="flights",
    user_id="demo_user",
    use_in_memory_services=True,
)

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

Python

已复制

在应用端，您需要在 /api/copilotkit 路径上将该端点注册到 CopilotKit 运行时。这只需要几行标准设置，详见 Google ADK 快速入门指南，且不需要任何 A2UI 特定的配置。

A2UI 本身从客户端启用，您的组件已经在客户端。定义代理被允许绘制的内容，将每个定义映射到渲染器，并将目录传递给 CopilotKit 提供者。

import { CopilotKit, CopilotChat } from '@copilotkit/react-core/v2';
import {
  createCatalog,
  type CatalogDefinitions,
  type CatalogRenderers,
} from '@copilotkit/a2ui-renderer';
import { z } from 'zod';

const catalogDefinitions = {
  FlightCard: {
    description: 'A flight result with airline, times, and stops.',
    props: z.object({
      airline: z.string(),
      departs: z.string(),
      arrives: z.string(),
      stops: z.number(),
    }),
  },
} satisfies CatalogDefinitions;

const catalogRenderers = {
  FlightCard: MyFlightCard, // your React component
} satisfies CatalogRenderers<typeof catalogDefinitions>;

const catalog = createCatalog(catalogDefinitions, catalogRenderers, {
  catalogId: 'flight-catalog',
  includeBasicCatalog: true,
});

<CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ catalog }}>
  <CopilotChat />
</CopilotKit>

JavaScript

描述会进入代理的提示信息，这样模型就知道何时使用FlightCard而不是通用卡片。Zod模式会验证它返回的属性。

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 演示：固定服务端模式、动态模式对接自定义目录，以及一个错误恢复示例，其中无效的首次渲染会自动修复为有效状态。

• A2UI Composer

• CopilotKit A2UI 文档

• 与任意代理框架集成使用 A2UI

探索如何使用 CopilotKit 构建生成式 UI 代理，或深入 A2UI 文档学习如何将 A2UI 集成到您选择的任意框架中。

发布于：

• 移动端

• Web

• AI

• 教程

• 操作指南

• 最佳实践

• 学习

• 影响力

• 解决方案

上一篇

下一篇

相关文章

列表

移动端

Web

教程

操作指南

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

2026年10月27日

AI

云服务

影响力

使用 Agents CLI 评估提升代理质量

2026年10月28日

公告

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

导航点