Agent2UI 에이전트로 Google Chat 앱 빌드하기

이 페이지에서는 Google Chat에서 작동하고 Agent2UI (A2UI) 프로토콜을 사용하는 AI 에이전트와 인터페이스하는 Google Workspace 부가기능을 빌드하는 방법을 설명합니다. 에이전트 개발 키트 (ADK)를 사용하여 에이전트를 개발하고 Vertex AI Agent Engine에서 호스팅합니다.

AI 에이전트는 정의된 목표를 달성하기 위해 환경을 자율적으로 인식하고, 추론하고, 복잡한 다단계 작업을 실행합니다. 이 튜토리얼에서는 도구에서 가져온 정적 프로필 정보를 반환하는 기본 AI 에이전트를 배포합니다.

A2UI를 사용하면 AI 에이전트가 적응형의 풍부한 대화형 UI를 생성하여 네이티브로 렌더링할 수 있습니다. 그러면 UI가 아닌 AI 에이전트의 로직에 집중할 수 있습니다.

그림 1. A2UI 에이전트는 이름, 이미지, LinkedIn 버튼이 포함된 텍스트와 카드로 사용자에게 응답합니다.
그림 2. A2UI 에이전트가 프로필 제목도 반환하도록 업데이트됩니다.
그림 3. A2UI 에이전트는 카드에 프로필 이름을 표시하는 메시지로 사용자에게 응답합니다.

다음 다이어그램은 아키텍처와 메시지 패턴을 보여줍니다.

A2UI AI 에이전트로 구현된 채팅 앱의 아키텍처

다이어그램에서 A2UI 에이전트로 구현된 채팅 앱과 상호작용하는 사용자는 다음과 같은 정보 흐름을 갖습니다.

사용자가 채팅 메시지 또는 Chat 스페이스를 통해 Chat 앱에 메시지를 보냅니다.
Apps Script에 구현되거나 HTTP 엔드포인트가 있는 웹 서버로 구현된 Chat 앱 로직이 메시지를 수신하고 처리합니다.
Vertex AI Agent Engine으로 호스팅되는 A2UI 에이전트가 상호작용을 수신하고 처리합니다.
선택적으로 Chat 앱 또는 AI 에이전트는 Calendar, Sheets와 같은 Google Workspace 서비스 또는 Google 지도, YouTube와 같은 기타 Google 서비스와 통합할 수 있습니다.
Chat 앱은 Google Chat API를 사용하여 AI 에이전트의 진행 상황을 전달하여 적응형 응답을 비동기식으로 생성하고 전송합니다.
응답이 사용자에게 제공됩니다.

목표

환경을 설정합니다.
A2UI 에이전트를 배포합니다.
Chat 앱을 배포합니다.
Chat 앱을 구성합니다.
Chat 앱을 테스트합니다.

기본 요건

Google Chat에 액세스할 수 있는 Business 또는 Enterprise Google Workspace 계정
결제가 사용 설정된 Google Cloud 프로젝트. 기존 프로젝트에 결제가 사용 설정되어 있는지 확인하려면 프로젝트의 결제 상태 확인을 참고하세요. 프로젝트를 만들고 청구를 설정하려면 Google Cloud 프로젝트 만들기를 참고하세요.
Python 3.11 이상: 설치하려면 공식 Python 웹사이트의 안내를 따르세요.
Python Poetry: 설치하려면 공식 Poetry 웹사이트의 안내를 따르세요.
Google Cloud CLI: 설치하려면 공식 Google Cloud 웹사이트의 안내를 따르세요.

환경 설정

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 동의 화면을 구성하면 사용자와 앱 검토자에게 표시되는 항목을 정의하고 나중에 게시할 수 있도록 앱을 등록할 수 있습니다.

Google Cloud 콘솔에서 메뉴 > Google Auth platform > 브랜딩으로 이동합니다.
브랜딩으로 이동
이미 Google Auth platform을 구성한 경우 브랜딩, 대상, 데이터 액세스에서 다음 OAuth 동의 화면 설정을 구성할 수 있습니다. Google Auth platform 아직 구성되지 않음이라는 메시지가 표시되면 시작하기를 클릭합니다.

앱 정보의 앱 이름에 앱 이름을 입력합니다.
사용자 지원 이메일에서 사용자가 동의에 대해 문의할 수 있는 지원 이메일 주소를 선택합니다.
다음을 클릭합니다.
대상에서 내부를 선택합니다.
다음을 클릭합니다.
연락처 정보에서 프로젝트 변경사항에 대한 알림을 받을 수 있는 이메일 주소를 입력합니다.
다음을 클릭합니다.
완료에서 Google API 서비스 사용자 데이터 정책을 검토하고 동의하는 경우 Google API 서비스: 사용자 데이터 정책에 동의합니다를 선택합니다.
계속을 클릭합니다.
만들기를 클릭합니다.

지금은 범위를 추가하지 않아도 됩니다. 나중에 Google Workspace 조직 외부에서 사용할 앱을 만들 때는 사용자 유형을 외부로 변경해야 합니다. 그런 다음 앱에 필요한 승인 범위를 추가합니다. 자세한 내용은 OAuth 동의 구성 가이드를 참고하세요.

Google Cloud 콘솔에서 서비스 계정 만들기

다음 단계에 따라 역할이 Vertex AI User인 새 서비스 계정을 만듭니다.

Google Cloud 콘솔

Google Cloud 콘솔에서 메뉴 > IAM 및 관리자 > 서비스 계정으로 이동합니다.
서비스 계정으로 이동
서비스 계정 만들기를 클릭합니다.
서비스 계정 세부정보를 입력한 다음 만들고 계속하기를 클릭합니다.
참고: 기본적으로 Google은 고유한 서비스 계정 ID를 만듭니다. ID를 변경하려면 서비스 계정 ID 필드에서 ID를 수정하세요.
선택사항: 서비스 계정에 역할을 할당하여 Google Cloud 프로젝트의 리소스에 대한 액세스 권한을 부여합니다. 자세한 내용은 리소스에 대한 액세스 권한 부여, 변경, 취소를 참고하세요.
계속을 클릭합니다.
선택사항: 이 서비스 계정으로 관리하고 작업을 수행할 수 있는 사용자 또는 그룹을 입력합니다. 자세한 내용은 서비스 계정 명의 도용 관리를 참고하세요.
완료를 클릭합니다. 서비스 계정의 이메일 주소를 기록해 둡니다.

gcloud CLI

서비스 계정을 만듭니다.

gcloud iam service-accounts create SERVICE_ACCOUNT_NAME \
  --display-name="SERVICE_ACCOUNT_NAME"

선택사항: 서비스 계정에 역할을 할당하여 Google Cloud 프로젝트의 리소스에 대한 액세스 권한을 부여합니다. 자세한 내용은 리소스에 대한 액세스 권한 부여, 변경, 취소를 참고하세요.

서비스 계정이 서비스 계정 페이지에 표시됩니다.

비공개 키 만들기

서비스 계정의 비공개 키를 만들고 다운로드하려면 다음 단계를 따르세요.

Google Cloud 콘솔에서 메뉴 > IAM 및 관리자 > 서비스 계정으로 이동합니다.
서비스 계정으로 이동
서비스 계정을 선택합니다.
키 > 키 추가 > 새 키 만들기를 클릭합니다.
JSON을 선택한 다음 만들기를 클릭합니다.
새 공개 키/비공개 키 쌍이 생성되어 새 파일로 머신에 다운로드됩니다. 다운로드한 JSON 파일을 작업 디렉터리에 credentials.json로 저장합니다. 이 파일은 이 키의 유일한 사본입니다. 키를 안전하게 저장하는 방법을 자세히 알아보려면 서비스 계정 키 관리를 참고하세요.
닫기를 클릭합니다.

서비스 계정에 대한 자세한 내용은 Google Cloud IAM 문서의 서비스 계정을 참고하세요.

A2UI 에이전트 배포

아직 인증하지 않은 경우 Google Cloud 계정으로 인증하고 Google Cloud 프로젝트를 사용하도록 Google Cloud CLI를 구성합니다.
```
gcloud auth application-default login
gcloud config set project PROJECT_ID
gcloud auth application-default set-quota-project PROJECT_ID
```
PROJECT_ID를 Cloud 프로젝트의 ID로 바꿉니다.
이 버튼을 사용하여 googleworkspace/add-ons-samples GitHub 저장소를 다운로드합니다.

저장소 다운로드
원하는 로컬 개발 환경에서 다운로드한 보관 파일의 압축을 풀고 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
```
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를 클라우드 프로젝트의 ID로 바꿉니다.
3. PROJECT_LOCATION를 Cloud 프로젝트의 위치로 바꿉니다.
다음 환경 변수를 설정합니다.
```
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를 클라우드 프로젝트의 ID로 바꿉니다.
3. PROJECT_LOCATION를 Cloud 프로젝트의 위치로 바꿉니다.

가상 환경에서 ADK 에이전트 설치 및 배포

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

에이전트 ID를 가져옵니다. 나중에 Chat 앱을 구성할 때 필요합니다.
```
python3 deployment/deploy.py --list
```

Chat 앱 프로젝트 만들기 및 구성

다음 버튼을 클릭하여 A2UI AI Agent Quickstart Apps Script 프로젝트를 엽니다.

프로젝트 열기
개요 > 사본 만들기를 클릭합니다.
Apps Script 프로젝트에서 클릭하세요. 프로젝트 설정 > 스크립트 속성 편집 > 스크립트 속성을 추가합니다. 다음 스크립트 속성을 추가합니다.
1. REASONING_ENGINE_RESOURCE_NAME 이전 단계에서 복사한 Vertex AI 에이전트 리소스 이름입니다.
2. SERVICE_ACCOUNT_KEY은 이전 단계(예: { ... })에서 다운로드한 서비스 계정의 JSON 키를 포함합니다.
스크립트 속성 저장을 클릭합니다.
Google Cloud 콘솔에서 메뉴로 이동합니다. > IAM 및 관리자 > 설정 .

IAM & 관리자 설정으로 이동
프로젝트 번호 필드에서 값을 복사합니다.
Apps Script 프로젝트에서 프로젝트 설정을 클릭합니다.
Google Cloud Platform(GCP) 프로젝트에서 프로젝트 변경을 클릭합니다.
GCP 프로젝트 번호에 이전 단계에서 복사한 Google Cloud 프로젝트 번호를 붙여넣으세요.
프로젝트 설정을 클릭합니다. 이제 클라우드 프로젝트와 앱스크립트 프로젝트가 연결되었습니다.

테스트 배포를 생성합니다.

다음 단계에서 사용하려면 이 Apps Script 프로젝트에 대한 배포 ID가 필요합니다.

메인 배포 ID를 얻으려면 다음 단계를 수행하십시오.

채팅 앱 Apps Script 프로젝트에서 클릭하세요. 배포 > 테스트 배포 .
Head 배포 ID 아래에서 복사를 클릭합니다.
완료를 클릭합니다.

채팅 앱을 구성하세요

Apps Script 배포를 사용하여 다음 단계에 따라 Google Chat 앱을 테스트용으로 배포하세요.

콘솔에서 Google Chat API를 검색하고 Google Chat API를 클릭합니다.
관리를 클릭합니다.
구성을 클릭하고 Chat 앱을 설정합니다.
1. 앱 이름 필드에 A2UI Quickstart를 입력합니다.
2. 아바타 URL 필드에 https://developers.google.com/workspace/add-ons/images/quickstart-app-avatar.png를 입력합니다.
3. 설명 필드에 A2UI Quickstart을 입력합니다.
4. 기능에서 스페이스 및 그룹 대화 참여를 선택합니다.
5. 연결 설정에서 Apps Script 프로젝트를 선택합니다.
6. Deployment ID(배포 ID) 필드에 이전에 복사한 Head 배포 ID를 붙여넣습니다.
7. 공개 범위에서 내 도메인의 특정 사용자 및 그룹을 선택하고 이메일을 입력합니다.
저장을 클릭합니다.

Chat 앱에서 메시지에 응답할 준비가 되었습니다.

채팅 앱 테스트

Chat 앱을 테스트하려면 Chat 앱과의 채팅 메시지 스페이스를 열고 메시지를 보냅니다.

신뢰할 수 있는 테스터로 자신을 추가할 때 제공한 Google Workspace 계정을 사용하여 Google Chat을 엽니다.

Google Chat으로 이동
새 채팅을 클릭합니다.
사용자 1명 이상 추가 필드에 Chat 앱의 이름을 입력합니다.
검색 결과에서 채팅 앱을 선택합니다. 채팅 메시지가 열립니다.

참고: 결과 목록에 채팅 앱이 표시되지 않으면 Google Cloud 콘솔의 Chat API 구성 페이지에 있는 공개 상태 설정에 Google Workspace 계정이 포함되어 있는지 확인하세요.
앱의 새 직접 메시지에 Hello!를 입력하고 enter를 누릅니다.

Chat 앱은 인사말 텍스트와 프로필 이름, 이미지, LinkedIn 버튼이 포함된 카드로 메시지에 답장합니다.

프로필 제목도 반환하도록 A2UI 에이전트의 구현을 업데이트합니다.

로컬 개발 환경에서 a2ui/agent.py 파일을 열고 반환된 데이터에 제목을 추가하는 도구의 주석 처리를 해제합니다.

apps-script/chat/a2ui-ai-agent/a2ui/a2ui/agent.py

GitHub에서 보기

# 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]
)

이전에 배포된 ADK를 새 버전의 구현으로 업데이트합니다.
```
python3 deployment/deploy.py --update --resource_id=RESOURCE_ID
```
RESOURCE_ID을 이전 단계에서 복사한 Vertex AI 에이전트 리소스 이름으로 바꿉니다.
앱과의 채팅 메시지에 Hello again!를 입력하고 enter를 누릅니다.

Chat 앱은 텍스트와 프로필 제목이 포함된 카드로 메시지에 답장합니다.

신뢰할 수 있는 테스터를 추가하고 대화형 기능 테스트에 대해 자세히 알아보려면 Google Chat 앱의 대화형 기능 테스트를 참고하세요.

문제 해결

Google Chat 앱 또는 카드에서 오류를 반환하면 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됩니다. 또는 '요청을 처리할 수 없습니다' Chat UI에 오류 메시지가 표시되지 않지만 Chat 앱이나 카드에서 예상치 못한 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.

채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만, 채팅 앱의 오류 로깅이 사용 설정된 경우 오류를 수정하는 데 도움이 되는 설명이 포함된 오류 메시지와 로그 데이터를 사용할 수 있습니다. 오류를 확인하고, 디버그하고, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정을 참고하세요.

삭제

이 튜토리얼에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 Cloud 프로젝트를 삭제하는 것이 좋습니다.

Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다. 메뉴 > IAM 및 관리자 > 리소스 관리를 클릭합니다.
Resource Manager로 이동
프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제 를 클릭합니다.
대화상자에서 프로젝트 ID를 입력한 다음 종료를 클릭하여 프로젝트를 삭제합니다.