Integrera med en AI-kodningsassistent

Den rekommenderade integrationen är @openstaticfish/chattybox npm-paketet. Det låter applikationskod konfigurera den offentliga nyckeln och API-URL:en, montera ChattyBox underhållna gränssnitt där din komponent hör hemma eller använda den headless-klienten för ett helt eget gränssnitt.

Det fristående widget.js-skriptet dokumenteras sist som en reservlösning utan byggsteg för webbplatser som inte kan installera npm-paket.

Innan du börjar

Slutför chattbotens konfiguration innan du ber en assistent redigera din applikation:

• Verifiera representativa svar och källhänvisningar i Test Chat.
• Skapa en webbläsarnyckel i Public Keys och begränsa dess tillåtna origins.
• Kopiera den offentliga nyckeln och widgetens API-URL som visas i Embed.
• Bestäm vilka applikationsrutter eller layouter som ska montera upplevelsen.

Detta är offentliga webbläsaruppgifter, men undvik ändå att committa miljöspecifika värden. Ge aldrig en distributions-token för konfiguration, administratörsuppgifter eller en orelaterad miljöfil till assistenten.

Rekommenderas: Montera det underhållna gränssnittet från npm

Detta är standardprompten för React, Next.js, Vite och andra paketbaserade webbläsarapplikationer.

Instruktion

Integrera ChattyBox npm-paketet

Integrera ChattyBox i den här applikationen med npm-paketet @openstaticfish/chattybox.

Offentlig webbläsarkonfiguration:
- API-nyckel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspektera först ramverket, routningsmodellen, pakethanteraren, konventionerna för miljövariabler och applikationens beständiga layout. Berätta vilka filer du planerar att ändra innan du redigerar. Fråga mig om rutterna där ChattyBox ska visas är oklara.

Krav:
1. Installera @openstaticfish/chattybox med den pakethanterare som redan används i detta arkiv.
2. Lagra den offentliga API-nyckeln och API-URL:en enligt ramverkets konvention för miljövariabler som exponeras för webbläsaren. Lägg till platshållarnamn i en exempelmiljöfil, men committa inte riktiga värden.
3. Importera Chattybox från @openstaticfish/chattybox och skapa en klient med apiKey och baseUrl.
4. Montera det underhållna gränssnittet med client.mountWidget() från lämplig klientkomponent eller livscykelhake.
5. Montera det endast på de rutter eller i den layout jag anger och anropa den returnerade remove()-funktionen vid rensning när ramverket kräver det.
6. Injicera inte widget.js manuellt, skapa ingen backend-proxy och introducera ingen annan ChattyBox-klient.
7. Bevara befintlig navigering, renderingsgränser, lokalisering, analys, samtycken och styling.
8. Gör den minsta fokuserade ändringen och distribuera den inte.
9. Kör arkivets build, lint, typkontroll och relevanta tester.
10. Rapportera ändrade filer, miljövariabler jag måste ange, var gränssnittet monteras och hur det testas på den distribuerade webbplatsen.

Den resulterande applikationskoden bör följa denna form:

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

Bygg ett anpassat gränssnitt

Välj detta när applikationen själv ska äga meddelandelista, inmatning, laddningstillstånd, fel, källhänvisningar och placering i stället för att montera det underhållna gränssnittet.

Instruktion

Bygg ett headless ChattyBox-gränssnitt

Bygg ett anpassat chattbotgränssnitt med npm-paketet @openstaticfish/chattybox och dess headless-klient.

Offentlig webbläsarkonfiguration:
- API-nyckel: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Inspektera först applikationens ramverk, komponentsystem, tillståndsmönster, styling, tillgänglighetskonventioner och testkonfiguration. Föreslå komponentgränser och filer innan du redigerar.

Krav:
1. Installera @openstaticfish/chattybox med arkivets befintliga pakethanterare.
2. Konfigurera en Chattybox-klient med apiKey och baseUrl genom webbläsarexponerade miljövariabler; committa inte riktiga värden.
3. Använd sendMessage() och behåll conversationId för uppföljande meddelanden.
4. Rendera svarens källor som tillgängliga länkar och bevara deras ordning.
5. Implementera tillstånd för väntan, tomt läge, fel, försök igen och svar som inte stöds.
6. Förhindra dubbla inskickningar och se till att tangentbord och skärmläsare fungerar.
7. Montera gränssnittet endast på de rutter eller i den layout jag anger.
8. Följ befintliga komponenter och stilar i stället för att lägga till ett nytt designsystem.
9. Ladda inte widget.js och anropa inte mountWidget().
10. Kör build, lint, typkontroll och relevanta tester och rapportera sedan ändrade filer samt en verifieringsplan.

Ramverksanteckningar

Ge assistenten ytterligare en mening vid behov:

• Next.js App Router: ”Håll Chattybox-klienten och anropet till mountWidget() i en liten Client Component som renderas av den avsedda layouten.”
• React SPA: ”Montera från det beständiga applikationsskalet eller den specifika ruttlayouten och rensa upp i effektens retur-funktion.”
• Docusaurus: ”Skapa en klientbaserad temakomponent och rendera den från src/theme/Root; bevara dokumentationsnavigering och lokalförändringar.”
• Vue, Nuxt, Svelte eller annat ramverk: ”Använd ramverkets klientbaserade monteringslivscykel och motsvarande rensningslivscykel.”

Granska en befintlig SDK-integration

Instruktion

Granska min ChattyBox SDK-integration

Granska denna ChattyBox-integration utan att distribuera eller ändra orelaterad kod.

Kontrollera att:
1. @openstaticfish/chattybox är installerat och importerat i stället för att dess funktionalitet dupliceras.
2. En Chattybox-klient får den avsedda offentliga API-nyckeln och API-URL:en.
3. Webbläsarens miljövariabler följer ramverkets namnregler för offentliga variabler utan att privata autentiseringsuppgifter exponeras.
4. mountWidget() eller det anpassade gränssnittet visas endast på avsedda rutter och rensas korrekt.
5. Klientsidig navigering och omladdningar under utveckling inte skapar dubbla instanser.
6. Befintliga renderingsgränser, lokalisering, analys, samtycke, tillgänglighet och layout förblir intakta.
7. Implementeringen har lämpliga tester och ingen orelaterad refaktorering.

Returnera resultat efter allvarlighetsgrad med filsökvägar och radreferenser. Föreslå endast de minsta säkra korrigeringarna och ge exakta verifieringskommandon.

Inget npm eller byggsteg?

Använd installationsguiden för widget.js endast när webbplatsen inte kan använda npm-paketet — till exempel vanlig HTML, ett fält för anpassad CMS-kod eller Google Tag Manager.

Instruktion

Installera reservskriptet för widgeten

Installera den hostade ChattyBox-widgeten på den här webbplatsen med det exakta skript som genererats på mitt ChattyBox Embed-kort:

[PASTE COMPLETE WIDGET SCRIPT]

Inspektera webbplatsen först och identifiera den säkraste globala infogningsplatsen för offentliga sidor. Ladda det oförändrade skriptet exakt en gång, uteslut privata rutter, adminrutter och kassasidor, bevara samtyckes- och CSP-beteende, exponera inte privata autentiseringsuppgifter, distribuera inte ändringen och rapportera den ändrade platsen samt en webbläsarbaserad testplan.

Testa resultatet

1. Granska diffen och bekräfta att inga riktiga autentiseringsuppgifter har committats.
2. Kör projektets vanliga build, lint, typkontroll och tester.
3. Distribuera genom den normala granskningsprocessen.
4. Verifiera avsedda rutter i ett privat webbläsarfönster, inklusive klientsidig navigering.
5. Ställ en fråga som stöds, följ en källhänvisning och testa reservbeteendet.
6. Kontrollera mobil layout, tangentbordsanvändning och webbläsarkonsolen.

Fortsätt med SDK-referensen och lanseringschecklistan.