Wie KI-Agenten sichere, native Benutzeroberflächen erstellen

Wir sind in die Zeit der künstlichen Intelligenz mit mehreren Agenten eingetreten. Es gibt jedoch eine sehr wichtige Frage: Wie können entfernte KI-Agenten reichhaltige und interaktive Erlebnisse erzeugen, ohne das System Sicherheitsrisiken auszusetzen? Das Google A2UI-Protokoll (Agent-to-UI) beantwortet diese Frage auf sehr intelligente Weise und ermöglicht es Agenten, Benutzeroberflächen zu erstellen, die vollständig in die gesamte Plattform integriert sind.

Was ist Google A2UI?

A2UI ist ein öffentliches Protokoll, das es KI-Agenten ermöglicht, explizit Benutzeroberflächen zu erstellen JSON-basierte Kommunikation. Anstatt die Kommunikation nur auf Textual content zu beschränken oder die unsichere HTML/JavaScript-Ausführungsmethode zu verwenden, können die Agenten erweiterte Benutzeroberflächen entwickeln, indem sie die bereits genehmigten Komponentenkataloge kombinieren und abgleichen.

Schlüsselinnovation: Agenten kommunizieren ihre UI-Anforderungen; Anwendungen nutzen ihre nativen Frameworks zum Rendern (React, Flutter, Angular, SwiftUI usw.)

Downside, das A2UI löst

In der Welt des Multi-Agent-Mesh arbeiten Agenten verschiedener Unternehmen distant zusammen. Die traditionellen Lösungen sind:

• Nur-Textual content-Schnittstellen – Langsam und ineffizient
• Sandbox-HTML/Iframes – Schwere, optisch unzusammenhängende Sicherheitsrisiken
• Direkte UI-Manipulation – Nicht möglich, wenn die Agenten auf Distant-Servern ausgeführt werden

A2UI eröffnet eine neue Möglichkeit, die Benutzeroberfläche zu senden, die sicher wie Daten, aber ausdrucksstark wie Code ist.

Hauptvorteile von Google A2UI

Hier sind einige der wichtigsten Vorteile von A2UI:

1. Safety-First-Architektur

• Verwendet ein deklaratives Datenformat anstelle von ausführbarem Code
• Agenten dürfen Komponenten aus vertrauenswürdigen und bereits freigegebenen Katalogen übernehmen
• Kein Risiko der Code-Injection, die volle Kontrolle verbleibt beim Kunden

2. LLM-freundliches Design

• Flache Bauteilstruktur mit ID-Referenzen
• Für große Sprachmodelle ist es unmöglich, etwas anderes als inkrementell zu generieren
• Ermöglicht progressives Rendering und Echtzeit-Updates
• Agenten können Schnittstellen Ingredient für Ingredient streamen

3. Framework-unabhängige Portabilität

• Eine JSON-Nutzlast ist für Internet, Mobilgeräte und Desktop gültig
• Funktioniert mit jedem UI-Framework
• Durch die lokale Darstellung wird sichergestellt, dass das Markenerlebnis des Kunden gleich bleibt
• Kein Code Es ist eine plattformspezifische Angabe erforderlich

4. Nahtlose Protokollintegration

• Kompatibel mit dem A2A-Protokoll (Agent-zu-Agent-Kommunikation)
• Funktioniert mit AG-UI für Agent-Benutzer-Interaktionen
• Bereit zur Verbindung mit der vorhandenen Agenten-Infrastruktur

So funktioniert A2UI

Die Funktionsweise von A2UI umfasst vier Phasen:

1. Part 1: Generierung

• Der Agent (Gemini oder ein anderer LLM) ist für die Erstellung einer JSON-Nutzlast verantwortlich.
• Es beschreibt die UI-Elemente und ihre entsprechenden Attribute.
• Es kann entweder UI-Elemente von Grund auf erstellen oder die Vorlagen ausfüllen.

2. Part 2: Transport

• Die JSON-Nachricht wird über das A2A-Protokoll, AG-UI oder REST-APIs versendet.
• Die Kommunikationsmethode ist nicht von einem bestimmten Protokoll abhängig und kann mit jedem Kommunikationskanal verwendet werden.

3. Part 3: Lösung

• Der A2UI-Renderer des Shoppers interpretiert den JSON.
• Es überprüft die Struktur und die Berechtigungen der Komponenten.
• Es stellt sicher, dass alle Komponenten zum vertrauenswürdigen Katalog gehören.

4. Part 4: Rendern

• Es konvertiert die abstrakten Komponenten in ihre jeweiligen nativen Implementierungen.
• Beispielsweise wird das Textfeld zu einer Materials Design-Eingabe, einem Chakra-UI-Feld usw.
• Für das Rendering wird das bereits vorhandene UI-Framework des Shoppers verwendet.

Sicherheitsvorteil: Der Kunde sieht und betreibt nur Komponenten, die vorab genehmigt wurden. Es wird keine unsichere Codeausführung geben.

Sie können sich über anmelden https://a2ui-composer.ag-ui.com/ und nach der Anmeldung müssen Sie den Agenten nur noch auffordern, die Ausgabe zu erhalten.

2. Über das Repository

Sie können auf A2UI zugreifen, indem Sie das Repository klonen https://github.com/google/A2UI und dann die Schnellstart-Demo ausführen. Sie werden sehen, wie von Gemini unterstützte Agenten die Schnittstellen generieren, und Sie können die Komponenten einfach an Ihren Anwendungsfall anpassen.

Praktische Aufgabe 1: Good Price range Tracker

Der alte Weg (textbasiert):

Benutzer: „Was habe ich diesen Monat ausgegeben?“

Agent: „Sie haben 1.234 US-Greenback für Essen ausgegeben, 567 US-Greenback für das Essen auswärts …“

Benutzer: „Welche Kategorie überschreitet das Price range?“

Agent: „Auswärts essen kostet 67 $ mehr als Ihr Price range von 500 $“

Benutzer: „Geben Sie mir einen detaillierten Bericht“

Mit A2UI:

Immediate:

„Ich stelle unten meine Transaktionsdaten bereit. Verwenden Sie diese, um ein Good Price range Tracker-Dashboard zu erstellen. Die Daten:

1. Dezember: 200 $ (Essen)

1. Dezember: 300 $ (Kleidung)

2. Dezember: 500 $ (Reise)

Budgetgrenzen: Legen Sie die Standardgrenzen für jede Kategorie auf 400 $ fest.“

Ausgabe:

Der Agent erstellt sofort ein vollständiges Dashboard mit den folgenden Komponenten:

• Ein interaktiver Schieberegler, der die Verteilung der Ausgaben professional Kategorie anzeigt.
• Die bearbeitbaren Grenzen des Benutzers mit zugehörigen Inline-Textfeldern.
• Mit der Datumsbereichsauswahl können Sie verschiedene Zeiträume vergleichen.
• Die Kategoriefilter mit Kippschaltern.
• Die Trendanalyse zeigt die Ausgabenmuster im Zeitverlauf.
• Die Benutzer interagieren direkt mit den visuellen Komponenten; Daher ist keine Eingabe erforderlich.

Benutzer können Budgets mit Schiebereglern anpassen, Kategorien mit Kontrollkästchen herausfiltern und mit einem einzigen Tastendruck zu Einzelheiten gelangen.

Praktische Aufgabe 2: Taxibuchungssystem

Der alte Weg (textbasiert):

Benutzer: „Buchen Sie ein Taxi“

Agent: „Wo befinden Sie sich?“

Benutzer: „Ich bin in der 123 Essential Road.“

Agent: „Wohin möchten Sie gehen?“

Benutzer: „Ich möchte zur 456 Oak Avenue gehen.“

Agent: „Wann brauchen Sie das Taxi?“

Benutzer: „Ich möchte es so schnell wie möglich.“

Agent: „Welche Artwork von Fahrzeug würden Sie bevorzugen?“

Mit A2UI:

Immediate:

„Generieren Sie eine hochauflösende Taxibuchungsoberfläche mit nur einem Bildschirm basierend auf den folgenden Anforderungen:

### 1. VORBUCHUNGSPHASE (Planungsmodus)

– INTERAKTIVE KARTE: Rendern Sie eine Karte mit einem ziehbaren „Abhol“-Pin (am aktuellen Standort) und einem „Ziel“-Pin. Zeigen Sie die berechnete Route an.

– ADRESSEINGABEN: Zwei Textfelder (Abholung/Ziel) mit automatischer Vervollständigung. Standardziel ist „456 Oak Avenue“.

– FAHRZEUGAUSWAHL: Eine horizontale Liste von Optionen (Economic system, Premium, XL) mit:

– Preise in Echtzeit

– ETA (z. B. „3 Minuten entfernt“)

– Hochwertige Fahrzeugsymbole

– EINSTELLUNGEN:

• Ein Schalter für die Route „Kürzeste vs. Schnellste“.
• Eine Liste „Gespeicherter Orte“ (Zuhause, Arbeit, Fitnessstudio) zur Auswahl mit einem Fingertipp.
• Eine Zeitauswahl, die standardmäßig auf „Jetzt“ eingestellt ist.
• KOSTENSCHÄTZUNG: Eine dynamische Zusammenfassung mit Grundpreis + Steuern.

### 2. ÜBERGANGSLOGIK (Die Aktion „Buchen“)

Wenn der Benutzer auf „Buchung bestätigen“ tippt, wird der Bildschirm nicht gelöscht. Überführen Sie die vorhandene Benutzeroberfläche in den „Reside-Monitoring-Modus“.

### 3. LIVE-TRACKING-PHASE (Aktivmodus)

• KARTEN-UPDATE: Zeigt ein fahrendes Autosymbol an, das den aktuellen Standort des Fahrers darstellt.
• ANKUNFTSKARTE: Ersetzen Sie den Fahrzeugwähler durch eine „Fahrerinformationskarte“, einschließlich:
• Title des Fahrers, Bewertung und Kennzeichen des Fahrzeugs.
• Ein Reside-Countdown-Timer (z. B. „Ankunft in 2 Minuten und 14 Sekunden“).
• KOMMUNIKATION: Fügen Sie zwei One-Faucet-Schaltflächen hinzu: (Fahrer anrufen) und (Fahrernachricht).
• NOTFALL: Fügen Sie eine intestine sichtbare „SOS“-Style hinzu.

### 4. DESIGNSTIL

• Sauberes, kartenzentriertes Structure (wie Uber/Lyft).
• Verwenden Sie schwebende Aktionsblätter für Eingaben, um die Sichtbarkeit der Karte zu maximieren.“

Ausgabe:

Der Agent bereitet eine Buchungsoberfläche mit einem Bildschirm vor mit:

• Eine interaktive Karte mit den Zielen und Abholpunkten
• Adressfelder mit automatischer Vervollständigung und Geolokalisierungsunterstützung
• Zeitauswahl, die standardmäßig auf sofortige Buchung eingestellt ist
• Fahrzeugoptionen, die Reside-Preise und voraussichtliche Ankunftszeiten anzeigen
• Orte, die für häufige Ziele gespeichert sind
• Umschalten der Routenpräferenz (kürzeste vs. schnellste)
• Ein Kostenschätzer-Schieberegler, der sich an Parameter anpasst

Nach der Bestätigung wird dieselbe Schnittstelle aktualisiert mit:

• Reside-Standortverfolgung des Fahrers
• Countdown der voraussichtlichen Ankunft
• Fahrer- und Fahrzeuginformationen
• Schaltflächen für die Kommunikation mit einem Fingertipp

Abschluss

Google A2UI weist auf einen großen Wandel hinsichtlich der Interaktionen der KI-Agenten hin. Die Fähigkeit der Agenten, sichere, umfangreiche und native Benutzeroberflächen zu erstellen, wird die Barrieren beseitigen, die die breite Akzeptanz der Agenten bisher verhindert haben. Agenten werden nun in der Lage sein, Anwendungen wie Budgetierungstools, Buchungssysteme, Projekt-Dashboards oder sogar neue Anwendungskategorien zu erstellen, bei denen A2UI den Einsatz der Technologie verbessern wird.

Gen AI-Praktikant bei Analytics Vidhya
Abteilung für Informatik, Vellore Institute of Expertise, Vellore, Indien

Derzeit arbeite ich als Gen AI-Praktikant bei Analytics Vidhya, wo ich zu innovativen KI-gesteuerten Lösungen beitrage, die Unternehmen in die Lage versetzen, Daten effektiv zu nutzen. Als Informatikstudent im Abschlussjahr am Vellore Institute of Expertise bringe ich solide Grundlagen in Softwareentwicklung, Datenanalyse und maschinellem Lernen in meine Rolle ein.

Kontaktieren Sie mich gerne unter (e mail protected)