Tutoriel : Créer un chatbot RAG

Ce guide vous montre comment créer un chatbot RAG (Retrieval-Augmented Generation) de A à Z à l'aide de la plateforme Wikit Semantics. Le chatbot sera capable de répondre à des questions en se basant sur le contenu de votre propre site web.

Étape 1 : Créer l'App LLM

Pour commencer, nous allons créer l'App LLM qui hébergera votre chatbot.

1. Rendez-vous sur la Wikit Console Semantics.
2. Dans le menu de gauche, cliquez sur Apps LLM.
3. Cliquez sur le bouton Créer une app LLM.
4. Remplissez les champs :
   • Type : Sélectionnez Question/Réponse Chat.
   • Nom : Donnez un nom à votre application (ex: Chatbot wikit.ai).
5. Cliquez sur Créer.

Étape 2 : Créer un connecteur de site web

Maintenant, nous allons configurer le "crawler" qui ira lire le contenu de votre site web.

1. Sur la page "Détails de l'app LLM" où vous venez d'arriver, cliquez sur l'icône "Applications" (neuf carrés) en haut à droite.
2. Sélectionnez Console Connect. (Cela ouvre un nouvel onglet).
3. Dans la liste des connecteurs, trouvez et cliquez sur Url Crawler.
4. Cliquez sur Installer.
5. Sur l'écran suivant, sélectionnez la version de base Url Crawler (la première option) et cliquez à nouveau sur Installer.
6. Une fois l'installation terminée, vous êtes sur la page de configuration. Cliquez sur le menu "..." (Options) et sélectionnez Modifier.
7. Dans le champ Liste d'URLs (obligatoire), entrez l'URL complète de la page d'accueil de votre site (ex: https://www.wikit.ai/).
8. Faites défiler la page jusqu'en bas et cliquez sur Enregistrer.
9. Revenez à la liste de vos connecteurs en cliquant sur Mes connecteurs dans le menu de gauche.
10. Cliquez sur le menu "..." de votre nouveau "Url Crawler" et sélectionnez Renommer.
11. Donnez-lui un nom clair (ex: Connecteur wikit.ai) et cliquez sur Enregistrer.
12. Cliquez à nouveau sur le menu "..." et sélectionnez Activer.

Étape 3 : Créer une source de données

Nous allons maintenant lier ce connecteur à votre Console Semantics pour en faire une source de connaissances.

1. Retournez dans l'onglet de la Wikit Console Semantics.
2. Dans le menu de gauche, cliquez sur Sources de données.
3. Cliquez sur le bouton Créer une source de données.
4. Remplissez les champs :
   • Nom : Donnez un nom à votre source (ex: Source de données wikit.ai).
   • Origine : Cochez l'option Connecteur.
   • Sélectionnez un connecteur : Dans le menu déroulant, choisissez le connecteur que vous venez de créer (Connecteur wikit.ai).
5. Cliquez sur Créer.

Étape 4 : Synchroniser le connecteur

Votre connecteur est prêt, il faut maintenant lui demander de remonter les données du site.

1. Retournez dans l'onglet Wikit Connect.
2. Allez dans Mes connecteurs et cliquez sur votre Connecteur wikit.ai pour voir ses détails.
3. Faites défiler jusqu'à la section Synchronisation en bas de page.
4. Cliquez sur le menu "..." (Options) de cette section et sélectionnez Modifier.
5. Activez le bouton Activer la synchronisation.
6. Configurez une fréquence de mise à jour automatique (ex: Hebdomadaire, Vendredi, 18:00).
7. Cliquez sur Enregistrer.
8. La planification est enregistrée, mais nous allons lancer la première synchronisation manuellement. Cliquez à nouveau sur le menu "..." de la section "Synchronisation" et sélectionnez Synchroniser.
9. Une notification "Synchronisation en cours" apparaît. Vous pouvez suivre l'avancement dans l'onglet Logs de ce connecteur.
10. Une fois la synchronisation terminée, vous pouvez vérifier le résultat en retournant sur la Wikit Console Semantics, dans Sources de données > (votre source) > onglet Documents. Les pages de votre site devraient y apparaître.

Étape 5 : Relier l'App LLM à la source de données

Il est temps de connecter votre App LLM aux connaissances que vous venez de collecter (la source de données).

1. Dans la Wikit Console Semantics, retournez dans le menu Apps LLM.
2. Cliquez sur le menu "..." de votre Chatbot wikit.ai et sélectionnez Gérer l'app LLM.
3. Allez dans l'onglet Sources de données.
4. Vous voyez votre Source de données wikit.ai avec le statut "Désactivé".
5. Cliquez simplement sur le toggle pour l'activer. Il passe à l'état "Activé".

Étape 6 : Configurer l'intégration web

Votre chatbot est maintenant fonctionnel. Nous allons configurer son apparence (le widget) pour l'intégrer à votre site. Cette étape se fait en deux parties.

1. Dans la Wikit Console Semantics, cliquez sur Interface dans le menu de gauche.

1. Assigner l'application principale

D'abord, nous lions l'App LLM à l'interface globale.

1. Dans la section Options de personnalisation, cliquez sur le menu "..." (Options) et sélectionnez Modifier.
2. Sous App LLM, choisissez votre Chatbot wikit.ai dans le menu déroulant.
3. Cliquez sur Enregistrer.

2. Configurer l'intégration (widget)

Ensuite, nous configurons le widget web spécifique.

1. Plus bas sur la même page, dans la section Options d'intégration, cliquez sur le menu "..." (Options) et sélectionnez Modifier.
2. Cochez la case Utiliser une seule app dans l'intégration.
3. Sous App LLM, choisissez à nouveau votre Chatbot wikit.ai.
4. Configurez les options visuelles selon vos préférences (ex: Position du bouton : Bas droite, Taille du bouton (en pixels) : 48...).
5. Cliquez sur Enregistrer et voir le code.
6. Une fenêtre Code d'intégration apparaît. Cliquez sur le bouton Copier.

Étape 7 : Intégrer le script à votre site internet

Vous avez copié un bloc de code JavaScript. Pour que le chatbot apparaisse, ce code doit être ajouté aux pages de votre site web.

La méthode exacte dépend de la technologie que vous utilisez (WordPress, Shopify, Webflow, HTML/CSS pur, etc.). L'objectif est toujours d'insérer la balise <script> que vous avez copiée, de préférence juste avant la balise de fermeture </body> de votre page.

Cas 1 : Site HTML simple

Comme montré dans la vidéo, si vous avez un site en HTML pur, ouvrez vos fichiers .html dans un éditeur de code (comme VS Code) et collez le script copié juste avant la balise </body>.

<script type="text/javascript" src="https://..."></script>
<script>
  // ... configuration du script ...
</script>
</body>
</html>

Cas 2 : Site WordPress

Option 1 (Recommandée) : Utiliser un plugin

1. Connectez-vous à votre tableau de bord WordPress.
2. Allez dans Extensions > Ajouter.
3. Recherchez et installez un plugin comme WPCode – Insert Headers and Footers.
4. Une fois activé, allez dans Code Snippets > Header & Footer.
5. Collez le script copié dans la boîte Footer.
6. Enregistrez les modifications.

Option 2 (Avancé) : Modifier votre thème Si vous êtes à l'aise avec le code, vous pouvez ajouter le script au fichier footer.php de votre thème. Attention : Il est crucial d'utiliser un thème enfant pour ces modifications. Si vous modifiez le thème parent directement, vos changements seront perdus lors de la prochaine mise à jour du thème.

Cas 3 : Autres plateformes (Shopify, Webflow, etc.)

Recherchez la section "Custom Code", "Scripts" ou "Intégrations" dans les paramètres de votre plateforme et collez le script dans la zone correspondant au pied de page (footer) ou à la fin du corps (body) de la page.

Étape 8 : Tester votre chatbot

1. (Re)chargez votre site web. L'icône du chatbot doit maintenant apparaître à l'endroit que vous avez configuré (par exemple, en bas à droite).
2. Cliquez sur l'icône pour ouvrir la fenêtre de chat.
3. Posez une question dont la réponse se trouve sur votre site (ex: "Qui a fondé Wikit et quand ?").
4. Le chatbot va vous répondre en utilisant les informations de votre site et en citant les pages sources qu'il a utilisées.

---

Félicitations ! Vous avez créé et déployé un chatbot RAG complet basé sur le contenu de votre propre site web.