Intégrer avec un assistant de programmation IA

L’intégration recommandée est le package npm @openstaticfish/chattybox. Il permet au code de l’application de configurer la clé publique et l’URL d’API, de monter l’interface gérée de ChattyBox à l’emplacement prévu pour votre composant ou d’utiliser le client headless pour une interface entièrement personnalisée.

Le script autonome widget.js est présenté en dernier comme solution de repli sans build pour les sites qui ne peuvent pas installer de packages npm.

Avant de commencer

Terminez la configuration du chatbot avant de demander à un assistant de modifier votre application :

• Vérifiez les réponses représentatives et les citations dans Test Chat.
• Créez une clé navigateur dans Public Keys et limitez ses origines autorisées.
• Copiez la clé publique et l’URL d’API du widget affichées dans Embed.
• Décidez quelles routes ou quels layouts de l’application doivent monter l’expérience.

Il s’agit d’identifiants publics pour le navigateur, mais évitez tout de même de valider des valeurs propres à un environnement. Ne fournissez jamais de jeton de déploiement de configuration, d’identifiant administrateur ou de fichier d’environnement sans rapport.

Recommandé : monter l’interface gérée depuis npm

Voici le prompt par défaut pour React, Next.js, Vite et les autres applications navigateur utilisant des packages.

Invite

Intégrer le package npm ChattyBox

Intègre ChattyBox à cette application à l’aide du package npm @openstaticfish/chattybox.

Configuration publique du navigateur :
- Clé d’API : [PASTE PUBLIC WIDGET KEY]
- URL d’API : [PASTE WIDGET API URL]

Commence par examiner le framework, le modèle de routage, le gestionnaire de packages, les conventions de variables d’environnement et le layout persistant de l’application. Indique-moi les fichiers que tu prévois de modifier avant d’éditer. Demande-moi des précisions si les routes où ChattyBox doit apparaître ne sont pas claires.

Exigences :
1. Installe @openstaticfish/chattybox avec le gestionnaire de packages déjà utilisé par ce dépôt.
2. Stocke la clé d’API publique et l’URL d’API en respectant la convention du framework pour les variables d’environnement exposées au navigateur. Ajoute des noms de remplacement à un fichier d’environnement d’exemple, mais ne valide pas de vraies valeurs.
3. Importe Chattybox depuis @openstaticfish/chattybox et crée un client avec apiKey et baseUrl.
4. Monte l’interface gérée avec client.mountWidget() depuis le composant côté client ou le hook de cycle de vie approprié.
5. Monte-la uniquement sur les routes ou dans le layout que j’indique et appelle la fonction remove() renvoyée lors du nettoyage lorsque le framework l’exige.
6. N’injecte pas widget.js manuellement, ne crée pas de proxy backend et n’introduis pas de second client ChattyBox.
7. Préserve la navigation, les limites de rendu, la localisation, Analytics, le consentement et les styles existants.
8. Effectue la modification ciblée la plus réduite possible et ne la déploie pas.
9. Exécute le build, le lint, la vérification des types et les tests pertinents du dépôt.
10. Indique les fichiers modifiés, les variables d’environnement que je dois définir, l’emplacement de montage de l’interface et la manière de la tester sur le site déployé.

Le code de l’application obtenu doit suivre cette structure :

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

Créer une interface personnalisée

Choisissez cette option si votre application doit gérer elle-même la liste des messages, la saisie, les états de chargement, les erreurs, les citations et le placement, plutôt que de monter l’interface gérée.

Invite

Créer une interface ChattyBox headless

Crée une interface de chatbot personnalisée avec le package npm @openstaticfish/chattybox et son client headless.

Configuration publique du navigateur :
- Clé d’API : [PASTE PUBLIC WIDGET KEY]
- URL d’API : [PASTE WIDGET API URL]

Commence par examiner le framework de l’application, le système de composants, les modèles d’état, les styles, les conventions d’accessibilité et la configuration des tests. Propose les limites des composants et les fichiers avant de modifier quoi que ce soit.

Exigences :
1. Installe @openstaticfish/chattybox avec le gestionnaire de packages existant du dépôt.
2. Configure un client Chattybox avec apiKey et baseUrl à l’aide de variables d’environnement exposées au navigateur ; ne valide pas de vraies valeurs.
3. Utilise sendMessage() et conserve conversationId pour les messages de suivi.
4. Affiche les sources des réponses sous forme de liens accessibles et conserve leur ordre.
5. Implémente les états d’attente, vide, erreur, nouvelle tentative et réponse non prise en charge.
6. Empêche les soumissions en double et assure une utilisation correcte du clavier et du lecteur d’écran.
7. Monte l’interface uniquement sur les routes ou dans le layout que j’indique.
8. Suis les composants et les styles existants au lieu d’ajouter un nouveau système de design.
9. Ne charge pas widget.js et n’appelle pas mountWidget().
10. Exécute le build, le lint, la vérification des types et les tests pertinents, puis indique les fichiers modifiés et un plan de vérification.

Notes sur les frameworks

Ajoutez une phrase à l’assistant si nécessaire :

• Next.js App Router : « Garde le client Chattybox et l’appel à mountWidget() dans un petit Client Component rendu par le layout prévu. »
• React SPA : « Monte l’interface depuis le shell persistant de l’application ou le layout de la route concernée, et nettoie-la dans la fonction de retour de l’effet. »
• Docusaurus : « Crée un composant de thème client uniquement et rends-le depuis src/theme/Root ; préserve la navigation de la documentation et les changements de langue. »
• Vue, Nuxt, Svelte ou autre framework : « Utilise le cycle de vie de montage côté client du framework ainsi que le cycle de nettoyage correspondant. »

Examiner une intégration SDK existante

Invite

Examiner mon intégration du SDK ChattyBox

Examine cette intégration ChattyBox sans la déployer ni modifier du code sans rapport.

Vérifie que :
1. @openstaticfish/chattybox est installé et importé au lieu de dupliquer son comportement.
2. Un seul client Chattybox reçoit la clé d’API publique et l’URL d’API prévues.
3. Les variables d’environnement du navigateur respectent les règles de nommage des variables publiques de ce framework sans exposer d’identifiants privés.
4. mountWidget() ou l’interface personnalisée apparaît uniquement sur les routes prévues et est correctement nettoyée.
5. La navigation côté client et les remontages en développement ne créent pas d’instances en double.
6. Les limites de rendu, la localisation, Analytics, le consentement, l’accessibilité et le layout existants restent intacts.
7. L’implémentation possède des tests appropriés et n’inclut aucun refactoring sans rapport.

Retourne les résultats par niveau de gravité avec les chemins de fichiers et les références de lignes. Propose uniquement les plus petites corrections sûres et donne-moi les commandes exactes de vérification.

Pas de npm ni d’étape de build ?

Utilisez le guide d’installation de widget.js uniquement si le site ne peut pas utiliser le package npm, par exemple pour du HTML simple, un champ de code personnalisé dans un CMS ou Google Tag Manager.

Invite

Installer le script du widget de repli

Installe le widget ChattyBox hébergé sur ce site en utilisant le script exact généré par l’onglet Embed de mon ChattyBox :

[PASTE COMPLETE WIDGET SCRIPT]

Inspecte d’abord le site et identifie le point d’insertion global le plus sûr pour les pages publiques. Charge le script inchangé exactement une fois, exclus les routes privées, d’administration et de paiement, préserve le comportement du consentement et de la CSP, n’expose pas d’identifiants privés, ne déploie pas la modification et indique l’emplacement modifié ainsi qu’un plan de test dans le navigateur.

Tester le résultat

1. Examinez le diff et confirmez qu’aucun identifiant réel n’a été validé.
2. Exécutez le build, le lint, la vérification des types et les tests habituels du projet.
3. Déployez via le processus normal de revue.
4. Vérifiez les routes prévues dans une fenêtre de navigation privée, y compris la navigation côté client.
5. Posez une question prise en charge, suivez une citation et testez le comportement de repli.
6. Vérifiez l’affichage mobile, l’utilisation au clavier et la console du navigateur.

Poursuivez avec la référence du SDK et la checklist de lancement.