Generative UI with A2UI: From Google to TYPO3

From Static Designs to Dynamic Experiences  

The way we design user interfaces is facing a fundamental shift. Traditional UI patterns – identical for all users, statically defined, and manually optimised – are reaching their limits. Generative UI marks the transition from designing for the many to dynamic generation for the individual.

The Nielsen Norman Group defines GenUI precisely: AI creates personalised interfaces in real time for user-specific experiences. Instead of developers coding a fixed UI for all use cases, an AI agent composes the optimal interface for the respective task 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 represents a paradigm shift in interface design.

Google A2UI: Technical Deep Dive  

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

The Efficiency Problem: Text-Based Agents Fail  

Text-based LLM dialogues are suitable for simple requests. In more complex scenarios – structured data entry, visualisation of multidimensional information – inefficient ping-pong dialogues emerge, which significantly increase the cognitive load on users.

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 solution does not lie in better text, but in richer communication methods: a graphical calendar with available time slots, interactive sliders for the number of people, a map with table positions. This is where A2UI comes in.

A2UI: The technical foundation for intelligent interfaces  

Agent-to-User Interface (A2UI) is an open-source protocol by Google that empowers AI agents to "speak UI". Instead of just sending text, agents generate rich, interactive user interfaces that are rendered natively within the host application.

Four core principles  

Architecture: From generation to rendering  

The maxim: A2UI is "as secure as data, but as expressive as code" – a crucial advantage for enterprise adoption.

JSON payload example  

{
"version": "0.8",
"components": [
  {
    "id": "date-picker-1",
    "type": "date-picker",
    "props": {
      "label": "Reservierungsdatum",
      "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 what a date-picker concretely looks like – perfect brand consistency guaranteed.

Use Cases: From Concept to Practice  

Restaurant Finder with Interactive Map  

Instead of a long text list, the user receives a dynamically generated, interactive results map. Each result offers direct integration with Google Maps. The entire process feels like a seamless, purpose-built app.

Three Key Categories  

Agent-Client Communication in Detail  

A2UI in the Developer Ecosystem  

A2UI is not an isolated project, but a specialised protocol in the rapidly evolving landscape of agent frameworks.

Technology Synergies  

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

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

A2A was introduced in April 2025 with the support of over 50 technology partners such as Atlassian, PayPal, Salesforce, SAP, ServiceNow, and Workday. The protocol is based on established standards like HTTP, SSE, and JSON-RPC.

A2A Design Principles

Practical Example: Recruiting Workflow

A typical A2A scenario: A manager tasks their agent with finding candidates for a developer position:

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, whilst the UI output for the manager is handled via A2UI – seamless orchestration across system boundaries.

Positioning: A2UI vs. Alternatives  

Crucial difference from MCP Apps: MCP treats UI as a resource (typically HTML in a sandboxed iframe). A2UI follows a "native-first" approach – the UI blends seamlessly into the styling of the host app. In multi-agent systems, an orchestrator effortlessly understands the lightweight A2UI message content of a sub-agent.

Industry Voices  

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

Roadmap & Community Involvement  

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

Official Roadmap to v1.0  

Open Source Repository  

TYPO3 Integration: A2UI in the Enterprise CMS  

The integration of A2UI into TYPO3 opens up new possibilities for intelligent, context-aware backend interfaces: editors receive dynamically generated forms based on the content type, AI assistants support SEO optimisation, and workflows adapt to the current task.

Vision: AI-Powered TYPO3 Workflows  

Architecture Overview  

Test Extension: a2ui_integration  

I present 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 implement the A2UI extension yourself. Each step builds upon the previous one.

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}
* }

Important Concepts:

• Immutability: All properties are readonly for thread safety
• Constructor Promotion: 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, this is replaced by 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 connects 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  

Would you like to use the extension directly without rebuilding every step manually? Download the complete, production-ready extension:

Live Demo: Intent to UI  

Here is an example of how a user intent is converted into a generated UI:

Installation & Usage  

API Endpoints  

Extension Options  

Production Checklist  

Conclusion: Strategic Importance for Modern Applications  

Generative UI with A2UI marks a fundamental step towards truly intelligent, adaptive assistants. The strategic advantages can be summarised in four dimensions:

The Paradigm Shift  

GenUI represents 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 through optimised, task-specific UIs
• Reduced development costs through reusable, agent-driven components
• Better scalability with the growing complexity of use cases

Would you like to use A2UI in your project or evaluate generative UI patterns? We support you with strategic assessment, architecture design, and implementation. Contact us for a no-obligation consultation.