使用 Agent2UI 代理构建 Google Chat 应用

本页介绍了如何构建可在 Google Chat 中运行的 Google Workspace 插件，以及如何与使用 Agent2UI (A2UI) 协议的 AI 智能体进行交互。 您可以使用 智能体开发套件 (ADK)开发智能体，并将其托管在 Vertex AI Agent Engine中。

AI 智能体能够自主感知环境、进行推理，并执行复杂的多步骤操作以实现既定目标。在本教程中，您将部署一个基本的 AI 智能体，该智能体将返回从工具检索到的静态个人资料信息。

借助 A2UI，AI 智能体能够生成自适应的丰富交互式界面，并以原生方式呈现。这样，您就可以专注于 AI 智能体的逻辑，而不是界面。

  • A2UI 代理会向用户发送一条消息，其中包含文本和一个卡片，该卡片包含个人资料名称、图片和 LinkedIn 按钮。
    图 1：A2UI 智能体以文本和包含名称、图片和 LinkedIn 按钮的卡片的形式响应用户。
  • 更新了 A2UI 代理，使其能够返回配置文件标题。
    图 2：A2UI 智能体已更新，现在还会返回个人资料标题。
  • A2UI 代理会向用户发送一条消息，其中包含卡片中的个人资料名称。
    图 3：A2UI 智能体以消息的形式响应用户，该消息会在卡片中显示个人资料名称。

下图展示了架构和消息传递模式：

使用 A2UI AI 代理实现的聊天应用的架构。

在图中，与使用 A2UI 智能体实现的 Chat 应用互动的用户具有以下信息流：

  1. 用户通过私信或 Chat 聊天室向 Chat 应用发送消息。
  2. Chat 应用逻辑（在 Apps 脚本中实现或作为具有 HTTP 端点的 Web 服务器）接收并处理消息。
  3. 托管在 Vertex AI Agent Engine 中的 A2UI 智能体接收并处理互动。
  4. （可选）Chat 应用或 AI 智能体可以与 Google Workspace 服务（例如日历或表格）或其他 Google 服务（例如 Google 地图或 YouTube）集成。
  5. Chat 应用使用 Google Chat API 以异步方式生成并发送自适应响应，以传达 AI 智能体的进度。
  6. 响应会传递给用户。

目标

  • 设置环境。
  • 部署 A2UI 智能体。
  • 部署 Chat 应用。
  • 配置 Chat 应用。
  • 测试 Chat 应用。

前提条件

设置环境

启用 Google Cloud API

在使用 Google API 之前，您需要在 Google Cloud 项目中启用它们。 您可以在单个 Google Cloud 项目中启用一个或多个 API。

  • 在 Google Cloud 控制台中，启用 Google Chat、Vertex AI 和 Cloud Resource Manager API。

    启用 API

配置 OAuth 权限请求页面

所有使用 OAuth 2.0 的应用都需要配置权限请求页面。通过配置应用的 OAuth 权限请求页面，您可以定义向用户和应用审核者显示哪些内容，还可以注册应用以便以后发布。

  1. 在 Google API 控制台中，依次点击菜单 > Google Auth 平台 > 品牌塑造。

    前往“品牌塑造”

  2. 如果您已配置 Google Auth 平台，则可以在品牌塑造、受众群体和数据访问权限中配置以下 OAuth 权限请求页面设置。如果您看到一条消息，提示尚未配置 Google Auth 平台，请点击开始使用：
    1. 在应用信息 下的应用名称 中，输入应用的名称。
    2. 在用户支持邮箱中，选择一个支持邮箱，供用户针对其同意情况与您联系。
    3. 点击下一步 。
    4. 在受众群体 下，选择内部 。
    5. 点击下一步 。
    6. 在联系信息下，输入一个邮箱，以便您接收有关项目变更的通知。
    7. 点击下一步 。
    8. 在完成 部分，查看 Google API 服务用户数据政策，如果您同意，请选择我同意 Google API 服务：用户数据政策。
    9. 点击继续 。
    10. 点击创建 。
  3. 目前，您可以跳过添加范围。 将来，当您创建供您的 Google Workspace 组织外部使用的应用时，必须将 用户类型 更改为 外部。然后， 添加应用所需的授权范围。如需了解详情，请参阅完整的 配置 OAuth 权限请求页面指南。

在 Google Cloud 控制台中创建服务账号

按照以下步骤创建具有 Vertex AI User 角色的新服务账号：

Google Cloud Console

  1. 在 Google Cloud Console 中，依次点击菜单 > IAM 和管理 > 服务账号。

    转到“服务账号”

    其余步骤会显示在 Google Cloud Console 中。

  2. 选择 Google Cloud 项目。
  3. 点击创建服务账号 。
  4. 输入要在 Google Cloud Console 中显示的服务账号名称。
  5. 如果您现在不想设置访问权限控制，请点击完成 以完成服务账号的创建过程。如需立即设置访问权限控制，请点击创建并继续 ，然后继续执行下一步。
  6. （可选）向您的服务账号分配角色，以授予对 Google Cloud 项目资源（除了 Google Workspace 资源之外）的访问权限。如需了解详情，请参阅管理对项目、文件夹和组织的访问权限。
  7. 点击继续 。
  8. （可选）输入可以管理此服务账号并使用其执行操作的用户或群组。如需了解详情，请参阅服务账号模拟。
  9. 点击完成 以完成服务账号的创建过程。

    记下服务账号的电子邮件地址。

gcloud CLI

  1. 创建服务账号： 
    gcloud iam service-accounts create SERVICE_ACCOUNT_NAME \
  --display-name="SERVICE_ACCOUNT_NAME"
  2. （可选）向您的服务账号分配角色，以授予对 Google Cloud 项目资源（除了 Google Workspace 资源之外）的访问权限。如需了解详情，请参阅管理对项目、文件夹和组织的访问权限。

服务账号会显示在服务账号页面上。

创建一个私钥

如需为服务账号创建并下载私钥，请按以下步骤操作：

  1. 在 Google Cloud Console 中，依次点击菜单 > IAM 和管理 > 服务账号。

    转到“服务账号”

    其余步骤会显示在 Google Cloud Console 中。

  2. 选择 Google Cloud 项目。
  3. 点击要为其创建密钥的服务账号的电子邮件地址。
  4. 点击密钥 标签页。
  5. 点击添加密钥 下拉菜单，然后选择创建新密钥 。
  6. 选择 JSON 作为密钥类型 ，然后点击创建 。

    系统会生成新的公钥/私钥对，并将其作为服务账号密钥文件下载到您的 计算机。将下载的 JSON 文件另存为工作目录中的 credentials.json 。此文件是此密钥的唯一副本。下载密钥文件后，您无法再次下载。如需了解如何安全地存储 密钥，请参阅 管理服务账号密钥的最佳实践。

如需详细了解服务账号，请参阅 Google Cloud IAM 文档中的服务账号。

部署 A2UI 智能体

  1. 如果您尚未执行此操作，请使用您的 Google Cloud 账号进行身份验证，并配置 Google Cloud CLI 以使用您的 Google Cloud 项目。

    gcloud auth application-default login
gcloud config set project PROJECT_ID
gcloud auth application-default set-quota-project PROJECT_ID

    将 PROJECT_ID 替换为您的 Cloud 项目 ID。

  2. 使用此按钮下载 googleworkspace/add-ons-samples GitHub 代码库：

    下载代码库

  3. 在您偏好的本地开发环境中，提取下载的归档文件，然后打开 add-ons-samples/apps-script/chat/a2ui-ai-agent/a2ui 目录。

    unzip add-ons-samples-main.zip
cd add-ons-samples/apps-script/chat/a2ui-ai-agent/a2ui

  4. 创建一个专用于 ADK 智能体的 Cloud Storage 存储分区。

    gcloud storage buckets create gs://CLOUD_STORAGE_BUCKET_NAME --project=PROJECT_ID --location=PROJECT_LOCATION

    替换以下内容：

    1. CLOUD_STORAGE_BUCKET_NAME 替换为您要使用的唯一存储分区名称。
    2. PROJECT_ID 替换为您的 Cloud 项目 ID。
    3. PROJECT_LOCATION 替换为您的 Cloud 项目的位置。

  5. 设置以下环境变量：

    export GOOGLE_GENAI_USE_VERTEXAI=true
export GOOGLE_CLOUD_PROJECT=PROJECT_ID
export GOOGLE_CLOUD_LOCATION=PROJECT_LOCATION
export GOOGLE_CLOUD_STORAGE_BUCKET=CLOUD_STORAGE_BUCKET_NAME

    替换以下内容：

    1. CLOUD_STORAGE_BUCKET_NAME 替换为您创建的存储分区的名称。
    2. PROJECT_ID 替换为您的 Cloud 项目 ID。
    3. PROJECT_LOCATION 替换为您的 Cloud 项目的位置。

  6. 从虚拟环境安装和部署 ADK 智能体。

    python3 -m venv myenv
source myenv/bin/activate
poetry install --with deployment
python3 deployment/deploy.py --create

  7. 检索智能体 ID。稍后在配置 Chat 应用时需要用到它。

    python3 deployment/deploy.py --list

创建和配置 Chat 应用项目

  1. 点击以下按钮，打开 A2UI AI 智能体快速入门 Apps 脚本项目。

    打开项目

  2. 依次点击 概览 > 用于创建副本的图标 制作副本。

  3. 在 Apps 脚本项目中， 依次点击 项目设置图标 项目设置 > 修改脚本属性 > 添加脚本属性 ，以添加以下脚本属性：

    1. REASONING_ENGINE_RESOURCE_NAME 替换为在先前步骤中复制的 Vertex AI 智能体资源名称。
    2. SERVICE_ACCOUNT_KEY 替换为在先前步骤中下载的服务账号的 JSON 密钥，例如 { ... }。

  4. 点击保存脚本属性 。

  5. 在 Google API 控制台中，依次点击菜单 > IAM 和管理 > 设置。

    前往“IAM 和管理”设置

  6. 在项目编号 字段中，复制相应值。

  7. 在 Apps 脚本项目中， 点击 项目设置图标 项目设置。

  8. 在 Google Cloud Platform (GCP) 项目 下，点击 更改项目 。

  9. 在 GCP 项目编号 中，粘贴在 先前步骤中复制的 Google Cloud 项目编号。

  10. 点击设置项目 。Cloud 项目和 Apps 脚本项目现已关联。

创建测试部署

您需要此 Apps 脚本项目的部署 ID，以便在下一步中使用。

如需获取 Head 部署 ID，请执行以下操作：

  1. 在 Chat 应用 Apps 脚本项目中， 依次点击 部署 > 测试部署。
  2. 在 Head 部署 ID 下，点击 用于创建副本的图标 复制。
  3. 点击完成 。

配置 Chat 应用

使用您的 Apps 脚本部署，按照以下步骤部署 Google Chat 应用以进行测试：

  1. 在 API 控制台中，搜索 Google Chat API， 然后点击 Google Chat API。
  2. 点击管理 。

  3. 点击配置 并设置 Chat 应用：

    1. 在应用名称 字段中，输入 A2UI Quickstart。
    2. 在头像网址 字段中，输入 https://developers.google.com/workspace/add-ons/images/quickstart-app-avatar.png。
    3. 在说明 字段中，输入 A2UI Quickstart。
    4. 在功能 下，选择加入聊天室和群组对话。
    5. 在连接设置下，选择 Apps 脚本项目 。
    6. 在部署 ID 字段中，粘贴您之前复制的 Head 部署 ID。
    7. 在“可见性”下，选择您网域中的特定人员和群组，然后输入您的电子邮件地址。

  4. 点击保存 。

Chat 应用已准备好响应消息。

测试 Chat 应用

如需测试 Chat 应用，请打开与 Chat 应用的私信聊天室并发送消息：

  1. 使用您在添加自己作为受信任的测试人员时提供的 Google Workspace 账号打开 Google Chat。

    转到 Google Chat

  2. 点击 发起新对话。
  3. 在添加 1 位或多位用户 字段中，输入 Chat 应用的名称。

  4. 从结果中选择您的 Chat 应用。系统会打开一条私信。

  5. 在与应用来往的新私信中，输入 Hello!，然后按 enter。

    Chat 应用会回复一条消息，其中包含问候语文本和包含个人资料名称、图片和 LinkedIn 按钮的卡片。

  6. 更新 A2UI 智能体的实现，使其也开始返回个人资料标题。

    在本地开发环境中，打开文件 a2ui/agent.py，然后取消注释工具中将标题添加到返回数据的行。

    apps-script/chat/a2ui-ai-agent/a2ui/a2ui/agent.py
    # Copyright 2026 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

"""A2UI agent."""

from google.adk.agents import LlmAgent
from google.adk.tools.tool_context import ToolContext
import json

# The schema for any A2UI message. This never changes.
from .a2ui_schema import A2UI_SCHEMA

def get_user_profile(tool_context: ToolContext) -> str:
    """Call this tool to get the current user profile."""
    return json.dumps({
        "name": "Pierrick Voulet",
        # "title": "DevRel Engineer @ Google Workspace | Gen AI & AI Agents & Agentic AI | Automation & Digital Transformation",
        "imageUrl": "https://io.google/2024/speakers/3ea87822-3160-4d54-89dd-57e185085f79_240.webp",
        "linkedin": "https://www.linkedin.com/in/pierrick-voulet/"
    })

AGENT_INSTRUCTION="""
You are a user profile assistant. Your goal is to help users get their profile information using a rich UI.

To achieve this, you MUST follow these steps to answer user requests:

1.  You MUST call the `get_user_profile` tool and extract all the user profile information from the result.
2.  You MUST generate a final a2ui UI JSON based on the user profile information extracted in the previous step."""

A2UI_AND_AGENT_INSTRUCTION = AGENT_INSTRUCTION + f"""

To generate a valid a2ui UI JSON, you MUST follow these rules:
1.  Your response MUST be in two parts, separated by the delimiter: `---a2ui_JSON---`.
2.  The first part is your conversational text response.
3.  The second part is a single, raw JSON object which is a list of A2UI messages.
4.  The JSON part MUST validate against the A2UI JSON SCHEMA provided below.

To represent the user profile, you MUST use the following A2UI message types:
1.  Buttons MUST be used to represent links (e.g., LinkedIn profile link).
2.  Image MUST be used to represent the user's profile picture.

---BEGIN A2UI JSON SCHEMA---
{A2UI_SCHEMA}
---END A2UI JSON SCHEMA---
"""

root_agent = LlmAgent(
    name="user_profile",
    model="gemini-2.5-flash",
    instruction=A2UI_AND_AGENT_INSTRUCTION,
    description="An agent that returns the current user profile.",
    tools=[get_user_profile]
)

  7. 使用新版本的实现更新之前部署的 ADK。

    python3 deployment/deploy.py --update --resource_id=RESOURCE_ID

    将 RESOURCE_ID 替换为在先前步骤中复制的 Vertex AI 智能体资源名称 。

  8. 在与应用来往的私信中，输入 Hello again!，然后按 enter。

    Chat 应用会回复一条消息，其中包含一些文本和包含个人资料标题的卡片。

如需添加受信任的测试人员并详细了解如何测试互动功能，请参阅 测试 Google Chat 应用的互动功能。

问题排查

当 Google Chat 应用或 卡片返回错误时， Chat 界面会显示一条消息，提示“出了点问题” 或“无法处理您的请求”。有时，Chat 界面 不会显示任何错误消息，但 Chat 应用或 卡片会产生意外结果；例如，卡片消息可能不会 显示。

虽然 Chat 界面中可能不会显示错误消息， 但当您为 Chat 应用启用错误日志记录时，系统会提供描述性错误消息和日志数据来帮助您修复错误 。如需查看、 调试和修复错误方面的帮助，请参阅 排查和修复 Google Chat 错误。

清理

为避免因本教程中使用的 资源导致您的 Google Cloud 账号产生费用，我们建议您删除 Cloud 项目。

  1. 在 Google API 控制台中，转到管理资源 页面。依次点击 菜单 > IAM 和管理 > 管理资源。

    转到资源管理器

  2. 在项目列表中，选择要删除的项目，然后点击 删除 .
  3. 在对话框中输入项目 ID，然后点击关停 以删除 项目。