Category: Agents

If, like me, you’ve often struggled with the pain of coding user interfaces with the CardService in Google Workspace, things are about to change. Using the new, open Agent2UI (A2UI) specification, agents can autonomously decide how to structure and render their own native interfaces in real time.

In a recent Pulse post, The Evolution of Google Chat: Exploring the New Wave of Developer Quickstarts, we highlighted a new Google tutorial that implements Agent2UI (A2UI) inside Google Chat. This guide shows you how to build a hybrid solution using Apps Script as a secure, lightweight gateway to Python-based agents running on the Vertex AI Agent Engine.

The Architecture: Apps Script as the Orchestrator

A common challenge when working with modern AI toolkits like the Agent Development Kit (ADK) is that they are not designed to run natively inside Apps Script. The quickstart bridges this divide by turning Apps Script into a lightweight, secure orchestration layer.

Instead of running heavy processing directly inside the script, Apps Script handles the Google Chat event, manages secure server-to-server authentication, and sends the payload out to an agent running on the Vertex AI Agent Engine.

Under the Hood

A look at the script provided in the quickstart shows how the Python backend passes UI layout instructions back to the Workspace front-end. When a user asks a question, the Python script processes the request, calls any backend tools and returns a single text stream structured like this:

Hello! I found the profile information you requested.
---a2ui_JSON---
[
  {
    "id": "profile_avatar",
    "component": {
      "Image": {
        "url": "[https://io.google/2024/speakers/3ea87822-3160-4d54-89dd-57e185085f79_240.webp](https://io.google/2024/speakers/3ea87822-3160-4d54-89dd-57e185085f79_240.webp)"
      }
    }
  },
  {
    "id": "profile_name",
    "component": {
      "Text": {
        "text": "Pierrick Voulet"
      }
    }
  },
  {
    "id": "linkedin_button",
    "component": {
      "Button": {
        "label": "LinkedIn Profile",
        "onClick": {
          "openLink": "[https://www.linkedin.com/in/pierrick-voulet/](https://www.linkedin.com/in/pierrick-voulet/)"
        }
      }
    }
  }
]

When this response is returned to Google Apps Script, it triggers the extractA2UIParts() function which splits this raw payload on the ---a2ui_JSON--- separator. The text before the delimiter (e.g., “Hello! I found the profile…”) is taken and posted straight to the user and the raw JSON array after the delimiter is to make the card.

Something to keep in mind is that this framework is not yet a wholesale replacement for the entire CardService library, as you will see in the script it uses a basic render to convert the A2UI JSON into CardService elements:

switch (Object.keys(component)[0]) {
  case 'Text':
    const textParagraph = CardService.newTextParagraph();
    textParagraph.setText(extractTextValue(component["Text"].text, dataModel));
    widgetWithIds.push({ id: c.id, widget: textParagraph });
    break;
  case 'Image':
    const image = CardService.newImage();
    image.setImageUrl(extractTextValue(component["Image"].url, dataModel));
    widgetWithIds.push({ id: c.id, widget: image});
    break;
  case 'Button':
    // Maps inline labels or child text components to TextButtons
    // and packages them into a trailing ButtonSet...
    break;
  default:
    console.warn(`Could not render component: ${JSON.stringify(c)}`);
}

This means that for the time being, the script example is only able to handle basic UI elements rather than handling heavy, structured data-entry flows.

Future Directions

While the quickstart provides a foundational v0.8 entry point for developers, community members are already looking at how A2UI responses can be used in Google Workspace interfaces.

An excellent example of this is Curtis Krygier’s open-source a2ui-catalogue project. Curtis has started a component library designed to build agent-driven interfaces for Google Workspace starting with Google Meet and Google Chat.

Instead of trying to bundle complex, pre-composed UI elements on the backend, Curtis advocates for a substrate model:

• Atomic Philosophy: Developers define a fixed visual vocabulary of atomic “primitives” once on the client side (such as TypeScript Lit web components).
• Token Efficiency: The AI agent reasons entirely within this stable vocabulary. It passes raw state updates rather than inventing presentation layouts on every conversational turn. This reduces token overhead and eliminates slow backend container redeployment loops.
• Interchangeability: By completely decoupling primitives from the transport layer, the exact same v0.9 component tree can reflow dynamically across completely different containers. A layout originally designed for a fullscreen stage in a Google Meet iframe can seamlessly stack and reflow to fit inside a compact Google Chat card or side panel.

Summary

For Google Workspace developers, the base A2UI Agent quickstart serves as an excellent hands-on starting point to experiment with agent integrations in Google Workspace. The underlying frameworks are evolving rapidly, as are the solution wrappers like a2ui-catalogue. Given a speed of change don’t expect a completely frictionless, single-click deployment out of the box, and you’ll likely need to lean into a little “Gemini-powered” fault finding should sort things out.

Source: Build a Google Chat app with an Agent2UI agent  |  Google Workspace add-ons  |  Google for Developers