Bringing A2UI to Google Workspace with Gemini

Abstract

This article explores implementing the Agent-to-User Interface (A2UI) protocol within Google Apps Script. It demonstrates utilizing Gemini's structured output to render secure, dynamic, server-driven UIs—like booking forms and event lists—directly inside Google Sheets, streamlining workflows without complex external infrastructure.

Introduction

I recently published a sample implementation demonstrating how to bring the Agent-to-User Interface (A2UI) concepts to Google Apps Script (GAS). Ref

A2UI is an emerging open-standard protocol designed to enable AI agents to generate rich, interactive user interfaces that render natively across web, mobile, and desktop environments. Ref Unlike traditional approaches that often require executing arbitrary, high-risk code to generate UI on the fly, A2UI leverages a strict schema-based data format to describe UI components. This "secure-by-design" architecture effectively mitigates security risks like Cross-Site Scripting (XSS) while ensuring high performance and cross-platform consistency.

Integrating A2UI into the Google Workspace ecosystem represents a paradigm shift in user experience. It allows Large Language Model (LLM) driven agents to evolve beyond simple text-based chat. Instead, they provide dynamic, actionable components—such as forms, interactive charts, and data grids—directly within the user's workflow. In this article, I present a demonstration of A2UI functioning within Google Sheets, illustrating how AI agents can orchestrate complex, data-driven tasks through a native, structured interface.

Repository

The complete source code and documentation are available in the GitHub repository below:

https://github.com/tanaikech/A2UI-for-Google-Apps-Script

System Architecture and Workflow

Mermaid Chart Playground

The implementation of A2UI within Google Sheets follows a highly optimized lifecycle to ensure a smooth, agent-driven user experience.

1. User Input: The process begins in the Google Spreadsheet dialog where a user enters a natural language request, such as "Find 3 Chinese restaurants in New York."
2. Request Transmission: The HTML interface captures this input and sends it to the GAS backend. This is handled via the google.script.run API, which creates a direct and secure bridge between the user interface and the server logic.
3. Intent Routing: The GAS backend forwards the request to the Gemini API. Using a specialized System Prompt, Gemini acts as a "Router" to determine which sub-application (e.g., Restaurant Finder or Event Manager) is best suited to handle the request.
4. Tool Execution: Once the sub-application is selected, GAS executes local functions to interact with your data. This may involve searching the current spreadsheet, fetching files from Google Drive, or checking Google Calendar availability.
5. A2UI JSON Generation: The data retrieved from the tools is sent back to Gemini. Gemini then generates a structured response that includes both conversational text and a JSON object strictly following the A2UI (Agent-to-User Interface) schema.
6. Client-Side Rendering: The GAS backend returns this payload to the HTML dialog. A dedicated JavaScript rendering engine within the dialog parses the A2UI JSON and dynamically builds high-quality UI components like interactive cards, lists with images, and booking forms.
7. Native Integration: Unlike standard A2UI implementations that often rely on the A2A (Agent-to-Agent) protocol over HTTP, this GAS-optimized architecture eliminates external network overhead. By using the internal Google infrastructure, it provides a significantly faster response time for users.

Architectural Comparison: Distributed vs. Integrated

The official A2UI is designed as a "distributed" system for cross-platform interoperability. In contrast, the GAS-native version is an "integrated" system optimized specifically for the Google infrastructure.

Official A2UI Workflow (via A2A Protocol)

• Process: The Frontend requests data from an A2A Server (e.g., Node.js/Python). The Server handles auth/protocol logic and requests JSON from the Gemini API. The generated JSON travels back through the server to the Frontend for rendering.
• Challenge: Multiple network hops across the internet introduce latency and overhead.

GAS Native Workflow (via google.script.run)

• Process: The Frontend (HTML) directly calls a GAS Backend function using google.script.run. The GAS Backend communicates with the Gemini API using UrlFetchApp to get the UI JSON. The script returns the object directly to the client for immediate rendering.
• Innovation: By using google.script.run, the entire communication happens within Google's internal high-speed network. There is no need for an external A2A server, eliminating external network overhead.

Analysis: Pros and Cons of GAS-based A2UI

Why should users choose the GAS-native approach for their AI applications?

Pros

• Zero Setup Cost & Rapid Development: No servers to manage. Backend, frontend, and AI integration all live in a single GAS project.
• Seamless Google Integration: It is incredibly easy to let the AI perform "real-world actions," such as using Google Sheets as a database or managing Google Calendar events.
• High Performance: Bypassing an external proxy server via google.script.run ensures a snappier, more responsive user experience.

Cons

• Manual Rendering Logic: While the official version provides out-of-the-box UI components, the GAS version requires you to maintain the logic that converts JSON to HTML elements (the renderComponent code).
• Execution Quotas: GAS has specific limits, such as a 6-minute execution timeout and daily triggers, which may not suit high-scale enterprise apps.

---

Application Setup

To deploy this application in your own environment, please follow the steps below.

1. Obtain an API Key

You will need a valid Gemini API Key to communicate with the LLM.
Get one here.

2. Copy the Sample Script

You can copy the Google Spreadsheet containing the necessary Google Apps Script using the link below.

https://docs.google.com/spreadsheets/d/1NdgN5e2l7-CTw-NTaP50Ta75l8Zbr93ATMyUOlZk1BY/copy

After copying the Google Spreadsheet:

1. Open the script editor (Extensions > Apps Script).
2. Locate the main.gs file.
3. Set your API key in the apiKey variable.
4. Save the script.

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

Demonstration and Testing

Once the script is set up, re-open the Google Spreadsheet (or refresh the page). You will see a table on the "data" sheet, which acts 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.

In this demonstration, you can test the following two prompts:

1. "Find 3 Chinese restaurants in New York"

This prompt replicates the official A2UI demonstration. It 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"

This prompt 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.

Summary

This project confirms that the A2UI protocol can be effectively implemented within the Google Apps Script environment.

• Serverless Architecture: A2UI can be deployed using only GAS and Google Sheets, eliminating the need for external web servers or hosting.
• Deep Workspace Integration: The system seamlessly connects Generative AI with Workspace tools, allowing 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.