Generative UI with A2UI: From Google to TYPO3

From Static Designs to Dynamic Experiences  

The way we design user interfaces is undergoing a fundamental shift. Traditional UI patterns, identical for every user, statically defined and manually optimised, are reaching their limits. Generative UI marks the move from designing for the many to generating dynamically for the individual.

The Nielsen Norman Group puts it precisely: GenUI is AI creating personalised interfaces in real time for user-specific experiences. Rather than developers coding one fixed UI for every use case, an AI agent composes the ideal interface for the task at hand, at the moment of interaction.

Table of Contents  

Video Introduction: Understanding GenUI  

Before we dive into the technical details, these two videos offer an excellent introduction to the topic.

Nielsen Norman Group: GenUI Explained  

The UX experts at the Nielsen Norman Group explain the concept of Generative UI and why it marks a paradigm shift in interface design.

Watch

Play video

Loads YouTube & sets cookies

Click loads YouTube (Privacy)

Google A2UI: Technical Deep Dive  

This tutorial shows Google's A2UI protocol in action, from the JSON structure through to concrete implementation examples.

Watch

Play video

Loads YouTube & sets cookies

Click loads YouTube (Privacy)

The Efficiency Problem: Text-Based Agents Fail  

Text-based LLM dialogues work well for simple requests. In more complex scenarios, such as structured data entry or visualising multidimensional information, they degenerate into inefficient back-and-forth exchanges that pile significant cognitive load onto the user.

The Restaurant Booking Dilemma  

User: "Book a table for 2."
Agent: "Okay, for what day?"

User: "Tomorrow."
Agent: "What time?"

User: "Maybe 7pm"
Agent: "We do not have reservation availability then, any other times?"

User: "When do you have reservations?"
Agent: "We have availability at 5:00, 5:30, 6:00, 8:30, 9:00, 9:30 and 10:00. 
     Do any of those work for you?"

The answer is not better text, but richer ways to communicate: a graphical calendar showing available slots, interactive sliders for party size, a map with table positions. This is exactly where A2UI comes in.

A2UI: The technical foundation for intelligent interfaces  

Agent-to-User Interface (A2UI) is an open-source protocol from Google that lets AI agents "speak UI". Instead of sending text alone, agents generate rich, interactive user interfaces that render natively inside the host application.

Four core principles  

Architecture: From generation to rendering  

The guiding principle: A2UI is "as secure as data, but as expressive as code", a decisive advantage for enterprise adoption.

JSON payload example  

{
"version": "0.8",
"components": [
  {
    "id": "date-picker-1",
    "type": "date-picker",
    "props": {
      "label": "Reservation Date",
      "minDate": "2025-12-31",
      "maxDate": "2026-03-31",
      "value": "2026-01-15"
    }
  },
  {
    "id": "time-slots-1",

The agent describes intent, not implementation. The client decides exactly what a date-picker looks like, guaranteeing perfect brand consistency.

Use Cases: From Concept to Practice  

Restaurant Finder with Interactive Map  

Instead of a long text list, the user gets a dynamically generated, interactive results map. Every result links straight into Google Maps. The whole flow feels like a seamless, purpose-built app.

Three Key Categories  

Agent-Client Communication in Detail  

A2UI in the Developer Ecosystem  

A2UI is not a standalone project but a specialised protocol within the fast-moving landscape of agent frameworks.

Technology Synergies  

A2A: The Sister Protocol for Agent-to-Agent Communication  

While A2UI governs communication between agent and human, Google's second protocol, Agent2Agent (A2A), handles communication between agents themselves. Together they form the foundation for a fully agent-driven architecture.

A2A launched in April 2025 with the backing of more than 50 technology partners, including Atlassian, PayPal, Salesforce, SAP, ServiceNow, and Workday. The protocol builds on established standards such as HTTP, SSE, and JSON-RPC.

A2A Design Principles

Practical Example: Recruiting Workflow

A typical A2A scenario: a manager asks their agent to find candidates for a developer role:

1. Main Agent receives the task and identifies specialised agents
2. Sourcing Agent searches candidate databases
3. Screening Agent evaluates qualifications
4. Calendar Agent schedules interviews
5. Background Check Agent conducts background checks

All agents communicate via A2A, while the UI output for the manager flows through A2UI: seamless orchestration across system boundaries.

Positioning: A2UI vs. Alternatives  

The key difference from MCP Apps: MCP treats UI as a resource (typically HTML in a sandboxed iframe). A2UI takes a "native-first" approach, so the UI blends seamlessly into the host app's styling. In multi-agent systems, an orchestrator can readily interpret the lightweight A2UI messages sent by a sub-agent.

Industry Voices  

These statements show how leading technology companies are already using A2UI in production:

Roadmap & Community Involvement  

A2UI was deliberately released early (version 0.8) to encourage open collaboration. The project invites you to help shape the future of agent-driven UI.

Official Roadmap to v1.0  

Open Source Repository  

TYPO3 Integration: A2UI in the Enterprise CMS  

Bringing A2UI to TYPO3 opens up new possibilities for intelligent, context-aware backend interfaces: editors get dynamically generated forms tailored to the content type, AI assistants support SEO optimisation, and workflows adapt to the task at hand.

Vision: AI-Powered TYPO3 Workflows  

Architecture Overview  

Test Extension: a2ui_integration  

Here is a complete TYPO3 extension that demonstrates A2UI concepts in TYPO3 13/14.

Extension Structure

a2ui_integration/
├── Classes/
│   ├── Controller/
│   │   └── A2UIController.php
│   ├── Domain/
│   │   ├── Model/
│   │   │   └── A2UIComponent.php
│   │   └── Repository/
│   │       └── ComponentRegistry.php
│   ├── Service/
│   │   ├── AgentService.php
│   │   └── RendererService.php
│   └── ViewHelpers/
│       └── RenderComponentViewHelper.php
├── Configuration/

1. Extension Configuration

{
"name": "webconsulting/a2ui-integration",
"type": "typo3-cms-extension",
"description": "A2UI Protocol Integration for TYPO3 - AI-driven dynamic UI generation",
"license": "GPL-2.0-or-later",
"authors": [
  {
    "name": "webconsulting GmbH",
    "email": "office@webconsulting.at",
    "homepage": "https://webconsulting.at"
  }
],
"require": {
  "php": "^8.1",
  "typo3/cms-core": "^13.0 || ^14.0",

2. Backend Module Registration

<?php

declare(strict_types=1);

use Webconsulting\A2uiIntegration\Controller\A2UIController;

return [
  'web_a2ui' => [
      'parent' => 'web',
      'position' => ['after' => 'web_info'],
      'access' => 'user',
      'workspaces' => 'live',
      'path' => '/module/web/a2ui',
      'labels' => 'LLL:EXT:a2ui_integration/Resources/Private/Language/locallang_mod.xlf',
      'extensionName' => 'A2uiIntegration',

3. Core Domain Models

<?php

declare(strict_types=1);

namespace Webconsulting\A2uiIntegration\Domain\Model;

/**
* A2UI Component Model
* Represents a single UI component in the A2UI protocol
*/
class A2UIComponent
{
  protected string $id;
  protected string $type;
  protected array $props;

4. Service Layer

<?php

declare(strict_types=1);

namespace Webconsulting\A2uiIntegration\Service;

use Webconsulting\A2uiIntegration\Domain\Model\A2UIComponent;
use TYPO3\CMS\Core\SingletonInterface;

/**
* Agent Service
* Simulates an LLM agent that generates A2UI components
* In production, this would call an actual LLM API (OpenAI, Gemini, etc.)
*/
class AgentService implements SingletonInterface

5. Controller

<?php

declare(strict_types=1);

namespace Webconsulting\A2uiIntegration\Controller;

use Psr\Http\Message\ResponseInterface;
use Webconsulting\A2uiIntegration\Service\AgentService;
use Webconsulting\A2uiIntegration\Service\RendererService;
use TYPO3\CMS\Backend\Template\ModuleTemplate;
use TYPO3\CMS\Backend\Template\ModuleTemplateFactory;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

/**
* A2UI Backend Module Controller

6. Fluid Templates

<div class="form-group" id="{id}">
  <label for="{id}-input" class="form-label">
      {props.label}
      <f:if condition="{props.required}">
          <span class="text-danger">*</span>
      </f:if>
  </label>
  <input 
      type="text" 
      class="form-control" 
      id="{id}-input"
      name="{id}"
      placeholder="{props.placeholder}"
      value="{props.value}"
      maxlength="{props.maxlength}"

7. JavaScript Renderer

/**
* A2UI Renderer for TYPO3 Backend
* Client-side component for handling A2UI interactions
*/
class A2UIRenderer {
constructor() {
  this.components = new Map();
  this.eventHandlers = new Map();
}

/**
 * Render A2UI payload into target element
 */
async render(payload, targetElement) {
  if (typeof payload === 'string') {

Step-by-Step: Creating an Extension from Scratch  

Follow this guide to build the A2UI extension yourself. Each step builds on the last.

Step 1: Create the Extension Skeleton

First, create the directory structure and the base files:

# Change to the TYPO3 project directory
cd /var/www/html/typo3

# Create the extension directory (TYPO3 13+ uses packages/)
mkdir -p packages/a2ui_integration/Classes/{Controller,Domain/Model,Domain/Repository,Service,ViewHelpers}
mkdir -p packages/a2ui_integration/Configuration/{Backend,TCA/Overrides}
mkdir -p packages/a2ui_integration/Resources/{Private/Templates/A2UI/Components,Public/Css,Public/JavaScript}

# Change to the extension directory
cd packages/a2ui_integration

Step 2: Base Configuration

Create the two essential configuration files:

<?php
/**
* Extension configuration for a2ui_integration
*/
$EM_CONF[$_EXTKEY] = [
  'title' => 'A2UI Integration',
  'description' => 'Agent-to-User Interface Protocol for TYPO3',
  'category' => 'be',
  'author' => 'Ihr Name',
  'author_email' => 'email@example.com',
  'state' => 'beta',
  'version' => '1.0.0',
  'constraints' => [
      'depends' => [
          'typo3' => '13.0.0-14.99.99',

Step 3: Creating the Domain Model

The A2UIComponent model represents the JSON structure of the A2UI protocol:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Domain\Model;

/**
* Represents a single A2UI component
* 
* Example JSON structure:
* {
*   "id": "field-1",
*   "type": "text-field",
*   "props": {"label": "Name", "required": true}
* }

Key concepts:

• Immutability: all properties are readonly for thread safety
• Constructor promotion: a PHP 8.2+ feature for compact code
• Recursive children: supports nested components

Step 4: Component Registry (Security Layer)

The registry implements the whitelist principle: only registered components are allowed.

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Domain\Repository;

use TYPO3\CMS\Core\SingletonInterface;

/**
* Security-critical: Whitelist of allowed UI components
* 
* The LLM can only request components that are registered here.
* This prevents code injection and ensures UI consistency.
*/
class ComponentRegistry implements SingletonInterface

Step 5: Agent Service (LLM Simulation)

The AgentService simulates the LLM logic. In production, you would replace it with real API calls:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Service;

use Vendor\A2uiIntegration\Domain\Model\A2UIComponent;

/**
* Simulates an LLM agent that generates UI components
* 
* In production, replace the match() logic with actual API calls:
* - OpenAI GPT-4
* - Google Gemini
* - Anthropic Claude

Step 6: Renderer Service

The renderer converts A2UI components into TYPO3 Fluid HTML:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Service;

use Vendor\A2uiIntegration\Domain\Model\A2UIComponent;
use Vendor\A2uiIntegration\Domain\Repository\ComponentRegistry;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Fluid\View\StandaloneView;

/**
* Renders A2UI components to TYPO3 Backend HTML
*/
class RendererService

Step 7: Backend Controller

The controller ties everything together and exposes the functionality as a backend module:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Controller;

use Psr\Http\Message\ResponseInterface;
use Vendor\A2uiIntegration\Service\AgentService;
use Vendor\A2uiIntegration\Service\RendererService;
use TYPO3\CMS\Backend\Template\ModuleTemplateFactory;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

class A2UIController extends ActionController
{
  public function __construct(

Step 8: Creating Fluid Templates

Create the component templates:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
    data-namespace-typo3-fluid="true">

<div class="form-group mb-3">
  <label for="{id}" class="form-label">
      {props.label}
      <f:if condition="{props.required}">
          <span class="text-danger">*</span>
      </f:if>
  </label>
  
  <input 
      type="text" 
      class="form-control"
      id="{id}"

Step 9: Register the backend module

<?php

use Vendor\A2uiIntegration\Controller\A2UIController;

return [
  'web_a2ui' => [
      'parent' => 'web',
      'position' => ['after' => 'web_info'],
      'access' => 'user',
      'workspaces' => 'live',
      'iconIdentifier' => 'module-web',
      'path' => '/module/web/a2ui',
      'labels' => 'LLL:EXT:a2ui_integration/Resources/Private/Language/locallang_mod.xlf',
      'extensionName' => 'A2uiIntegration',
      'controllerActions' => [

Step 10: Activate & test the extension

# Update autoload
composer dump-autoload

# Activate extension
./vendor/bin/typo3 extension:activate a2ui_integration

# Flush cache
./vendor/bin/typo3 cache:flush

# Optional: Symlink for public assets
./vendor/bin/typo3 extension:setup

Extension Download  

Want to use the extension straight away, without rebuilding every step by hand? Download the complete, production-ready extension:

Live Demo: Intent to UI  

Here is how a user intent turns into a generated UI:

Installation & Usage  

API Endpoints  

Extension Options  

Production Checklist  

Conclusion: Strategic Importance for Modern Applications  

Generative UI with A2UI is a fundamental step towards truly intelligent, adaptive assistants. The strategic advantages fall into four dimensions:

The Paradigm Shift  

GenUI marks the transition from designing interfaces for the many to dynamically generating experiences for the individual. It is not just a new technology, but a decisive step towards personalised, context-aware digital assistants.

For businesses, this means:

• Higher conversion rates from optimised, task-specific UIs
• Lower development costs through reusable, agent-driven components
• Better scalability as use cases grow more complex

Want to use A2UI in your project, or evaluate generative UI patterns? We can help with strategic assessment, architecture design, and implementation. Get in touch for a no-obligation consultation.