Skip to content

客户端设置指南

使用适合你平台的渲染器将 A2UI 集成到你的应用中。

渲染器

渲染器 平台 状态
Lit (Web Components) Web ✅ 稳定
Angular Web ✅ 稳定
Flutter (GenUI SDK) 移动端/桌面端/Web ✅ 稳定
React Web 🚧 2026 年 Q1 推出
SwiftUI iOS/macOS 🚧 计划于 2026 年 Q2 推出
Jetpack Compose Android 🚧 计划于 2026 年 Q2 推出

Web Components (Lit)

⚠️ 注意

Lit 客户端库尚未发布到 NPM。请在 未来几天内回来查看。

npm install @a2ui/web-lib lit @lit-labs/signals

Lit 渲染器使用：

  • Message Processor（消息处理器）：管理 A2UI 状态并处理传入的消息
  • <a2ui-surface> 组件：在你的应用中渲染界面
  • Lit Signals：为自动 UI 更新提供响应式状态管理

TODO：添加经过验证的设置示例。

查看工作示例： Lit shell 示例

Angular

⚠️ 注意

Angular 客户端库尚未发布到 NPM。请在 未来几天内回来查看。

npm install @a2ui/angular @a2ui/web-lib

Angular 渲染器提供：

  • provideA2UI() 函数：在你的应用配置中配置 A2UI
  • Surface 组件：渲染 A2UI 界面
  • MessageProcessor 服务：处理传入的 A2UI 消息

TODO：添加经过验证的设置示例。

查看工作示例： Angular restaurant 示例

Flutter (GenUI SDK)

flutter pub add flutter_genui

Flutter 使用 GenUI SDK，它提供原生 A2UI 渲染。

文档： GenUI SDK | GitHub | GenUI Flutter 包中的 README

连接到智能体

你的客户端应用需要： 1. 从智能体接收 A2UI 消息（通过传输层） 2. 使用消息处理器处理消息 3. 将用户操作发送回智能体

常见的传输选项： - Server-Sent Events (SSE)：从服务器到客户端的单向流式传输 - WebSockets：双向实时通信 - A2A 协议：具有 A2UI 支持的标准化智能体到智能体通信

TODO：添加传输实现示例。

参见： 传输层指南

处理用户操作

当用户与 A2UI 组件交互（点击按钮、提交表单等）时，客户端： 1. 从组件捕获操作事件 2. 解析操作所需的任何数据上下文 3. 将操作发送到智能体 4. 处理智能体的响应消息

TODO：添加操作处理示例。

错误处理

需要处理的常见错误： - 无效的 Surface ID：在收到 beginRendering 之前引用的界面 - 无效的组件 ID：组件 ID 在界面内必须唯一 - 无效的数据路径：检查数据模型结构和 JSON Pointer 语法 - 模式验证失败：验证消息格式是否符合 A2UI 规范

TODO：添加错误处理示例。

下一步