Integreren met een AI-codeerassistent

De aanbevolen integratie is het npm-pakket @openstaticfish/chattybox. Daarmee kan applicatiecode de openbare sleutel en API-URL configureren, de onderhouden interface van ChattyBox mounten waar je component hoort, of de headless client gebruiken voor een volledig aangepaste UI.

Het zelfstandige script widget.js wordt als laatste beschreven als fallback zonder build voor sites waarop npm-pakketten niet kunnen worden geïnstalleerd.

Voordat je begint

Rond de chatbotconfiguratie af voordat je een assistent vraagt je applicatie te bewerken:

• Controleer representatieve antwoorden en citaten in Test Chat.
• Maak een browsersleutel aan in Public Keys en beperk de toegestane origins.
• Kopieer de openbare sleutel en de widget-API-URL die in Embed worden getoond.
• Bepaal op welke applicatieroutes of layouts de ervaring moet worden gemount.

Dit zijn openbare browsergegevens, maar je moet nog steeds voorkomen dat je omgevingsspecifieke waarden commit. Geef nooit een configuratiedeploymenttoken, beheerdersreferentie of niet-gerelateerd omgevingsbestand door.

Aanbevolen: de onderhouden UI vanuit npm mounten

Dit is de standaardprompt voor React, Next.js, Vite en andere browserapplicaties die op pakketten zijn gebaseerd.

Opdracht

Het ChattyBox-npm-pakket integreren

Integreer ChattyBox in deze applicatie met het npm-pakket @openstaticfish/chattybox.

Openbare browserconfiguratie:
- API-sleutel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspecteer eerst het framework, het routingmodel, de pakketbeheerder, de conventies voor omgevingsvariabelen en de blijvende applicatielayout. Vertel me vóór het bewerken welke bestanden je van plan bent te wijzigen. Vraag het me als onduidelijk is op welke routes ChattyBox moet verschijnen.

Vereisten:
1. Installeer @openstaticfish/chattybox met de pakketbeheerder die deze repository al gebruikt.
2. Sla de openbare API-sleutel en API-URL op volgens de conventie van het framework voor omgevingsvariabelen die aan de browser worden blootgesteld. Voeg placeholdernamen toe aan een voorbeeldbestand voor omgevingsvariabelen, maar commit geen echte waarden.
3. Importeer Chattybox vanuit @openstaticfish/chattybox en maak één client met apiKey en baseUrl.
4. Mount de onderhouden interface met client.mountWidget() vanuit de juiste client-side component of lifecycle-hook.
5. Mount hem alleen op de routes of layout die ik aangeef en roep de geretourneerde functie remove() aan tijdens cleanup wanneer het framework dat vereist.
6. Injecteer widget.js niet handmatig, maak geen backendproxy en introduceer geen tweede ChattyBox-client.
7. Behoud bestaande navigatie, renderinggrenzen, lokalisatie, analytics, toestemming en styling.
8. Breng alleen de kleinst mogelijke gerichte wijziging aan en deploy die niet.
9. Voer de build, lint, type-check en relevante tests van de repository uit.
10. Rapporteer gewijzigde bestanden, de omgevingsvariabelen die ik moet instellen, waar de UI wordt gemount en hoe ik die op de gedeployde site kan testen.

De resulterende applicatiecode moet deze vorm volgen:

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();

Bouw een aangepaste interface

Kies dit wanneer je applicatie zelf de berichtenlijst, invoer, laadstatussen, fouten, citaten en plaatsing moet beheren in plaats van de onderhouden interface te mounten.

Opdracht

Een headless ChattyBox-interface bouwen

Bouw een aangepaste chatbotinterface met het npm-pakket @openstaticfish/chattybox en de headless client daarvan.

Openbare browserconfiguratie:
- API-sleutel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspecteer eerst het framework, componentsysteem, de statepatronen, styling, toegankelijkheidsconventies en testopstelling van de applicatie. Stel de componentgrenzen en bestanden voor voordat je bewerkt.

Vereisten:
1. Installeer @openstaticfish/chattybox met de bestaande pakketbeheerder van de repository.
2. Configureer één Chattybox-client met apiKey en baseUrl via browser-exposed omgevingsvariabelen; commit geen echte waarden.
3. Gebruik sendMessage() en bewaar conversationId voor vervolgberichten.
4. Render antwoordbronnen als toegankelijke links en behoud hun volgorde.
5. Implementeer statussen voor pending, leeg, fout, opnieuw proberen en niet-ondersteund antwoord.
6. Voorkom dubbele verzendingen en houd toetsenbord- en schermleezergedrag bruikbaar.
7. Mount de interface alleen op de routes of layout die ik aangeef.
8. Volg bestaande componenten en stijlen in plaats van een nieuw designsysteem toe te voegen.
9. Laad widget.js niet en roep mountWidget() niet aan.
10. Voer build, lint, type-check en relevante tests uit en rapporteer daarna de gewijzigde bestanden en een verificatieplan.

Frameworknotities

Geef de assistent indien nodig één extra zin:

• Next.js App Router: “Houd de Chattybox-client en de aanroep van mountWidget() binnen een kleine Client Component die door de bedoelde layout wordt gerenderd.”
• React SPA: “Mount vanuit de blijvende app-shell of de specifieke routelayout en ruim op in de returnfunctie van het effect.”
• Docusaurus: “Maak een client-only themacomponent en render die vanuit src/theme/Root; behoud docs-navigatie en locale-wijzigingen.”
• Vue, Nuxt, Svelte of een ander framework: “Gebruik de client-only mount-lifecycle van het framework en de bijbehorende cleanup-lifecycle.”

Een bestaande SDK-integratie controleren

Opdracht

Mijn ChattyBox-SDK-integratie controleren

Controleer deze ChattyBox-integratie zonder te deployen of niet-gerelateerde code te wijzigen.

Controleer of:
1. @openstaticfish/chattybox is geïnstalleerd en geïmporteerd in plaats van dat het gedrag wordt gedupliceerd.
2. Eén Chattybox-client de bedoelde openbare API-sleutel en API-URL ontvangt.
3. Browseromgevingsvariabelen de regels van dit framework voor namen van openbare variabelen volgen zonder privéreferenties bloot te leggen.
4. mountWidget() of de aangepaste interface alleen op de bedoelde routes verschijnt en correct opruimt.
5. Client-side navigatie en remounts tijdens development geen dubbele instanties maken.
6. Bestaande renderinggrenzen, lokalisatie, analytics, toestemming, toegankelijkheid en layout intact blijven.
7. De implementatie passende tests heeft en geen niet-gerelateerde refactor bevat.

Geef bevindingen terug per ernstniveau, met bestandspaden en regelnummers. Stel alleen de kleinst mogelijke veilige oplossingen voor en geef me exacte verificatieopdrachten.

Geen npm of buildstap?

Gebruik de installatiehandleiding voor widget.js alleen wanneer de site het npm-pakket niet kan gebruiken—bijvoorbeeld gewone HTML, een CMS-veld voor aangepaste code of Google Tag Manager.

Opdracht

Het fallback-widgetscript installeren

Installeer de gehoste ChattyBox-widget op deze site met het exacte script dat door het tabblad Embed van mijn ChattyBox-project is gegenereerd:

[PASTE COMPLETE WIDGET SCRIPT]

Inspecteer de site eerst en bepaal het veiligste algemene invoegpunt voor openbare pagina’s. Laad het ongewijzigde script exact één keer, sluit privé-/beheer-/checkout-routes uit, behoud het gedrag voor toestemming en CSP, stel geen privéreferenties bloot, deploy de wijziging niet en rapporteer de gewijzigde locatie plus een browsertestplan.

Het resultaat testen

1. Controleer de diff en bevestig dat er geen echte referenties zijn gecommit.
2. Voer de normale build, lint, type-check en tests van het project uit.
3. Deploy via je normale beoordelingsproces.
4. Controleer de bedoelde routes in een privébrowservenster, inclusief client-side navigatie.
5. Stel een ondersteunde vraag, volg een citaat en test het fallbackgedrag.
6. Controleer de mobiele layout, het toetsenbordgebruik en de browserconsole.

Ga verder met de SDK-referentie en de launchchecklist.