Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions docs/zh/agents.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# 智能体 (服务端)

智能体是服务端程序,负责响应用户请求生成 A2UI 消息。

实际的组件渲染由 [渲染器](renderers.md) 完成,
在消息传输到客户端之后 [传输](transports.md)。
智能体仅负责生成 A2UI 消息。

## 智能体如何工作

```
用户输入 → 智能体逻辑 → LLM → A2UI JSON → 发送到客户端
```

1. **接收** 用户消息
2. **处理** 使用 LLM (Gemini, GPT, Claude 等)
3. **生成** A2UI JSON 消息作为结构化输出
4. **发送** 到客户端通过传输

来自客户端的用户交互可以被视为新的用户输入。

## 示例智能体

A2UI 仓库包含您可以以此学习的示例智能体:

- [餐厅查找器](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder)
- 带有表单的餐桌预订
- 使用 ADK 编写
- [联系人查找](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup)
- 带有结果列表的搜索
- 使用 ADK 编写
- [Rizzcharts](https://github.com/google/A2UI/tree/main/samples/agent/adk/rizzcharts)
- A2UI 自定义组件演示
- 使用 ADK 编写
- [Orchestrator](https://github.com/google/A2UI/tree/main/samples/agent/adk/orchestrator)
- 从远程子智能体传递 A2UI 消息
- 使用 ADK 编写

## 您将使用 A2A 的不同类型的智能体

### 1. 面向用户的智能体 (独立)

面向用户的智能体是用户直接交互的智能体。

### 2. 作为远程智能体宿主的面向用户的智能体

这是一种模式,其中面向用户的智能体充当一个或多个远程智能体的宿主。面向用户的智能体将调用远程智能体,远程智能体将生成 A2UI 消息。这是 [A2A](https://a2a-protocol.org) 中的常见模式,客户端智能体调用服务器智能体。

- 面向用户的智能体可以“透传” A2UI 消息而不进行更改
- 面向用户的智能体可以在将 A2UI 消息发送到客户端之前对其进行更改

### 3. 远程智能体

远程智能体不直接是面向用户 UI 的一部分。相反,它被注册为远程智能体,可以由面向用户的智能体调用。这是 [A2A](https://a2a-protocol.org) 中的常见模式,客户端智能体调用服务器智能体。
86 changes: 86 additions & 0 deletions docs/zh/community.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# 社区

欢迎来到 A2UI 社区!我们要共同构建智能体驱动界面的未来。

## 参与其中

A2UI 是一个基于 Apache 2.0 协议的开源项目。我们欢迎开发者、研究人员以及任何对推动智能体式用户界面感兴趣的人士参与贡献。

## 社区展示

!!! info "即将推出..."
我们正在考虑通过何种最佳方式来展示社区项目、示例、主题、渲染器、自定义组件等。在 Github discussions 中链接一个 4 分钟(或更短)的演示视频和代码示例是展示您作品的绝佳方式。

## 项目合作伙伴

A2UI 是与多个组织合作开发的:

### Google Opal

[Opal](http://opal.google) 让用户使用自然语言构建、编辑和分享 AI 小程序。Opal 团队一直是 A2UI 开发的核心贡献者。

### Flutter

[GenUI SDK for Flutter](https://docs.flutter.dev/ai/genui) 使用 A2UI 作为 UI 声明格式,用于在 Flutter 应用程序中生成动态、个性化的 UI。

### Gemini Enterprise

A2UI 正在被集成到 [Gemini Enterprise](https://cloud.google.com/gemini-enterprise?e=48754805) 中,以支持自定义智能体在企业应用程序中渲染丰富、交互式的 UI。

### AG UI / CopilotKit

[AG UI](https://ag-ui.com/) 和 [CopilotKit](https://www.copilotkit.ai/) 提供了对 A2UI 的零日兼容性,使开发人员能够构建富文本、状态同步的应用程序,从智能体中渲染动态 UI。

### A2A

Google 的 [A2A 团队](https://a2a-protocol.org/) 一直是 A2UI 开发的核心贡献者,并得到了 A2A 技术指导委员会 (TSC) 的支持。

### ... 还有更多

还有许多组织和个人为 A2UI 的开发做出了贡献。

如果您对 A2UI 做出了重大贡献,请将您的名字提交到此列表。

## 行为准则

我们致力于为每个人提供一个受欢迎且包容的环境。所有参与者都应遵循以下原则:

- 尊重并体贴他人
- 欢迎不仅仅是新人,并帮助他们入门
- 关注对社区最有利的事情
- 对他人表现出同理心

我们绝不容忍不可接受的行为。请向项目维护者报告疑虑。

## 认可

我们感谢所有的贡献!贡献者将在以下地方得到认可:

- GitHub 的贡献者图表
- 发布说明
- 项目致谢

重大贡献者可能会被邀请加入项目的维护者团队。

## 保持更新

- **关注 (Watch) GitHub 仓库** 以获取通知
- **星标 (Star) 仓库** 以加入书签并表示支持
- **关注发布 (Follow releases)** 以获取新版本的通知

## 贡献方式

**[github.com/google/A2UI](https://github.com/google/A2UI)**

- **报告问题**:发现了 bug?[提交 Issue](https://github.com/google/A2UI/issues)
- **构建渲染器**:查看[路线图](roadmap.md)以了解计划中的框架
- **分享示例**:在 X/LinkedIn 上使用 `#A2UI` 发布,或者发起一个 [Discussion](https://github.com/google/A2UI/discussions)
- **改进文档**:欢迎向 `docs/` 目录提交 PR

## 有问题?

- 查看 [文档](introduction/what-is-a2ui.md)
- 搜索 [GitHub Discussions](https://github.com/google/A2UI/discussions)
- 在 [GitHub Issues](https://github.com/google/A2UI/issues) 中提问

感谢您成为 A2UI 社区的一员!
16 changes: 16 additions & 0 deletions docs/zh/composer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# A2UI Composer

尝试使用 **CopilotKit A2UI Widget Builder** 交互式地构建 A2UI widgets。

[![A2UI Composer](../assets/A2UI-widget-builder.png)](https://go.copilotkit.ai/A2UI-widget-builder)

**[启动 Widget Builder →](https://go.copilotkit.ai/A2UI-widget-builder)**

## 功能

- 可视化地试验 A2UI 组件
- 通过描述您想要的内容来生成 A2UI JSON
- 查看实时预览
- 复制 JSON 以在您的智能体中使用

由 [CopilotKit](https://www.copilotkit.ai/) 团队构建。
122 changes: 122 additions & 0 deletions docs/zh/concepts/components.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
# 组件与结构

A2UI 使用 **邻接表模型** 来表示组件层次结构。组件不是嵌套的 JSON 树,而是带有 ID 引用的扁平列表。

## 为什么是扁平列表?

**传统的嵌套方法:**

- LLM 必须一次性生成完美的嵌套
- 难以更新深层嵌套的组件
- 难以增量流式传输

**A2UI 邻接表:**

- ✅ 扁平结构,易于 LLM 生成
- ✅ 增量发送组件
- ✅ 通过 ID 更新任何组件
- ✅ 清晰的结构与数据分离

## 邻接表模型

```json
{
"surfaceUpdate": {
"components": [
{"id": "root", "component": {"Column": {"children": {"explicitList": ["greeting", "buttons"]}}}},
{"id": "greeting", "component": {"Text": {"text": {"literalString": "Hello"}}}},
{"id": "buttons", "component": {"Row": {"children": {"explicitList": ["cancel-btn", "ok-btn"]}}}},
{"id": "cancel-btn", "component": {"Button": {"child": "cancel-text", "action": {"name": "cancel"}}}},
{"id": "cancel-text", "component": {"Text": {"text": {"literalString": "Cancel"}}}},
{"id": "ok-btn", "component": {"Button": {"child": "ok-text", "action": {"name": "ok"}}}},
{"id": "ok-text", "component": {"Text": {"text": {"literalString": "OK"}}}}
]
}
}
```

组件通过 ID 引用子级,而不是通过嵌套。

## 组件基础

每个组件都有:

1. **ID**: 唯一标识符 (`"welcome"`)
2. **Type**: 组件类型 (`Text`, `Button`, `Card`)
3. **Properties**: 特定于该类型的配置

```json
{"id": "welcome", "component": {"Text": {"text": {"literalString": "Hello"}, "usageHint": "h1"}}}
```

## 标准目录

A2UI 定义了一个按用途组织的标准组件目录:

- **布局 (Layout)**: Row, Column, List - 排列其他组件
- **显示 (Display)**: Text, Image, Icon, Video, Divider - 显示信息
- **交互 (Interactive)**: Button, TextField, CheckBox, DateTimeInput, Slider - 用户输入
- **容器 (Container)**: Card, Tabs, Modal - 分组和组织内容

有关带有示例的完整组件库,请参见 [组件参考](../reference/components.md)。

## 静态 vs. 动态子级

**静态 (`explicitList`)** - 固定的子级 ID 列表:
```json
{"children": {"explicitList": ["back-btn", "title", "menu-btn"]}}
```

**动态 (`template`)** - 从数据数组生成子级:
```json
{"children": {"template": {"dataBinding": "/items", "componentId": "item-template"}}}
```

对于 `/items` 中的每个项目,渲染 `item-template`。有关详细信息,请参见 [数据绑定](data-binding.md)。

## 填充值

组件通过两种方式获取值:

- **字面量 (Literal)** - 固定值:`{"text": {"literalString": "Welcome"}}`
- **数据绑定 (Data-bound)** - 来自数据模型:`{"text": {"path": "/user/name"}}`

LLM 可以生成具有字面量值的组件,或者将它们绑定到数据路径以获取动态内容。

## 组合 Surfaces

组件组合成 **Surfaces** (widgets):

1. LLM 通过 `surfaceUpdate` 生成组件定义
2. LLM 通过 `dataModelUpdate` 填充数据
3. LLM 通过 `beginRendering` 信号通知渲染
4. 客户端将所有组件渲染为原生 widgets

一个 Surface 是一个完整、紧凑的 UI(表单、仪表板、聊天等)。

## 增量更新

- **添加** - 发送带有新组件 ID 的新 `surfaceUpdate`
- **更新** - 发送带有现有 ID 和新属性的 `surfaceUpdate`
- **移除** - 更新父级的 `children` 列表以排除已移除的 ID

扁平结构使所有更新都是简单的基于 ID 的操作。

## 自定义组件

除了标准目录之外,客户端还可以定义针对特定领域需求的自定义组件:

- **如何做**:在您的渲染器中注册自定义组件类型
- **什么**:图表、地图、自定义可视化、专用 widgets
- **安全性**:自定义组件仍然是客户端受信任目录的一部分

自定义组件从客户端的渲染器 _通告 (advertised)_ 给 LLM。然后,LLM 可以在标准目录之外使用它们。

有关实现细节,请参见 [自定义组件指南](../guides/custom-components.md)。

## 最佳实践

1. **描述性 ID**: 使用 `"user-profile-card"` 而不是 `"c1"`
2. **浅层级**: 避免深层嵌套
3. **分离结构与内容**: 使用数据绑定,而不是字面量
4. **使用模板复用**: 一个模板,通过动态子级生成许多实例
Loading