Generative UI mit A2UI: Von Google zu TYPO3

Feste Designs werden zu anpassbaren Erlebnissen  

Wir bauen Benutzeroberflächen bald ganz anders. Bisher war eine UI für alle Menschen gleich. Menschen haben das Design fest programmiert. Das reicht heute oft nicht mehr. Generative UI ist eine neue Technik. Die Technik macht das Design für jede Person einzeln.

Die Firma Nielsen Norman Group erklärt GenUI so: Künstliche Intelligenz baut sofort eine persönliche Benutzeroberfläche. Früher haben Fachleute ein festes Design programmiert. Heute baut ein intelligentes Programm das beste Design für Sie. Das Programm macht das genau im Moment der Nutzung.

Inhaltsverzeichnis  

Einführung mit Videos: GenUI verstehen  

Wir erklären Ihnen später die genauen technischen Details. Aber zuerst zeigen wir Ihnen 2 Videos. Diese Videos sind ein sehr guter Anfang für das Thema.

Die Firma Nielsen Norman Group erklärt GenUI  

Fachleute von der Nielsen Norman Group erklären Generative UI. Generative UI ist ein englischer Fachbegriff. Er bedeutet: Künstliche Intelligenz baut die Oberfläche von einem Programm. Das ist eine völlig neue Art der Gestaltung.

Google A2UI: Ein genauer technischer Blick  

Dieses Lernvideo zeigt das A2UI-Protokoll von Google im Einsatz. Sie sehen den genauen Aufbau der Daten in JSON. JSON ist ein Format für Daten am Computer. Das Video zeigt auch echte Beispiele für den Einbau.

Das Problem: Programme mit nur Text scheitern  

Programme mit LLM funktionieren gut bei einfachen Fragen. Ein LLM ist ein künstliches Sprachmodell im Hintergrund. Bei schweren Aufgaben ist reiner Text oft schlecht. Sie müssen zum Beispiel viele genaue Daten eingeben. Oder Sie wollen viele Informationen auf einmal sehen. Dann entsteht ein langes Hin und Her. Das kostet viel Zeit. Das strengt Sie als Nutzer sehr an.

Ein Beispiel: Einen Tisch im Restaurant buchen  

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

Besserer Text ist dafür nicht die Lösung. Wir brauchen andere Anzeigen auf dem Bildschirm. Zum Beispiel einen Kalender für freie Zeiten. Oder einen Regler für die Anzahl der Personen. Oder einen Plan mit den Tischen im Raum. Genau hier hilft die Technik A2UI.

A2UI: Die technische Basis für schlaue Benutzeroberflächen  

Agent-to-User Interface heißt kurz A2UI. Das ist eine offene Technik von der Firma Google. Damit können KI-Agenten direkte Benutzeroberflächen bauen. Sie senden nicht nur einfachen Text. Die KI-Agenten erstellen gute Elemente zum Klicken. Diese Elemente passen genau in Ihre Anwendung.

Vier wichtige Grundsätze  

Aufbau: Vom Plan zur fertigen Anzeige  

Der wichtigste Grundsatz: A2UI ist "sicher wie reine Daten". Es bietet aber viele Möglichkeiten wie echter Code. Das ist ein großer Vorteil für viele Firmen. Firmen nutzen diese Technik deshalb sehr gerne.

Ein Beispiel für die Daten  

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

Die KI beschreibt nur das Ziel. Sie beschreibt nicht die genaue Umsetzung. Ihr Programm entscheidet über das genaue Aussehen. Ein Baustein wie date-picker sieht immer passend aus. Das Aussehen passt so perfekt zu Ihrer Marke.

Beispiele: Von der Idee in die Praxis  

Restaurant-Suche mit einer Landkarte  

Sie bekommen keine lange Liste mit Text. Sie erhalten eine Karte mit Ergebnissen. Sie können diese Karte direkt anklicken. Jedes Ergebnis verbindet sich sofort mit Google Maps. Alles fühlt sich wie eine eigene App an.

Drei wichtige Bereiche  

Die Kommunikation zwischen Agent und Programm  

A2UI in der Welt der Entwickler  

A2UI ist kein einzelnes Projekt. A2UI ist eine feste Regel für Computer. Diese Regel heißt Protokoll. A2UI arbeitet mit anderen Programmen zusammen. Programme für Künstliche Intelligenz entwickeln sich sehr schnell.

Zusammenarbeit von Techniken  

A2A: Die Regel für den Austausch zwischen Agenten  

A2UI regelt den Austausch zwischen Agent und Mensch. Google hat noch eine zweite Regel. Diese Regel heißt Agent2Agent. Die Abkürzung dafür ist A2A. A2A regelt den Austausch zwischen Agenten untereinander. Beide Regeln zusammen sind sehr wichtig. Sie bilden die Grundlage für moderne KI-Systeme.

Google zeigte A2A im April 2025. Mehr als 50 Firmen unterstützen diese Technik. Bekannte Firmen sind zum Beispiel PayPal, SAP und Salesforce. Die Regel nutzt bewährte Techniken. Diese Techniken heißen HTTP, SSE und JSON-RPC.

Wichtige Grundsätze von A2A

Beispiel aus der Praxis: Suche nach Personal

Das ist ein typisches Beispiel für A2A. Ein Chef sucht neues Personal für die Entwicklung. Der Chef gibt seinem Agenten einen Auftrag:

1. Der Haupt-Agent bekommt den Auftrag. Er sucht nach passenden Spezial-Agenten.
2. Ein Sourcing-Agent sucht in Systemen mit Bewerbern.
3. Ein Screening-Agent prüft das Können der Bewerber.
4. Ein Calendar-Agent plant die Termine für Gespräche.
5. Ein Background-Check-Agent prüft den Lebenslauf der Bewerber.

Alle Agenten sprechen über A2A miteinander. Der Chef sieht die Ergebnisse über A2UI. Alle Systeme arbeiten ohne Probleme zusammen.

Vergleich: A2UI und andere Systeme  

Es gibt einen wichtigen Unterschied zu MCP Apps: MCP behandelt die Benutzeroberfläche als reine Datenquelle. Das passiert oft in einem abgetrennten Fenster. A2UI wählt einen anderen Weg. Die Benutzeroberfläche passt sich immer an das eigene Programm an. Ein Leit-Programm kann die Nachrichten von Unter-Agenten sehr leicht verstehen.

Meinungen aus der Wirtschaft  

Große Technik-Firmen nutzen A2UI bereits. Hier sind einige Meinungen dazu:

Der Plan für die Zukunft und wie Sie mitmachen können  

Google hat A2UI absichtlich sehr früh veröffentlicht. Es ist jetzt auf der Version 0.8. Das fördert die offene Zusammenarbeit. Sie sind herzlich eingeladen. Gestalten Sie die Zukunft von A2UI gemeinsam mit uns.

Der offizielle Plan bis zur Version 1.0  

Das Open-Source-Repository  

A2UI im Enterprise CMS TYPO3  

Ein Enterprise CMS ist ein großes System für Internetseiten. A2UI und TYPO3 arbeiten sehr gut zusammen. Das bringt neue Möglichkeiten für das Backend. Das Backend ist der Bearbeitungsbereich der Internetseite. Das Backend passt sich nun an Ihre Arbeit an.

Das bringt diese Vorteile für Sie als Redakteur:

• Sie bekommen automatisch passende Formulare für Ihren Inhalt.
• Eine künstliche Intelligenz hilft Ihnen bei der SEO-Optimierung.
• SEO bedeutet: Sie verbessern die Internetseite für Suchmaschinen.
• Ihre Arbeitsabläufe passen sich genau an Ihre Aufgabe an.

Die Zukunft: KI hilft bei der Arbeit mit TYPO3  

Überblick über die Architektur  

Test-Extension: a2ui_integration  

Ich zeige Ihnen hier eine fertige TYPO3-Extension. Diese Extension zeigt die neuen A2UI-Ideen. Das funktioniert in TYPO3 Version 13 und 14.

Aufbau der Extension

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

1. Einstellungen der Extension

{
"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-Modul anmelden

<?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. Wichtige Datenmodelle

<?php

declare(strict_types=1);

namespace Webconsulting\A2uiIntegration\Domain\Model;

/**
* A2UI-Komponentenmodell
* Steht für eine einzelne Komponente im A2UI-Protokoll.
*/
class A2UIComponent
{
  protected string $id;
  protected string $type;
  protected array $props;

4. Service-Ebene

<?php

declare(strict_types=1);

namespace Webconsulting\A2uiIntegration\Service;

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

/**
* Agentenservice
* Dieser Service spielt einen KI-Agenten nach. Der Agent erstellt die Komponenten.
* Im echten Betrieb ruft das eine echte KI auf.
*/
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;

/**
* Controller für das A2UI-Backend-Modul.

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 für das TYPO3 Backend.
* Dieser Teil kümmert sich um die Klicks und Eingaben im A2UI.
*/
class A2UIRenderer {
constructor() {
  this.components = new Map();
  this.eventHandlers = new Map();
}

/**
 * Lade die A2UI-Daten in das Ziel-Element.
 */
async render(payload, targetElement) {
  if (typeof payload === 'string') {

Schritt für Schritt: Eine Extension ganz neu bauen  

Machen Sie die A2UI-Extension selbst. Nutzen Sie dafür diese Anleitung. Eine Extension ist eine Erweiterung für ein Computer-Programm. Jeder Schritt baut auf dem letzten Schritt auf.

Schritt 1: Das Grundgerüst für die Extension bauen

Bauen Sie zuerst die Ordner und die wichtigsten Dateien:

# In den TYPO3-Ordner wechseln
cd /var/www/html/typo3

# Ordner für die Extension anlegen (TYPO3 13 und neuer 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 den Ordner von der Extension wechseln
cd packages/a2ui_integration

Schritt 2: Die grundlegenden Einstellungen

Erstellen Sie diese beiden sehr wichtigen Dateien für die Einstellungen:

<?php
/**
* Einstellungen der Extension für 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',

Schritt 3: Das Domain Model erstellen

Ein Domain Model beschreibt die Daten in einem Programm. Das Model für die A2UIComponent zeigt den Aufbau der Daten. Die Daten nutzen das Format JSON. JSON ist eine Textform für den Datenaustausch:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Domain\Model;

/**
* Steht für ein einzelnes A2UI-Bauteil
* 
* Beispiel für die JSON-Struktur:
* {
*   "id": "field-1",
*   "type": "text-field",
*   "props": {"label": "Name", "required": true}
* }

Wichtige Ideen:

• Unveränderlichkeit (Immutability): Alle Eigenschaften sind schreibgeschützt (readonly). Das macht das Programm sicher.
• Constructor Promotion: Das ist eine Funktion ab PHP 8.2. Damit wird der Code kürzer.
• Verschachtelung: Man kann Bauteile in andere Bauteile stecken.

Schritt 4: Das Register für Bauteile (Sicherheitsschicht)

Das Register nutzt eine Erlaubnisliste. Das nennt man Whitelist. Nur eingetragene Bauteile (Components) sind erlaubt:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Domain\Repository;

use TYPO3\CMS\Core\SingletonInterface;

/**
* Wichtig für die Sicherheit: Liste der erlaubten Bauteile
* 
* Das LLM kann nur diese Bauteile abfragen.
* Das verhindert bösen Code und hält die Oberfläche einheitlich.
*/
class ComponentRegistry implements SingletonInterface

Schritt 5: Der Agent Service (KI-Simulation)

Der AgentService spielt die Logik der KI nur nach. Im echten Betrieb ersetzen Sie das durch echte API-Aufrufe. Ein API-Aufruf ist eine Verbindung zu einem anderen Programm:

<?php

declare(strict_types=1);

namespace Vendor\A2uiIntegration\Service;

use Vendor\A2uiIntegration\Domain\Model\A2UIComponent;

/**
* Spielt einen KI-Agenten nach. Der Agent baut Bauteile für die Oberfläche.
* 
* Im echten Betrieb ersetzen Sie match() durch echte API-Aufrufe:
* - OpenAI GPT-4
* - Google Gemini
* - Anthropic Claude

Schritt 6: Der Renderer Service

Der Renderer ist ein Übersetzer. Er verwandelt die A2UI-Bauteile in TYPO3 Fluid HTML. Fluid HTML ist die Vorlagensprache von TYPO3:

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

/**
* Wandelt A2UI-Bauteile in HTML für das TYPO3 Backend um
*/
class RendererService

Schritt 7: Der Backend Controller

Der Controller ist die Steuerung. Er verbindet alle Teile miteinander. Er stellt die Funktionen als Modul im TYPO3 Backend bereit:

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

Schritt 8: Die Fluid Templates erstellen

Erstellen Sie jetzt die Vorlagen für die Bauteile. Diese Vorlagen heißen 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}"

Schritt 9: Backend-Modul eintragen

Das Backend ist der Verwaltungs-Bereich von Ihrer Internetseite.

<?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' => [

Schritt 10: Erweiterung einschalten und testen

# Autoload erneuern
composer dump-autoload

# Erweiterung einschalten
./vendor/bin/typo3 extension:activate a2ui_integration

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

# Freiwillig: Symlink für öffentliche Dateien erstellen
./vendor/bin/typo3 extension:setup

Die Extension herunterladen  

Möchten Sie die Extension direkt nutzen? Sie müssen nicht alles selbst nachbauen. Hier können Sie die fertige Extension herunterladen. Eine Extension ist eine Erweiterung für ein Programm.

Live-Demo: Vom Wunsch zur Benutzeroberfläche  

Hier sehen Sie ein Beispiel. Ein Nutzer hat ein bestimmtes Ziel. Das Programm baut daraus eine neue Benutzeroberfläche. Man nennt das auch UI.

Installation und Nutzung  

API-Endpunkte  

Wie Sie das System erweitern  

Prüfliste für den Start  

Zusammenfassung: Darum ist das für neue Programme wichtig  

Generative UI mit A2UI ist ein großer Schritt. So bekommen wir sehr schlaue Helfer im Computer. Diese Helfer passen sich gut an. Es gibt 4 große Vorteile:

Eine große Veränderung  

GenUI ist eine ganz neue Technik. Früher bauten Entwickler eine Oberfläche für alle Nutzer. Heute baut die KI eine eigene Oberfläche für jede Person.

Das ist ein sehr wichtiger Schritt. So bekommen wir sehr gute digitale Helfer. Diese Helfer kennen uns und unsere Aufgaben.

Für Firmen bedeutet das:

• Mehr Erfolg: Die Nutzer bekommen genau die passende Oberfläche.
• Weniger Kosten: Die Entwickler sparen viel Zeit und Geld.
• Einfaches Wachstum: Das System wächst bei neuen Aufgaben gut mit.

Möchten Sie A2UI in Ihrem Projekt nutzen? Oder möchten Sie diese neue Technik testen? Wir helfen Ihnen sehr gerne dabei. Wir planen und bauen das System mit Ihnen. Kontaktieren Sie uns für ein erstes Gespräch.