将 A2UI 引入 Google Workspace 与 Gemini
发布: (2026年1月19日 GMT+8 13:54)
7 min read
原文: Dev.to
Source: Dev.to
一个端到端的示例，使用 Gemini 的结构化输出在 Google Sheets 中直接渲染安全、动态、服务器驱动的 UI（例如预订表单、活动列表）——无需外部基础设施。
📖 概览
- A2UI – 一个新兴的开放标准协议，使 AI 代理能够生成丰富、交互式的用户界面，可在网页、移动端和桌面端原生渲染。
- 安全设计 – UI 组件使用严格的基于模式的 JSON 格式描述，消除任意高风险代码执行的需求（例如 XSS）。
- Google Workspace 集成 – 将 LLM 驱动的代理从纯聊天提升为用户工作流中的可操作 UI 元素（表单、图表、数据网格）。
完整的源代码和文档托管在 GitHub：
🔗
🛠️ Google 表格中的 A2UI – 生命周期图
flowchart TD
A[User Input (Dialog)] --> B[HTML captures text]
B --> C[google.script.run → GAS backend]
C --> D[Intent Routing (Gemini “Router”)]
D --> E[Select Sub‑application (e.g., Restaurant Finder)]
E --> F[Tool Execution (Sheets, Drive, Calendar …)]
F --> G[Send data back to Gemini]
G --> H[Gemini returns A2UI JSON + chat text]
H --> I[HTML renders UI components]
I --> J[Native UI shown in Sheet]🚀 实现细节
| 步骤 | 描述 |
|---|---|
| 1️⃣ 用户输入 | 在 Google 表格对话框中，用户键入自然语言请求，例如 “Find 3 Chinese restaurants in New York.”（在纽约寻找 3 家中餐馆）。 |
| 2️⃣ 请求传输 | HTML UI 通过 google.script.run 将请求发送到 Apps Script 后端——这是一个安全、直接的桥梁。 |
| 3️⃣ 意图路由 | 后端将请求转发给 Gemini API。一个专门的 System Prompt 让 Gemini 充当 路由器，选择合适的子应用（餐厅查找器、活动管理器等）。 |
| 4️⃣ 工具执行 | 选定的子应用运行本地 GAS 函数，以查询 Sheets、获取 Drive 文件或检查 Calendar 可用性。 |
| 5️⃣ A2UI JSON 生成 | Gemini 接收工具数据并返回一个 结构化响应，其中包含：
|
| 6️⃣ 客户端渲染 | 后端将负载返回给 HTML 对话框。专用的 JavaScript 渲染器解析 A2UI JSON 并构建 UI 组件（卡片、图片列表、预订表单等）。 |
| 7️⃣ 原生集成 | 由于整个流程都在 Google 基础设施内部（没有外部 A2A 服务器），延迟极低，性能很高。 |
官方 A2UI 工作流（通过 A2A 协议）
Frontend → A2A Server (Node.js/Python) → Gemini API → JSON → Frontend多次网络跳转 → 更高延迟。
GAS‑Native 工作流（通过 google.script.run）
Frontend (HTML) → google.script.run → GAS Backend → UrlFetchApp (Gemini) → JSON → Frontend所有通信都在 Google 的内部高速网络上进行 → 无外部开销。
✅ 为什么选择 GAS‑Native 方法？
| 优点 | 缺点 |
|---|---|
| 零设置成本 – 无需外部服务器；所有内容都位于单个 Apps Script 项目中。 | 手动渲染逻辑 – 您必须维护将 A2UI JSON 转换为 HTML 元素的代码（renderComponent）。 |
| 无缝的 Google 集成 – 可直接读取/写入 Sheets、Drive、Calendar 等。 | 执行配额 – 6 分钟脚本超时、每日 URL‑Fetch 限制等，可能限制大规模使用。 |
| 高性能 – 消除额外的网络跳转；UI 即时呈现。 |
📦 部署示例应用程序
-
获取 Gemini API 密钥
- 从 Gemini 控制台获取有效的密钥。
-
复制示例电子表格
- 使用 “创建副本” 链接。
-
打开 Apps Script 编辑器
- 在复制的电子表格中：
Extensions → Apps Script。
- 在复制的电子表格中：
-
添加你的 Gemini API 密钥
const GEMINI_API_KEY = 'YOUR_GEMINI_API_KEY'; -
部署为 Web 应用（可选）
Deploy → New deployment → Select type: Web app- 设置 Execute as → Me 并将 Who has access → Anyone（或您偏好的设置）。
-
运行演示
- 重新加载电子表格，打开脚本添加的自定义菜单（或侧边栏），然后开始输入自然语言请求。
📚 附加资源
- A2UI 规范 – https://github.com/agent2ui/spec
- Gemini API 文档 – https://cloud.google.com/vertex-ai/docs/generative-ai/overview
- Google Apps Script 指南 – https://developers.google.com/apps-script
main.gs File
- 在
apiKey变量中设置您的 API 密钥。 - 保存脚本。
或者，您也可以访问 GitHub Repository 手动复制源代码。
- 脚本设置完成后，重新打开 Google Spreadsheet（或刷新页面）。
- 在 “data” 工作表上会出现一个表格；该表格用作事件演示的来源。
- 工具栏中会出现一个标记为 “sample” 的自定义菜单。
- 选择 Sample → Run 打开 A2UI 对话框。
演示提示
-
“Find 3 Chinese restaurants in New York”
- 复制官方 A2UI 演示。
- 测试系统检索模拟数据、渲染带图片的餐厅列表并呈现预订表单的能力。
-
“Show me events for Jan 17‑20”
- 演示与 Google Workspace 的自定义集成。
- 代理在电子表格中搜索指定日期范围内的活动，并将其呈现为可选择的列表。
- 确认后，代理触发函数，将所选活动直接注册到您的 Google Calendar。
项目亮点
- 无服务器架构 – A2UI 可以仅使用 Google Apps Script (GAS) 和 Google Sheets 部署，无需外部 Web 服务器或托管。
- 深度 Workspace 集成 – 将生成式 AI 与 Workspace 工具无缝连接，实现读取 Sheets、写入 Calendar 等操作。
- 增强安全性 – 通过遵循 A2UI 的基于模式的渲染，应用避免了生成和执行任意 HTML/JS 代码的高风险。
- 动态用户体验 – 用户在聊天对话中直接获得交互式、类似应用的界面（表单、按钮、列表），大幅提升相较纯文本的可用性。
- 可扩展至其他应用 – 该方法不限于 Sheets，可轻松适配 Google Docs、Slides 以及其他 Workspace 应用，打造统一的 AI 界面。