Einen Shop-Assistenten wie in unserer Demo bauen

Demo ansehen

Die Retail-Demo macht aus einem Shopkatalog zwei hilfreiche Einkaufserlebnisse. Fragen Sie nach „einem Geschenk für jemanden, der gern draußen ist, unter 60 €“, und Sie erhalten eine verständliche Empfehlung mit echten Produkten und Quellenlinks.

Diese Anleitung erklärt den Aufbau in der Reihenfolge, in der sich die Entscheidungen am leichtesten nachvollziehen lassen: mit dem Katalog beginnen, die Einkaufserlebnisse wählen, Live-Daten dort ergänzen, wo sie zählen, und dann das Ergebnis testen.

1. Mit dem Katalog beginnen

Der Katalog ist die verlässliche Quelle des Assistenten. Legen Sie einen Memory-Datensatz an und führen Sie dann einen Website-Erfassungsjob über die Seiten aus, die echte Kauffragen beantworten.

Einbeziehen: Produkt- und Kategorieseiten, Größen- und Passformratgeber sowie Hilfeseiten zu Versand und Rückgabe.

Ausschließen: Warenkorb-, Checkout-, Konto- und Marketingseiten. Sie erzeugen Rauschen, ohne dem Assistenten bei Kundenfragen zu helfen.

Prüfen Sie nach Abschluss der Erfassung eine Stichprobe der Einträge. Produktnamen, Preise, kanonische URLs, Größenhinweise und Rückgabedetails sollten vorhanden und lesbar sein. Ein doppelter Navigationsblock oder ein Druck-Stylesheet kann das Retrieval im gesamten Erlebnis schwächen.

Siehe Eine Wissensdatenbank aufbauen und Datenerfassungsjobs konfigurieren.

2. Jeder Kaufabsicht die passende Oberfläche geben

Die Demo nutzt zwei Erlebnisse, weil Kunden mit unterschiedlichen Bedürfnissen kommen.

Das Suchcenter erscheint auf der Startseite und auf einer eigenen Suchseite. Der schwebende Chat bleibt im gesamten Shop verfügbar. So bleibt eine schnelle Produktanfrage schnell, ohne dass ein Kunde, der Beratung braucht, in einem Suchfeld von vorn anfangen muss.

Die Wissensdatenbank gemeinsam nutzen

Die beiden Erlebnisse haben unterschiedliche Einstiegspunkte, Darstellungsmodi und Funktionen, nutzen aber einen Datensatz. Das ist gewollt:

• Antworten konsistent halten. Eine Produktangabe sollte sich nicht danach richten, wo jemand fragt.
• Den Katalog nur einmal pflegen. Eine Änderung wird einmal neu indexiert, und beide Erlebnisse erhalten sie.
• Funktionen ergänzen, ohne das Wissen aufzuteilen. Der Chat kann Formulare und Live-Abfragen nutzen und trotzdem aus demselben Katalog antworten wie die Suche.

Betrachten Sie die Wissensdatenbank als gemeinsamen Datenbestand des Shops und die beiden Erlebnisse als unterschiedliche Zugänge dazu.

„Ein Katalog, zwei Wege, einem Kunden bei der Entscheidung zu helfen.“

Eine enge, nützliche Persona festlegen

Der Stylist ist ein persönlicher Stylist für diesen Shop, kein Allzweck-Assistent. Seine Verhaltensanweisungen legen Rolle und Ton fest und definieren dann die Leitplanken:

• Nur Artikel empfehlen, die im Katalog vorkommen.
• Das empfohlene Produkt zitieren.
• Keine Preise oder Bestände behaupten, die sich nicht überprüfen lassen.
• Offen sagen, wenn die verfügbaren Informationen die Frage nicht beantworten.

Fügen Sie einen Namen, einen Avatar und eine Begrüßung hinzu, die zum Shop passen. Klare Anweisungen und eine fokussierte Rolle machen den Assistenten verlässlicher als ein vager Prompt wie „hilfsbereiter Assistent“.

Siehe Einen Assistenten erstellen und Einen Assistenten starten.

3. Die Suche für natürliche Fragen konfigurieren

Legen Sie auf dem gemeinsamen Katalog-Datensatz ein Intelligentes Suchcenter an. Anders als ein reines Stichwort-Suchfeld kann es eine begründete Antwort zusammen mit den Produktkarten liefern, die sie belegen.

Verwenden Sie einen Platzhaltertext, der zu einer echten Frage einlädt, etwa „Finde ein Geschenk, ein Outfit oder die richtige Größe …“. Ist die Suche leer, zeigen Sie eine kurze Begrüßung und ausgewählte Produkte. So wirkt die Seite nützlich, bevor ein Kunde etwas eingetippt hat.

Vorschläge zeigen lassen, was wirklich möglich ist

Vorschläge sind Produkttexte. Jeder sollte zu einer Antwort führen, die der Katalog oder ein Live-Dienst tatsächlich stützen kann.

• Ein Geschenk für jemanden, der gern draußen ist, unter 60 €
• Stell mir ein Smart-Casual-Outfit für unter 150 € zusammen
• Welcher Rucksack eignet sich am besten für den täglichen Arbeitsweg bei Regen?
• Wo ist meine Bestellung und wann kommt sie an?

Zusammen zeigen diese Beispiele Geschenke, Styling, Produktvergleich und Live-Hilfe zum Konto. Siehe Ein Suchcenter aufbauen, Ein Suchcenter aus Website-Inhalten erstellen und Nützliche Vorschläge für Ihr Suchcenter schreiben.

4. Formulare nutzen, wenn ein paar Angaben die Antwort verbessern

Für eine direkte Frage wie „Welcher Rucksack eignet sich am besten für den Arbeitsweg bei Regen?“ reicht Text. Styling und Größenwahl brauchen etwas mehr Kontext. Die Demo erfasst ihn mit kurzen Formularen im Gespräch.

Konfigurieren Sie für jedes Formular drei Dinge: wann es erscheint, welche Felder abgefragt werden und was beim Absenden passiert. Ein gut platziertes Formular macht aus einer offenen Stöberfrage eine strukturierte Anfrage, ohne den Kunden durch ein langes Gespräch zu zwingen.

Siehe Leads erfassen und Formulare nutzen.

5. Live-Aktionen für Kontofragen anbinden

Kataloginhalte beantworten Was verkaufen Sie? Live-Aktionen beantworten Wo ist meine Bestellung?

Registrieren Sie jede Live-Abfrage als verknüpften Dienst. Der Assistent ruft den Dienst über eine kurze ID auf; der echte Endpunkt und geheime Header bleiben serverseitig und gelangen nicht in den Browser.

Die Einrichtung ist bewusst schlank:

1. Geben Sie dem Dienst eine ID, eine Methode und eine URL.
2. Verwenden Sie {{params.x}}-Platzhalter für URL-Werte pro Aufruf. Sie werden URL-kodiert.
3. Bewahren Sie Geheimnisse in einem Authentifizierungs-Header auf.
4. Übergeben Sie die Dienst-ID als proxyId aus einem Formular oder rufen Sie sie direkt aus einem Widget oder einer Schaltfläche auf.

// Look up the signed-in shopper's order, then render the reply in the conversation.
skdwn.instance.executeProxyRequest(
  'order-status',            // the linked-service ID
  { orderId },               // request body (POST)
  (res) => renderReply(res), // endpoint response
  { locale: 'en' }           // fills {{params.locale}} in the service URL
);

Lassen Sie den Endpunkt eine kleine, darstellungsfertige Antwort zurückgeben: ein Markdown-reply und eine references-Liste. Das ist einfacher und zuverlässiger, als den Assistenten rohes Domain-JSON formatieren zu lassen.

Siehe Verknüpfte Dienste und Assistenten-Formulare.

6. Das Erlebnis an die Seite anpassen

Passen Sie den Darstellungsmodus des Assistenten an die Seite an, auf der sich der Kunde befindet.

Legen Sie das Basis-Template (Overlay oder eingebettet) und die schwebende Aktionsschaltfläche pro Seite fest. Seitenbezogene Metadaten können eine Beschreibung, Vorschläge und zusätzlichen Kontext liefern. Auf einer Produktseite bleibt eine einfache Frage so an Ort und Stelle; auf einer Kontoseite wird das Gespräch auf die Bestellungen des Kunden zugeschnitten.

Die Bildsprache des Shops übernehmen

Stimmen Sie Marken- und Akzentfarben, Flächen, Texte, die primäre Schaltfläche und den Kopfbereich der Suche auf die Website ab. Das Erscheinungsbild wird an der Entität konfiguriert und erreicht die Live-Einbettung unabhängig von einem Website-Deployment – Sie können es also direkt an der echten Seite feinjustieren.

Siehe den Abschnitt zum Erscheinungsbild in Einen Assistenten starten.

7. Einbettung und Kundenkontext hinzufügen

Laden Sie die Runtime einmal und starten Sie dann den Assistenten in seinem Container.

<div id="seekdown-assistant-root"></div>
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>
<script>
  skdwn.startAssistant({ assistantId: 'your-assistant-id', accessToken: 'your-api-key' });
</script>

Um Shopsuche und schwebenden Stylisten auf derselben Seite zu nutzen, geben Sie jedem einen eigenen Container und starten Sie jeden mit seinen eigenen Darstellungseinstellungen:

skdwn.startAssistant({ assistantId: 'store-search', container: '#store-search',
  config: { settings: { baseTemplate: 'overlay' } } });
skdwn.startAssistant({ assistantId: 'stylist', container: '#stylist',
  config: { settings: { floatingActionButton: { useFloatingActionButton: true } } } });

Übergeben Sie für Bestellfragen den angemeldeten Kunden einmal beim Laden des Assistenten. userId und ein knapper additionalContext-String stehen dann jeder Antwort und der Analyse zur Verfügung.

skdwn.startAssistant({ assistantId: 'stylist', accessToken: 'your-api-key',
  userId: shopper.id,
  additionalContext: 'Signed-in shopper: ' + shopper.name + ', 2 open orders.' });

Erzeugen Sie vor dem Start einen API-Schlüssel und tragen Sie Ihre Website bei den erlaubten Origins ein. Siehe Einen Assistenten bereitstellen, einschließlich erlaubter Origins.

8. Mit Zuversicht aufbauen und pflegen

Der Großteil dieses Aufbaus ist Konfiguration plus ein wenig Integrationscode. Wenn Sie einen MCP-Client wie Claude Code, GitHub Copilot oder Codex nutzen, kann er direkt mit Ihrem Seekdown-Workspace arbeiten. Er kann Endpunkte für Bestellungen und Bestand vorbereiten, die Einbettung schreiben, Verhaltensanweisungen und Vorschläge entwerfen und den Live-Assistenten anhand eines klaren Briefings testen. Siehe MCP-Clients verbinden.

Die Fragen testen, die Kunden wirklich stellen

Testen Sie mehr als ausgefeilte Demo-Prompts. Nehmen Sie auf:

• Exakte Produktnamen und allgemeine Anfragen wie „ein Geschenk für meinen Vater“.
• Fragen zu Größe und Passform.
• Fragen zum Bestellstatus.
• Fragen zu Produkten, die Sie nicht verkaufen.

Prüfen Sie bei jedem Ergebnis sowohl die schriftliche Antwort als auch das verlinkte Produkt. Eine Antwort mit der falschen Quelle ist trotzdem ein Fehler.

Die Antworten aktuell halten

Legen Sie einen Erfassungszeitplan fest, der zur Änderungshäufigkeit des Katalogs passt. Bestätigen Sie nach einer Preis-, Produkt- oder Richtlinienänderung die Änderung an drei Stellen: auf der Quellseite, im Datensatz-Eintrag und in der Antwort des Assistenten.

Verwandte Themen: Eine Wissensdatenbank aufbauen · Ein Suchcenter aufbauen · Einen Assistenten erstellen · Verknüpfte Dienste · Einen Assistenten bereitstellen · MCP-Clients verbinden. Die Variante dieses Aufbaus für einen technischen Katalog finden Sie unter So wurde die Industriekatalog-Demo gebaut.