Antwortvorlagen für KI-Agenten

Antwortvorlagen ermöglichen die Integration visueller Elemente wie Slider oder URL-Buttons in die Antworten eines KI-Agenten. Die strukturierte Aufbereitung verbessert das Erlebnis der Nutzer:innen und lenkt den Fokus gezielt auf Produkte oder spezifische Dienstleistungen. So können die Vorlagen die Interaktionsrate erhöhen und Nutzer:innen gezielter durch das Widget führen. Slider lassen sich zusätzlich direkt mit Daten aus einer KI-Aktion befüllen, zum Beispiel mit Produkten aus einem Shop-System.

Inhaltsverzeichnis

1. Funktionsweise

2. Antwortvorlage anlegen
    2.1 Bilddarstellung und Bildquelle
    2.2 Kartenkonfiguration

3. Slider mit Daten aus KI-Aktionen befüllen
    3.1 Action-Daten oder KI-generiert
    3.2 Ablauf im Chat und Voraussetzungen
    3.3 Vorlage mit Action-Daten einrichten
    3.4 Beispiel: Waschmaschinen-Shop

4. Anwendungsbeispiele
    4.1 Produktsuche
    4.2 Veranstaltungsinformationen

1. Funktionsweise

1. Funktionsweise

Unter Knowledge Base lassen sich zwei Vorlagentypen erstellen: Slider (Karten) und Buttons. Diese Vorlagen stehen dem KI-Agenten zur Verfügung und werden in Antworten verwendet, wenn dies für den KI-Agenten passend erscheint bzw. wenn vorgegebene Bedingungen in der Anweisung (RAG) erfüllt sind.

Bei Slidern legt die Kartenquelle fest, wer die Karten befüllt:

• KI-generiert: Der KI-Agent schreibt Titel, Beschreibung und Buttons für jede Karte anhand der Anweisungen. Anstatt statische Antworten zu hinterlegen, werden die einzelnen Felder „gepromptet“. Der KI-Agent erhält dabei Anweisungen, welche Art von Information (z. B. ein Veranstaltungstitel oder ein Preis) an welcher Stelle erscheinen soll.
• Action-Daten: Die Karten entstehen direkt aus der Antwort einer KI-Aktion, eine Karte pro Element. Mehr dazu in Kapitel 3.

2. Antwortvorlage anlegen

Antwortvorlagen werden im Hub unter Knowledge Base > Antwort Vorlagen angelegt.

1. Im Menüpunkt Knowledge Base öffnet ein Klick auf den Pfeil rechts neben Antwort Vorlagen den Bereich.
2. Im Drop-down Vorlage auswählen … stehen vier Vorlagentypen zur Wahl: Produkt-Slider, Veranstaltungs-Slider, Leere Vorlage für Sliders und Leere Vorlage für Buttons.

3. Ein Klick auf das Plus-Symbol neben der gewählten Vorlage öffnet die Eingabemaske Neue Vorlage.
4. Die Eingabemaske enthält drei Felder:
   • Vorlagenname: eine eindeutige Bezeichnung der Vorlage.
   • Anweisung: legt fest, in welchem Kontext der KI-Agent die Vorlage nutzt (z. B. „Wenn Produkte aufgelistet werden sollen, nutze diese Vorlage.“).
   • Der Antwort-Text dient als einleitender Satz vor den visuellen Elementen.

Bei Produkt-Slider und Veranstaltungs-Slider sind Vorlagenname und Anweisung bereits passend ausgefüllt, nur der Antwort-Text muss angepasst werden.

2.1 Bilddarstellung und Bildquelle

Bilddarstellung legt fest, wie Bilder auf den Karten erscheinen:

• Füllen (zuschneiden): Standard. Das Bild füllt die ganze Fläche der Karte, die Ränder werden abgeschnitten.
• Einpassen (ganzes Bild): Das ganze Bild bleibt sichtbar. Ideal für Produktfotos.

Bildquelle legt fest, woher das Bild kommt:

• Aus der Bild-URL: Standard. Die Bild-URL wird beim Erstellen der Antwort gefüllt, aus der Knowledge Base oder aus den Daten einer KI-Aktion.
• Von der verlinkten Seite: Die Karte zeigt automatisch das Vorschaubild der Seite, auf die ihr erster Button mit Link verweist. Dieses Vorschaubild erscheint auch in Messengern, wenn ein Link geteilt wird.

Mit Von der verlinkten Seite müssen Bilder nicht mehr einzeln gesucht oder hochgeladen werden. Das Bild zeigt direkt, wohin der Link führt, und bleibt automatisch aktuell. Fehlerhafte oder erfundene Bild-URLs auf Produkt- und Landingpage-Karten sind damit ausgeschlossen.

2.2 Kartenkonfiguration

Die Karten-Konfiguration legt fest, wie der KI-Agent die Karten befüllt. Die Konfiguration gilt für die Kartenquelle KI-generiert, die standardmäßig eingestellt ist. Die Kartenquelle Action-Daten beschreibt Kapitel 3.

Ein Klick auf den Pfeil rechts neben dem Kartennamen klappt die Karte für die detaillierte Konfiguration auf.

Bild URL, Titel und Untertitel können konkrete Links oder Namen enthalten oder Anweisungen. Der KI-Agent setzt die Anweisungen um und passt die Inhalte dynamisch an die Ergebnisse an. Im Beispielbild unten sind Anweisungen hinterlegt.

Ein Klick auf Karte hinzufügen ordnet der Vorlage weitere Karten zu.

Unter Buttons fügt ein Klick auf das Plus-Symbol der Karte Buttons hinzu. Buttons leiten Nutzer:innen zu Produkten oder Dienstleistungen weiter und erhöhen so die Klickrate. Titel und Button URL können konkrete Werte enthalten (z. B. „Größe auswählen“, „Mehr erfahren“, „Artikel öffnen“) oder Anweisungen (z. B. „Die Produkt-URL“). Der KI-Agent platziert die URLs dynamisch an der passenden Stelle.

Bei der Leeren Vorlage für Buttons entstehen die Buttons nach demselben Prinzip direkt unter Buttons, ohne Karten.

Ein Klick auf Erstellen speichert die Antwortvorlage.

3. Slider mit Daten aus KI-Aktionen befüllen

Mit der Kartenquelle Action-Daten entstehen Slider direkt aus der Antwort einer KI-Aktion mit Webhook, zum Beispiel aus einer Produktauswahl in einem Shop-System. Jedes Element der Antwort wird zu einer Karte. Welche Informationen auf der Karte stehen, wird einmalig in der Vorlage festgelegt.

3.1 Action-Daten oder KI-generiert

Bei der Kartenquelle KI-generiert liest der KI-Agent die Antwort der KI-Aktion und schreibt jede Karte selbst: Titel, Beschreibung, Bild und Buttons. Dieser Weg funktioniert, dauert bei vielen Elementen aber länger. Außerdem kann der KI-Agent Werte umformulieren, kürzen oder vertauschen, obwohl die Daten bereits fertig vorliegen.

Bei Action-Daten überträgt das System die Werte direkt an die richtige Stelle der Karte. Der KI-Agent ruft nur die KI-Aktion auf und wählt die passende Vorlage. Action-Daten bieten drei Vorteile:

• Verlässlich: Die Karten zeigen exakt die Werte aus der Antwort.
• Einheitlich: Jede Karte ist gleich aufgebaut, unabhängig von der Anzahl der Elemente.
• Tendenziell schneller: Der KI-Agent muss die Karten nicht selbst ausformulieren.

3.2 Ablauf im Chat und Voraussetzungen

So läuft eine Antwort mit Action-Daten ab:

1. Nutzer:innen fragen im Chat zum Beispiel: „Welche Waschmaschinen habt ihr unter 700 €?“
2. Der KI-Agent ruft die passende KI-Aktion auf. Sie liefert die Datensätze, und anhand der Anweisung wählt der KI-Agent die passende Antwortvorlage.
3. Das System findet die Liste in der Antwort und erstellt pro Element eine Karte nach der Karten-Konfiguration.
4. Im Chat erscheinen der Antwort-Text und darunter der Slider.

Voraussetzungen:

• Eine KI-Aktion mit Webhook ist eingerichtet und liefert eine Liste von Datensätzen, zum Beispiel Produkte.
• Der Aufbau der Webhook-Antwort ist bekannt, also welche Felder es gibt und wie sie genau heißen. Im Zweifel hilft die Person, die den Webhook technisch umgesetzt hat.

3.3 Vorlage mit Action-Daten einrichten

Schritt 1: Grunddaten

Vorlagenname, Anweisung und Antwort-Text wie in Kapitel 2 beschrieben eintragen.

Schritt 2: Bildquelle und Kartenquelle

1. Unter Bildquelle festlegen, woher das Bild kommt (siehe Kapitel 2.1). Von der verlinkten Seite eignet sich, wenn die KI-Aktion keine Bild-URLs liefert. Bei Buttons aus einer Liste gilt der erste Listeneintrag als erster Button mit Link.
2. Unter Kartenquelle die Option Action-Daten wählen.
3. Im Feld Webhook Action die KI-Aktion auswählen, deren Antwort die Karten liefern soll.
4. Optional im Feld Max. Karten die Anzahl der Karten begrenzen. Bleibt das Feld leer, gibt es kein Limit. Ein Limit ist sinnvoll, wenn die KI-Aktion sehr viele Treffer liefern kann.

Schritt 3: Pfad zu den Elementen

Im Feld Pfad zu den Elementen angeben, wo in der Webhook-Antwort die Liste liegt, aus der die Karten entstehen:

Alle anderen Angaben in der Antwort, etwa ein Status oder die Anzahl der Treffer, werden ignoriert.

Schritt 4: Karten gestalten

Bei Action-Daten gibt es nur eine Karte in der Karten-Konfiguration. Sie dient als Vorlage und wird für jedes Element der Antwort wiederholt. Platzhalter in doppelten geschwungenen Klammern, zum Beispiel {{ modell }}, ersetzt das System beim Anzeigen durch den Wert aus der Webhook-Antwort.

In der Karten-Konfiguration die Felder mit Platzhaltern befüllen:

• Bild URL: nur relevant bei der Bildquelle Aus der Bild-URL, zum Beispiel {{ bild }}.
• Titel: zum Beispiel {{ marke }} {{ modell }}.
• Beschreibung: Freitext mit Platzhaltern. Über die Werkzeugleiste lässt sich der Text formatieren: fett, kursiv, Aufzählungen, nummerierte Listen und Links.

Für Platzhalter gelten drei Regeln:

• Bezugspunkt ist das einzelne Element der Liste: also {{ modell }}, nicht der vollständige Pfad durch die gesamte Antwort.
• Verschachtelte Angaben werden mit einem Punkt erreicht: {{ preis.betrag }}.
• Freitext und Platzhalter lassen sich frei kombinieren: Jetzt {{ preis.betrag }} € statt {{ preis.uvp }} €.

Die Werte erscheinen unverändert auf der Karte, so wie sie in der Webhook-Antwort geliefert werden. Preise sollte die KI-Aktion daher bereits im gewünschten Format liefern, zum Beispiel „549,00“.

Schritt 5: Buttons festlegen

Unter Buttons eine der beiden Optionen wählen:

• Feste Buttons: Die hier angelegten Buttons erscheinen auf jeder Karte und werden mit den Werten des jeweiligen Elements befüllt, zum Beispiel immer „Zum Produkt“. Weitere Buttons über das Plus-Symbol ergänzen.
• Aus einer Liste: Bringt jedes Element eine eigene Liste von Links mit, entsteht pro Eintrag ein Button. Die Anzahl kann sich von Karte zu Karte unterscheiden. Im Feld Pfad zu den Buttons angeben, wo die Liste innerhalb des Elements liegt, zum Beispiel links. In Titel und Button URL beziehen sich die Platzhalter auf den jeweiligen Listeneintrag, zum Beispiel {{ label }} und {{ url }}.

3.4 Beispiel: Waschmaschinen-Shop

Ein Shop liefert auf Anfrage eine Liste von Waschmaschinen. Die Webhook-Antwort sieht so aus:

[
  {
    "artikelnummer": "WM-8014",
    "marke": "Nordwerk",
    "modell": "AquaPro 8",
    "kapazitaet_kg": 8,
    "drehzahl": 1400,
    "energieklasse": "A",
    "preis": "549,00",
    "bild": "https://shop.example.de/img/wm-8014.jpg",
    "url": "https://shop.example.de/p/wm-8014"
  },
  {
    "artikelnummer": "WM-9216",
    "marke": "Weißhaus",
    "modell": "SilentCare 9",
    "kapazitaet_kg": 9,
    "drehzahl": 1600,
    "energieklasse": "A",
    "preis": "679,00",
    "bild": "https://shop.example.de/img/wm-9216.jpg",
    "url": "https://shop.example.de/p/wm-9216"
  }
]

Die passende Konfiguration:

Ergebnis: Im Chat erscheinen zwei Karten, zum Beispiel „Nordwerk AquaPro 8“ mit der Beschreibung „8 kg, 1400 U/min, Energieklasse A. Preis: 549,00 €“ und den Buttons „Zum Produkt“ und „Verfügbarkeit prüfen“.

Variante: Buttons aus einer Liste

Bringt jedes Produkt eigene Links mit, zum Beispiel so:

"links": [
  { "label": "Zum Produkt", "url": "https://shop.example.de/p/wm-8014" },
  { "label": "Datenblatt (PDF)", "url": "https://shop.example.de/datenblatt/wm-8014.pdf" }
]

Dann bei den Buttons Aus einer Liste wählen:

Hat ein Produkt zwei Links und ein anderes drei, erhält die erste Karte zwei Buttons und die zweite drei.

4. Anwendungsbeispiele

Die folgenden Beispiele nutzen die Kartenquelle KI-generiert.

4.1 Produktsuche

Dieses Beispiel zeigt, wie eine Produktpalette in einem Slider mit Bild und Text für den Verkauf aufbereitet wird. Auf die Frage „Welche Sneaker gibt es?“ zeigt der KI-Agent einen Slider mit allen verfügbaren Sneakern, darunter eine Karte mit weißen Nike Air Force mit Bild, Preis und dem Button Jetzt kaufen.

4.2 Veranstaltungsinformationen

Wenn Nutzer:innen nach Messen oder Events fragen, generiert der KI-Agent einen Slider mit aktuellen Terminen. Beispiel: Auf die Frage „Auf welchen Messen seid ihr 2026?“ zeigt der KI-Agent einen Slider mit allen Veranstaltungen, darunter eine Karte zur CCW 2026 mit Bild, Datum und dem Button Mehr erfahren.