Bringing A2UI to Google Workspace with Gemini

Source: Dev.to

An end‑to‑end example that uses Gemini’s structured output to render secure, dynamic, server‑driven UIs (e.g., booking forms, event lists) directly inside Google Sheets – no external infrastructure required.

📖 Overview

• A2UI – an emerging open‑standard protocol that lets AI agents generate rich, interactive user interfaces that render natively on web, mobile, and desktop.
• Secure‑by‑design – UI components are described with a strict schema‑based JSON format, eliminating the need for arbitrary, high‑risk code execution (e.g., XSS).
• Google Workspace integration – brings LLM‑driven agents from plain chat to actionable UI elements (forms, charts, data grids) inside the user’s workflow.

The full source code and documentation are hosted on GitHub:

🔗

🛠️ A2UI in Google Sheets – Lifecycle Diagram

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]

🚀 Implementation Details

Official A2UI Workflow (via A2A Protocol)

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

Multiple network hops → higher latency.

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

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

All communication occurs on Google’s internal high‑speed network → no external overhead.

✅ Why Choose the GAS‑Native Approach?

📦 Deploying the Sample Application

1. Obtain a Gemini API Key

   • Get a valid key from the Gemini console.

2. Copy the Sample Spreadsheet

   • Use the “Make a copy” link.

3. Open the Apps Script editor

   • In the copied spreadsheet: Extensions → Apps Script.

4. Add your Gemini API key

   const GEMINI_API_KEY = 'YOUR_GEMINI_API_KEY';

5. Deploy as a Web App (optional)

   • Deploy → New deployment → Select type: Web app
   • Set Execute as → Me and Who has access → Anyone (or your preferred setting).

6. Run the demo

   • Reload the spreadsheet, open the custom menu (or sidebar) that the script adds, and start typing natural‑language requests.

📚 Additional Resources

• 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.
2. Save the script.

Alternatively, you can visit the GitHub Repository to manually copy the source code.

3. Once the script is set up, re‑open the Google Spreadsheet (or refresh the page).
   • A table will appear on the “data” sheet; this serves as the source for the event demonstration.
   • A custom menu labeled “sample” will appear in the toolbar.
   • Select Sample → Run to open the A2UI dialog.

Demonstration Prompts

1. “Find 3 Chinese restaurants in New York”

   • Replicates the official A2UI demonstration.
   • Tests the system’s ability to retrieve mock data, render a list of restaurants with images, and present a booking form.

2. “Show me events for Jan 17‑20”

   • Demonstrates a custom integration with Google Workspace.
   • The agent searches the spreadsheet for events within the specified date range and presents them as a selectable list.
   • Upon confirmation, the agent triggers a function to register the selected events directly to your Google Calendar.

Project Highlights

• Serverless Architecture – A2UI can be deployed using only Google Apps Script (GAS) and Google Sheets, eliminating the need for external web servers or hosting.
• Deep Workspace Integration – Seamlessly connects generative AI with Workspace tools, enabling actions like reading Sheets and writing to Calendar.
• Enhanced Security – By adhering to A2UI’s schema‑driven rendering, the application avoids the high risks associated with generating and executing arbitrary HTML/JS code.
• Dynamic User Experience – Users receive interactive, app‑like interfaces (forms, buttons, lists) directly within a chat dialog, vastly improving usability over plain text.
• Scalability to Other Apps – This approach is not limited to Sheets; it can be readily adapted for Google Docs, Slides, and other Workspace applications to create a unified AI interface.