Der Gen UI (Generative UI) Block ist eines der leistungsstärksten Tools in SendBot. Er ermöglicht es Ihnen, benutzerdefinierte und interaktive UI-Komponenten direkt in der Konversation zu rendern, was weit über Standard-Textblasen hinausgeht. Dieser Block kann auf zwei Arten verwendet werden: Manuell (von Ihnen im Studio konfiguriert) oder Generativ (dynamisch von einer KI generiert).

​
Was ist Gen UI?

Im Gegensatz zu einer Text- oder Bildblase ist Gen UI ein „Container“ für React-Komponenten. Das bedeutet, dass Sie alles anzeigen können, von einem Buchungskalender bis hin zu einem komplexen Finanzdiagramm, sofern die Komponente in Ihrem Webchat-Paket registriert ist.

​
Manuelle Konfiguration

Wenn Sie im Studio einen Gen UI-Block hinzufügen, finden Sie zwei Hauptfelder:
  1. Komponentenname: Die eindeutige Kennung der zu rendernden React-Komponente (z. B. booking-calendar, sales-chart, product-card).
  2. Daten (JSON): Ein JSON-Objekt, das die Informationen enthält, die die Komponente zum Funktionieren benötigt. Sie können hier SendBot-Variablen mit der Syntax {{meine_variable}} verwenden.

​
Konfigurationsbeispiel

  • Name: product-card
  • Daten:

​
Manuelle Einsatzszenarien

Die manuelle Nutzung ist ideal für Situationen, in denen Sie Vorhersehbarkeit und Leistung benötigen.

​
1. Buchungs-Widgets

Wenn Sie bereits über eine Kalenderkomponente verfügen, können Sie deren Anzeige erzwingen, nachdem der Benutzer eine Dienstleistung ausgewählt hat.
  • Szenario: „Perfekt, wählen Sie nun unten im Kalender die beste Zeit aus.“
  • Vorteil: Deterministisch und schnell, ohne auf die KI angewiesen zu sein, um das Format zu bestimmen.

​
2. Dashboards und Diagramme

Wenn Ihr Bot eine externe API abfragt, können Sie das Ergebnis an eine Diagrammkomponente übergeben.
  • Szenario: Den Treuepunktestand des Benutzers anzeigen.
  • Vorteil: Umfangreiche Datenvisualisierung, die allein mit Text unmöglich wäre.

​
3. Gamifizierte Erlebnisse

Zeigen Sie Rabatträder, digitale Rubbellose oder Avatar-Auswahllisten an.
  • Vorteil: Erhöht das Benutzerengagement mit einer Schnittstelle, die „innerhalb“ des Chats lebt.

​
Einsatzszenarien mit KI (Agent AI)

In Verbindung mit dem Agent AI-Block wird Gen UI wahrhaft „generativ“. Die KI kann basierend auf dem Konversationskontext entscheiden, welche Komponente angezeigt werden soll und welche Daten darin ausgefüllt werden sollen.
  • Beispiel: Der Benutzer sagt: „Ich suche einen Esstisch aus Holz.“ Die KI versteht die Absicht und gibt anstatt nur Links aufzulisten eine product-carousel-Komponente mit den gefilterten Möbeln aus.

​
Best Practices

  • JSON-Validierung: Stellen Sie sicher, dass das eingegebene JSON gültig ist. Der Studio-Editor warnt Sie bei Syntaxfehlern.
  • Fallbacks: Denken Sie daran, dass die Komponente in Ihrem Webchat-Paket verfügbar sein muss, damit sie für den Endbenutzer korrekt gerendert wird.
  • Variablen: Verwenden Sie Variablen, um Komponenten basierend auf den vorherigen Antworten des Benutzers dynamisch zu gestalten.