Skip to content
CrewAI 文档版本 跟随上游 源快照 a4da2d34 更新于 2026-10-18

A2UI

生成式 UI 的声明式层级——智能体从你拥有的组件目录中组装出一个表面。

智能体组装 UI

基于工具的渲染将一个工具映射到一个组件:智能体选择一个组件,你来绘制它。A2UI 是生成式 UI 谱系的声明式层级——智能体不是选择单个组件,而是通过组合你定义的目录中的构建块来组装一个表面。

组件仍然由你拥有。智能体只能使用你的目录中的内容,因此它永远无法渲染你未交付的内容。智能体决定的是布局和数据——这些构建块如何组合成一个面板,以及其中放入什么。

NOTE

A2UI 可与 Flows 配合使用。下面的两种模式——动态模式和固定模式——都作为通过 AG-UI 提供的 Flows 运行,与本节的其余部分完全一样。

目录(每种模式都相同)

无论使用哪种后端模式,前端接线都相同:你在 <CopilotKit> provider 上通过 a2ui prop 注册一个目录。

tsx
import { CopilotKit } from "@copilotkit/react-core";
import { catalog } from "@/a2ui-catalog";

<CopilotKit runtimeUrl="/api/copilotkit" agent="assistant" a2ui={{ catalog }}>
  {/* ... */}
</CopilotKit>

目录(catalog)是以 catalog id 为键的一组 React 组件——一个 FlightCard、一个 HotelCard、一个 Chart,或你的应用需要的任何组件。智能体引用 catalog id;CopilotKit 用智能体提供的数据渲染你的组件。

NOTE

编写目录本身——id 模式、prop 映射和组合规则——比本页涵盖的内容更深入。完整的编写参考见 CopilotKit A2UI 文档。这里我们聚焦于两种后端模式,以及何时该选用哪一种。

两种后端模式

A2UI 后端有两种形态。在 dynamic 模式下,由智能体设计界面;在 fixed-schema 模式下,你预先编写布局,智能体只负责填充数据。

模式由谁设计布局后端可预测性
Dynamic智能体,基于对话无 A2UI 工具——自动注入布局新颖,需要 LLM 布局步骤
Fixed-schema你,预先设计后端工具返回信封确定性,无布局步骤

Dynamic

该 Flow 没有接入任何 A2UI 工具。为该智能体在运行时上启用 A2UI,它就会自动获得一个 generate_a2ui 工具。子智能体基于对话、针对你的目录设计出一个界面,将它逐步流式输出到前端,并通过「先校验、后重试」的恢复流程自愈无效输出。你只需编写一个普通的智能体化对话 Flow;工具会自动注入。

Register the catalog on the provider

与上面相同——通过 a2ui prop 传入你的目录:

tsx
<CopilotKit runtimeUrl="/api/copilotkit" agent="assistant" a2ui={{ catalog }}>
  {/* ... */}
</CopilotKit>

Serve a normal Flow

你的后端就是一个普通的智能体化对话 Flow。你无需定义 A2UI 工具——当为该智能体启用 A2UI 时,运行时会注入 generate_a2ui,子智能体会根据对话自行构思布局。

Let the agent compose

当某一轮需要 UI 时,智能体会从你的目录中组装出一个界面,边设计边把组件流式输出进来,并在任何无效输出到达屏幕之前将其修复。你注册的组件会按智能体选定的布局渲染。

Fixed-schema

当你已经知道布局、每次调用只有数据变化时,预先编写好界面,让智能体去填充。该 Flow 接入后端工具(例如 search_flights、search_hotels)。每个工具返回一个 A2UI 操作信封作为结果——createSurface -> updateComponents -> updateDataModel——由前端渲染出来。没有子智能体、没有生成过程、也没有恢复流程:布局 JSON 由你编写,只有数据在变。

安装提供信封辅助函数的工具包:

bash
pip install ag-ui-a2ui-toolkit

用工具包提供的辅助函数构建信封,并将其作为工具结果发出:

python
from ag_ui_a2ui_toolkit import (
    A2UI_OPERATIONS_KEY,
    create_surface,
    update_components,
    update_data_model,
)
from ag_ui_crewai.sdk import copilotkit_emit_tool_result, copilotkit_stream

该工具把 createSurface -> updateComponents -> updateDataModel 这些操作组装成一个以 A2UI_OPERATIONS_KEY 为键的信封,然后通过 copilotkit_emit_tool_result(...) 交回。由于布局是固定的,同一个工具总是产出相同的形状——只有值在每次调用时不同。

何时使用哪一种

Dynamic

布局事先未知,你希望智能体用你提供的原语组合出全新的界面。你获得了灵活性,代价是多一个 LLM 布局步骤。

Fixed-schema

布局已知,只有数据变化。更可预测、更具确定性——没有生成、没有恢复,布局路径上也没有 LLM。

两种模式共用同一套前端:一个目录,在 provider 上注册一次即可。当你的界面稳定时从 fixed-schema 开始;当你希望智能体设计出你未曾预料到的布局时,再选用 dynamic。

相关

BytesRouter 是社区翻译站点,所有译文仅供参考,一切以官方英文原文为准。