Gemini와 함께 A2UI를 Google Workspace에 도입하기

Source: Dev.to

Gemini의 구조화된 출력을 사용하여 보안이 강화된 동적 서버‑구동 UI(예: 예약 양식, 이벤트 목록)를 Google Sheets 내부에서 직접 렌더링하는 엔드‑투‑엔드 예제입니다 – 외부 인프라가 필요 없습니다.

🔗

📖 Overview

• A2UI – AI 에이전트가 웹, 모바일, 데스크톱에서 네이티브하게 렌더링되는 풍부하고 인터랙티브한 사용자 인터페이스를 생성할 수 있게 하는 신흥 오픈‑스탠다드 프로토콜.
• Secure‑by‑design – UI 컴포넌트가 엄격한 스키마 기반 JSON 형식으로 기술되어 임의의 고위험 코드 실행(예: XSS)의 필요성을 없앱니다.
• Google Workspace integration – 일반 채팅에서 LLM 기반 에이전트를 사용자의 워크플로우 내에서 실행 가능한 UI 요소(폼, 차트, 데이터 그리드)로 전환합니다.

전체 소스 코드와 문서는 GitHub에 호스팅됩니다:

🔗

🛠️ Google Sheets의 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]

🚀 구현 세부 사항

Official A2UI Workflow (via A2A Protocol)

Frontend → A2A Server (Node.js/Python) → Gemini API → JSON → Frontend

네트워크 홉이 여러 번 발생 → 지연 시간이 증가합니다.

GAS‑Native Workflow (via google.script.run)

Frontend (HTML) → google.script.run → GAS Backend → UrlFetchApp (Gemini) → JSON → Frontend

모든 통신이 Google 내부 고속 네트워크에서 이루어지므로 외부 오버헤드가 없습니다.

✅ GAS‑Native 접근 방식을 선택해야 하는 이유?

📦 샘플 애플리케이션 배포

1. Gemini API 키 획득

   • Gemini 콘솔에서 유효한 키를 가져옵니다.

2. 샘플 스프레드시트 복사

   • “Make a copy” 링크를 사용합니다.

3. Apps Script 편집기 열기

   • 복사한 스프레드시트에서: Extensions → Apps Script.

4. Gemini API 키 추가

   const GEMINI_API_KEY = 'YOUR_GEMINI_API_KEY';

5. Web App으로 배포 (선택 사항)

   • Deploy → New deployment → Select type: Web app
   • Execute as → Me 및 Who has access → Anyone (또는 원하는 설정) 로 설정합니다.

6. 데모 실행

   • 스프레드시트를 새로 고치고, 스크립트가 추가한 사용자 정의 메뉴(또는 사이드바)를 열어 자연어 요청을 입력하기 시작합니다.

📚 추가 자료

• A2UI Specification – https://github.com/agent2ui/spec
• Gemini API Documentation – https://cloud.google.com/vertex-ai/docs/generative-ai/overview
• Google Apps Script Guides – https://developers.google.com/apps-script

main.gs File

1. Set your API key in the apiKey variable. → apiKey 변수에 API 키를 설정합니다.
2. Save the script. → 스크립트를 저장합니다.

Alternatively, you can visit the GitHub Repository to manually copy the source code. → 또는 GitHub Repository를 방문하여 직접 소스 코드를 복사할 수 있습니다.

3. Once the script is set up, re‑open the Google Spreadsheet (or refresh the page). → 스크립트를 설정한 후 Google 스프레드시트를 다시 열거나(또는 페이지를 새로 고침) 합니다.
   • A table will appear on the “data” sheet; this serves as the source for the event demonstration. → “data” 시트에 표가 나타나며, 이는 이벤트 시연을 위한 소스 역할을 합니다.
   • A custom menu labeled “sample” will appear in the toolbar. → 툴바에 **“sample”**이라는 사용자 정의 메뉴가 표시됩니다.
   • Select Sample → Run to open the A2UI dialog. → Sample → Run을 선택하면 A2UI 대화 상자가 열립니다.

시연 프롬프트

1. “뉴욕에서 중식당 3곳 찾기”

   • 공식 A2UI 시연을 복제합니다.
   • 시스템이 모의 데이터를 검색하고, 이미지가 포함된 레스토랑 목록을 렌더링하며, 예약 양식을 표시하는 능력을 테스트합니다.

2. “1월 17‑20일 이벤트 보여줘”

   • Google Workspace와의 맞춤형 통합을 시연합니다.
   • 에이전트가 지정된 날짜 범위 내의 이벤트를 스프레드시트에서 검색하고 선택 가능한 목록으로 표시합니다.
   • 확인 후, 에이전트가 선택된 이벤트를 직접 Google 캘린더에 등록하는 함수를 실행합니다.

프로젝트 하이라이트

• 서버리스 아키텍처 – A2UI는 Google Apps Script (GAS)와 Google Sheets만으로 배포할 수 있어 외부 웹 서버나 호스팅이 필요 없습니다.
• 깊은 Workspace 통합 – 생성 AI를 Workspace 도구와 원활하게 연결하여 Sheets 읽기, Calendar에 쓰기와 같은 작업을 가능하게 합니다.
• 강화된 보안 – A2UI의 스키마 기반 렌더링을 따름으로써 임의의 HTML/JS 코드를 생성·실행하는 데 따른 높은 위험을 회피합니다.
• 동적인 사용자 경험 – 사용자는 채팅 대화창 내에서 바로 인터랙티브하고 앱과 같은 인터페이스(폼, 버튼, 리스트)를 받아, 단순 텍스트에 비해 사용성을 크게 향상시킵니다.
• 다른 앱으로의 확장성 – 이 접근 방식은 Sheets에만 국한되지 않으며, Google Docs, Slides 및 기타 Workspace 애플리케이션에 쉽게 적용해 통합 AI 인터페이스를 만들 수 있습니다.