Mit einem KI-Coding-Assistenten integrieren

Die empfohlene Integration ist das @openstaticfish/chattybox-npm-Paket. Damit kann Anwendungscode den öffentlichen Schlüssel und die API-URL konfigurieren, die gepflegte ChattyBox-Oberfläche dort einbinden, wo Ihre Komponente hingehört, oder den Headless-Client für eine vollständig eigene Benutzeroberfläche verwenden.

Das eigenständige Skript widget.js wird am Ende als No-Build-Fallback für Websites dokumentiert, die keine npm-Pakete installieren können.

Vor dem Start

Schließen Sie die Einrichtung des Chatbots ab, bevor Sie einen Assistenten bitten, Ihre Anwendung zu bearbeiten:

• Überprüfen Sie repräsentative Antworten und Quellenangaben in Test Chat.
• Erstellen Sie unter Public Keys einen Browserschlüssel und beschränken Sie seine zulässigen Origins.
• Kopieren Sie den öffentlichen Schlüssel und die Widget-API-URL, die unter Embed angezeigt werden.
• Legen Sie fest, in welchen Anwendungsrouten oder Layouts die Integration eingebunden werden soll.

Dies sind öffentliche Browserzugangsdaten, dennoch sollten Sie umgebungsspezifische Werte nicht committen. Geben Sie niemals ein Token für die Konfigurationsbereitstellung, Admin-Zugangsdaten oder eine nicht zugehörige Umgebungsdatei weiter.

Empfohlen: Gepflegte Benutzeroberfläche über npm einbinden

Dies ist der Standard-Prompt für React, Next.js, Vite und andere browserbasierte Anwendungen, die Pakete verwenden.

Anweisung

ChattyBox-npm-Paket integrieren

Integriere ChattyBox in diese Anwendung mit dem npm-Paket @openstaticfish/chattybox.

Öffentliche Browser-Konfiguration:
- API-Schlüssel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Untersuche zuerst Framework, Routing-Modell, Paketmanager, Konventionen für Umgebungsvariablen und das dauerhafte Anwendungslayout. Teile mir vor der Bearbeitung mit, welche Dateien du ändern möchtest. Frage nach, wenn unklar ist, auf welchen Routen ChattyBox erscheinen soll.

Anforderungen:
1. Installiere @openstaticfish/chattybox mit dem Paketmanager, der bereits in diesem Repository verwendet wird.
2. Speichere den öffentlichen API-Schlüssel und die API-URL nach der Konvention des Frameworks für browserseitig verfügbare Umgebungsvariablen. Füge Platzhalternamen zu einer Beispiel-Umgebungsdatei hinzu, aber committe keine echten Werte.
3. Importiere Chattybox aus @openstaticfish/chattybox und erstelle einen Client mit apiKey und baseUrl.
4. Binde die gepflegte Benutzeroberfläche mit client.mountWidget() aus der passenden clientseitigen Komponente oder dem passenden Lifecycle-Hook ein.
5. Binde sie nur in den von mir angegebenen Routen oder dem angegebenen Layout ein und rufe die zurückgegebene remove()-Funktion beim Aufräumen auf, wenn das Framework dies erfordert.
6. Füge widget.js nicht manuell ein, erstelle keinen Backend-Proxy und führe keinen zweiten ChattyBox-Client ein.
7. Bewahre vorhandene Navigation, Rendering-Grenzen, Lokalisierung, Analytics, Einwilligung und Styling.
8. Nimm die kleinste fokussierte Änderung vor und deploye sie nicht.
9. Führe Build, Lint, Type-Check und die relevanten Tests des Repositorys aus.
10. Berichte geänderte Dateien, zu setzende Umgebungsvariablen, den Einbindungsort der Benutzeroberfläche und wie sie auf der bereitgestellten Website getestet wird.

Der resultierende Anwendungscode sollte dieser Form folgen:

import { Chattybox } from '@openstaticfish/chattybox';

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Eine eigene Benutzeroberfläche erstellen

Wählen Sie dies, wenn Ihre Anwendung Nachrichtenliste, Eingabe, Ladezustände, Fehler, Quellenangaben und Position selbst verwalten soll, anstatt die gepflegte Benutzeroberfläche einzubinden.

Anweisung

Eine Headless-ChattyBox-Oberfläche erstellen

Erstelle eine benutzerdefinierte Chatbot-Oberfläche mit dem npm-Paket @openstaticfish/chattybox und seinem Headless-Client.

Öffentliche Browser-Konfiguration:
- API-Schlüssel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Untersuche zuerst Framework, Komponentensystem, Zustandsmuster, Styling, Barrierefreiheitskonventionen und Testkonfiguration der Anwendung. Schlage vor der Bearbeitung die Komponentengrenzen und Dateien vor.

Anforderungen:
1. Installiere @openstaticfish/chattybox mit dem vorhandenen Paketmanager des Repositorys.
2. Konfiguriere einen Chattybox-Client mit apiKey und baseUrl über browserseitig verfügbare Umgebungsvariablen; committe keine echten Werte.
3. Verwende sendMessage() und bewahre conversationId für Folgeanfragen auf.
4. Rendere Antwortquellen als barrierefreie Links und bewahre ihre Reihenfolge.
5. Implementiere Zustände für ausstehend, leer, Fehler, Wiederholung und nicht unterstützte Antworten.
6. Verhindere doppelte Übermittlungen und sorge für eine gut nutzbare Bedienung per Tastatur und Screenreader.
7. Binde die Oberfläche nur in den von mir angegebenen Routen oder dem angegebenen Layout ein.
8. Verwende vorhandene Komponenten und Styles, statt ein neues Designsystem hinzuzufügen.
9. Lade widget.js nicht und rufe mountWidget() nicht auf.
10. Führe Build, Lint, Type-Check und die relevanten Tests aus und berichte anschließend geänderte Dateien und einen Prüfplan.

Hinweise zu Frameworks

Geben Sie dem Assistenten bei Bedarf einen zusätzlichen Satz:

• Next.js App Router: „Lasse Chattybox-Client und mountWidget() in einer kleinen Client Component und rendere diese aus dem vorgesehenen Layout.“
• React SPA: „Binde die Oberfläche aus der persistenten App-Shell oder dem spezifischen Routenlayout ein und räume sie in der Rückgabefunktion des Effekts auf.“
• Docusaurus: „Erstelle eine client-only Theme-Komponente und rendere sie aus src/theme/Root; bewahre die Dokumentationsnavigation und Sprachwechsel.“
• Vue, Nuxt, Svelte oder ein anderes Framework: „Verwende den client-only Mount-Lifecycle des Frameworks und den passenden Cleanup-Lifecycle.“

Eine vorhandene SDK-Integration prüfen

Anweisung

Meine ChattyBox-SDK-Integration prüfen

Prüfe diese ChattyBox-Integration, ohne sie zu deployen oder nicht zugehörigen Code zu ändern.

Prüfe, ob:
1. @openstaticfish/chattybox installiert und importiert wird, statt sein Verhalten zu duplizieren.
2. Ein Chattybox-Client den vorgesehenen öffentlichen API-Schlüssel und die API-URL erhält.
3. Browser-Umgebungsvariablen den Regeln dieses Frameworks für öffentliche Variablen folgen, ohne private Zugangsdaten offenzulegen.
4. mountWidget() oder die eigene Benutzeroberfläche nur in den vorgesehenen Routen erscheint und korrekt aufgeräumt wird.
5. Clientseitige Navigation und erneute Mounts in der Entwicklung keine doppelten Instanzen erzeugen.
6. Vorhandene Rendering-Grenzen, Lokalisierung, Analytics, Einwilligung, Barrierefreiheit und Layout erhalten bleiben.
7. Die Implementierung geeignete Tests und kein unabhängiges Refactoring enthält.

Gib die Ergebnisse nach Schweregrad mit Dateipfaden und Zeilenverweisen zurück. Schlage nur die kleinsten sicheren Korrekturen vor und nenne die genauen Prüf-Befehle.

Kein npm oder Build-Schritt?

Verwenden Sie den widget.js-Installationsleitfaden nur, wenn die Website das npm-Paket nicht verwenden kann – etwa bei einfachem HTML, einem benutzerdefinierten Codefeld eines CMS oder Google Tag Manager.

Anweisung

Fallback-Widget-Skript installieren

Installiere das gehostete ChattyBox-Widget auf dieser Website mit dem exakten Skript, das in meinem ChattyBox-Embed-Tab erzeugt wurde:

[PASTE COMPLETE WIDGET SCRIPT]

Untersuche die Website zuerst und ermittle die sicherste globale Einfügestelle für öffentliche Seiten. Lade das unveränderte Skript genau einmal, schließe private/Admin-/Checkout-Routen aus, bewahre Einwilligungs- und CSP-Verhalten, lege keine privaten Zugangsdaten offen, deploye die Änderung nicht und berichte den geänderten Ort sowie einen Browser-Testplan.

Ergebnis testen

1. Prüfen Sie den Diff und bestätigen Sie, dass keine echten Zugangsdaten committet wurden.
2. Führen Sie den normalen Build, Lint, Type-Check und die Tests des Projekts aus.
3. Deployen Sie über den normalen Prüfprozess.
4. Überprüfen Sie die vorgesehenen Routen in einem privaten Browserfenster, einschließlich clientseitiger Navigation.
5. Stellen Sie eine unterstützte Frage, folgen Sie einer Quellenangabe und testen Sie das Fallback-Verhalten.
6. Prüfen Sie das mobile Layout, die Tastaturbedienung und die Browserkonsole.

Fahren Sie mit der SDK-Referenz und der Start-Checkliste fort.