Generative UI mit A2UI: Von Google zu TYPO3

Von statischen Designs zu dynamischen Erlebnissen  

Die Art, wie wir Benutzeroberflächen gestalten, steht vor einem fundamentalen Wandel. Traditionelle UI-Patterns – für alle Nutzer:innen gleich, statisch definiert, manuell optimiert – stoßen an ihre Grenzen. Generative UI markiert den Übergang von der Gestaltung für viele zur dynamischen Generierung für den Einzelnen.

Die Nielsen Norman Group definiert GenUI präzise: KI erstellt in Echtzeit personalisierte Schnittstellen für benutzerspezifische Erlebnisse. Statt dass Entwickler:innen eine feste UI für alle Anwendungsfälle codieren, komponiert ein KI-Agent die optimale Schnittstelle für die jeweilige Aufgabe im Moment der Interaktion.

Inhaltsverzeichnis  

Video-Einführung: GenUI verstehen  

Bevor wir in die technischen Details einsteigen, bieten diese beiden Videos einen ausgezeichneten Einstieg in das Thema.

Nielsen Norman Group: GenUI erklärt  

Die UX-Expert:innen der Nielsen Norman Group erklären das Konzept von Generative UI und warum es einen Paradigmenwechsel in der Interface-Gestaltung darstellt.

Google A2UI: Technische Deep-Dive  

Dieses Tutorial zeigt Googles A2UI-Protokoll in Aktion. Von der JSON-Struktur bis zu konkreten Implementierungsbeispielen.

Das Effizienzproblem: Textbasierte Agenten scheitern  

Textbasierte LLM-Dialoge eignen sich für einfache Anfragen. Bei komplexeren Szenarien – strukturierte Dateneingabe, Visualisierung mehrdimensionaler Informationen – entstehen ineffiziente Ping-Pong-Dialoge, die die kognitive Last der Nutzer:innen stark erhöhen.

Das Restaurant-Buchungs-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?"

Die Lösung liegt nicht in besseren Texten, sondern in reichhaltigeren Kommunikationsmethoden: ein grafischer Kalender mit verfügbaren Zeitfenstern, interaktive Schieberegler für die Personenanzahl, eine Map mit Tischpositionen. Hier setzt A2UI an.

A2UI: Das technische Fundament für intelligente Interfaces  

Agent-to-User Interface (A2UI) ist ein quelloffenes Protokoll von Google, das KI-Agenten befähigt, "UI zu sprechen". Statt nur Text zu senden, generieren Agenten reichhaltige, interaktive Benutzeroberflächen, die nativ in der Host-Anwendung dargestellt werden.

Vier Kernprinzipien  

Architektur: Von der Generierung zum Rendering  

Die Maxime: A2UI ist "sicher wie Daten, aber ausdrucksstark wie Code" – ein entscheidender Vorteil für die Akzeptanz in Unternehmen.

JSON-Payload-Beispiel  

{
"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",

Der Agent beschreibt Absicht, nicht Implementierung. Der Client entscheidet, wie ein date-picker konkret aussieht – perfekte Markenkonsistenz garantiert.

Anwendungsfälle: Vom Konzept zur Praxis  

Restaurant-Finder mit interaktiver Map  

Statt einer langen Textliste erhält die Nutzerin eine dynamisch generierte, interaktive Ergebniskarte. Jedes Ergebnis bietet direkte Integration zu Google Maps. Der gesamte Ablauf fühlt sich wie eine nahtlose, zweckgebundene App an.

Drei Schlüsselkategorien  

Agent-Client-Kommunikation im Detail  

A2UI im Entwickler-Ökosystem  

A2UI ist kein isoliertes Projekt, sondern ein spezialisiertes Protokoll in der sich schnell entwickelnden Landschaft der Agenten-Frameworks.

Technologie-Synergien  

A2A: Das Schwesterprotokoll für Agent-zu-Agent-Kommunikation  

Während A2UI die Kommunikation zwischen Agent und Mensch regelt, adressiert Googles zweites Protokoll – Agent2Agent (A2A) – die Kommunikation zwischen Agenten untereinander. Gemeinsam bilden sie das Fundament für eine vollständig agentengesteuerte Architektur.

A2A wurde im April 2025 mit Unterstützung von über 50 Technologiepartnern wie Atlassian, PayPal, Salesforce, SAP, ServiceNow und Workday vorgestellt. Das Protokoll basiert auf bewährten Standards wie HTTP, SSE und JSON-RPC.

A2A Design-Prinzipien

Praxisbeispiel: Recruiting-Workflow

Ein typisches A2A-Szenario: Eine Führungskraft beauftragt ihren Agent, Kandidat:innen für eine Entwickler:innen-Stelle zu finden:

1. Haupt-Agent erhält den Auftrag und identifiziert spezialisierte Agenten
2. Sourcing-Agent durchsucht Kandidaten-Datenbanken
3. Screening-Agent bewertet Qualifikationen
4. Calendar-Agent plant Interviews
5. Background-Check-Agent führt Hintergrundprüfungen durch

Alle Agenten kommunizieren über A2A, während die UI-Ausgabe für die Führungskraft über A2UI erfolgt – nahtlose Orchestrierung über Systemgrenzen hinweg.

Positionierung: A2UI vs. Alternativen  

Entscheidender Unterschied zu MCP Apps: MCP behandelt UI als Ressource (typischerweise HTML in sandboxed iframe). A2UI verfolgt einen "Native-First"-Ansatz – die UI fügt sich nahtlos in das Styling der Host-App ein. In Multi-Agenten-Systemen versteht ein Orchestrator den leichtgewichtigen A2UI-Nachrichteninhalt eines Sub-Agenten mühelos.

Stimmen aus der Industrie  

Diese Statements zeigen, wie führende Technologieunternehmen A2UI bereits produktiv einsetzen:

Roadmap & Community-Beteiligung  

A2UI wurde bewusst früh (Version 0.8) veröffentlicht, um offene Zusammenarbeit zu fördern. Das Projekt lädt dazu ein, die Zukunft agentengesteuerter UI gemeinsam zu gestalten.

Offizielle Roadmap bis v1.0  

Open-Source-Repository  

TYPO3-Integration: A2UI im Enterprise CMS  

Die Integration von A2UI in TYPO3 eröffnet neue Möglichkeiten für intelligente, kontextbewusste Backend-Interfaces: Redakteur:innen erhalten dynamisch generierte Formulare je nach Inhaltstyp, KI-Assistenten unterstützen bei SEO-Optimierung, Workflows passen sich der aktuellen Aufgabe an.

Vision: KI-gestützte TYPO3-Workflows  

Architektur-Überblick  

Test-Extension: a2ui_integration  

Ich präsentiere eine vollständige TYPO3-Extension, die A2UI-Konzepte in TYPO3 13/14 demonstriert.

Extension-Struktur

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: Extension von Grund auf erstellen  

Folgen Sie dieser Anleitung, um die A2UI-Extension selbst zu implementieren. Jeder Schritt baut auf dem vorherigen auf.

Step 1: Extension-Grundgerüst erstellen

Erstellen Sie zunächst die Verzeichnisstruktur und die Basisdateien:

# Ins TYPO3-Projektverzeichnis wechseln
cd /var/www/html/typo3

# Extension-Verzeichnis anlegen (TYPO3 13+ nutzt 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}

# In Extension-Verzeichnis wechseln
cd packages/a2ui_integration

Step 2: Basis-Konfiguration

Erstellen Sie die beiden essentiellen Konfigurationsdateien:

<?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: Das Domain Model erstellen

Das A2UIComponent Model bildet die JSON-Struktur des A2UI-Protokolls ab:

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

Wichtige Konzepte:

• Immutability: Alle Properties sind readonly für Thread-Safety
• Constructor Promotion: PHP 8.2+ Feature für kompakten Code
• Rekursive Children: Unterstützt verschachtelte Components

Step 4: Component Registry (Security Layer)

Die Registry implementiert das Whitelist-Prinzip – nur registrierte Components sind erlaubt:

<?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)

Der AgentService simuliert die LLM-Logik. In Produktion ersetzt man dies durch echte 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

Der Renderer wandelt A2UI-Components in TYPO3 Fluid HTML um:

<?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

Der Controller verbindet alles und exponiert die Funktionalität als Backend-Modul:

<?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: Fluid Templates erstellen

Erstellen Sie die 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: Backend-Modul registrieren

<?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: Extension aktivieren & testen

# Autoload aktualisieren
composer dump-autoload

# Extension aktivieren
./vendor/bin/typo3 extension:activate a2ui_integration

# Cache leeren
./vendor/bin/typo3 cache:flush

# Optional: Symlink für Public Assets
./vendor/bin/typo3 extension:setup

Extension Download  

Sie möchten die Extension direkt verwenden, ohne jeden Schritt manuell nachzubauen? Laden Sie die vollständige, produktionsreife Extension herunter:

Live-Demo: Intent zu UI  

Hier ein Beispiel, wie ein Nutzer-Intent in eine generierte UI umgewandelt wird:

Installation & Verwendung  

API-Endpunkte  

Erweiterungsmöglichkeiten  

Produktions-Checkliste  

Fazit: Strategische Bedeutung für moderne Anwendungen  

Generative UI mit A2UI markiert einen fundamentalen Schritt hin zu wirklich intelligenten, adaptiven Assistenten. Die strategischen Vorteile lassen sich in vier Dimensionen zusammenfassen:

Der Paradigmenwechsel  

GenUI steht für den Übergang von der Gestaltung von Schnittstellen für viele zur dynamischen Generierung von Erlebnissen für den Einzelnen. Es ist nicht nur eine neue Technologie, sondern ein entscheidender Schritt zu personalisierten, kontextbewussten digitalen Assistenten.

Für Unternehmen bedeutet das:

• Höhere Konversionsraten durch optimierte, aufgabenspezifische UIs
• Reduzierte Entwicklungskosten durch wiederverwendbare, agentengesteuerte Komponenten
• Bessere Skalierbarkeit bei wachsender Komplexität von Anwendungsfällen

Sie möchten A2UI in Ihrem Projekt einsetzen oder generative UI-Patterns evaluieren? Wir unterstützen Sie bei der strategischen Bewertung, Architektur-Design und Implementation. Kontaktieren Sie uns für ein unverbindliches Gespräch.