Comment construire un chatbot en React JS comme un pro

Qu'il s'agisse de prise de rendez-vous, de FAQ ou de recommandations de produits, presque tous les sites web pourraient bénéficier d'un agent d'IA ou d'un chatbot.

Et c'est le cas. Les chatbots étant le canal de communication qui connaît la croissance la plus rapide pour les marques, il n'y a pas de meilleur moment que le présent pour entrer dans l'action.

Alors comment faire pour assembler tous ces composants ? En plus de React, vous devez vous préoccuper de votre fournisseur LLM , des frameworks d'agents d'IA, et d'une manière ou d'une autre intégrer tout cela dans des composants d'interface utilisateur avec lesquels vos visiteurs peuvent interagir.

La bonne nouvelle, c'est que les plateformes de chatbot vous couvrent. Dans ce guide, je vous donne les étapes pour :

• Créer un chatbot personnalisé
• Créer un site web avec Next.js et React
• Intégrer votre chatbot dans le front-end React
• Personnaliser le style de l'interface utilisateur du chatbot

Avec peu d'efforts, vous disposerez d'un chatbot professionnel et performant, intégré de manière transparente à votre site React.

D'ailleurs, vous pouvez sauter le tutoriel et consulter le code.

2. Construire un Chatbot

Passons à la première grande pièce du puzzle : le chatbot.

Pour créer un robot, allez dans le studio et cliquez sur Créer un robot +.

Il est utile de définir un objectif, mais vous n'avez pas besoin d'une idée particulièrement développée. Votre entreprise a certainement des documents de politique générale, des FAQ ou un catalogue de produits. Un simple chatbot ayant accès à ces informations pourrait vous permettre de gagner beaucoup de temps en répondant à des questions répétitives.

Dans mon cas, je vais créer un sommelier numérique : un robot qui conseille les utilisateurs sur les vins à acheter, en s'appuyant sur un catalogue de vins externe.

Définir le flux

Indépendamment de ce qu'il fait, votre robot aura besoin d'un flux. Il s'agit de la logique qui détermine le comportement du robot. 

Dans le studio, cliquez sur Workflows dans le panneau de gauche.

Il n'est pas nécessaire que ce soit compliqué. Un seul nœud autonome ayant accès à vos documents (c'est-à-dire le robot par défaut) peut être extrêmement efficace.

Il est important de donner des instructions au robot. Celles-ci comprennent :

• Le personnage que vous aimeriez qu'il adopte, par exemple, poli, sympathique, ou qu'il reflète le ton de l'utilisateur.
• Façons de commencer ou de terminer le message
• Comment répondre à des demandes particulières
• Quels sont les documents à consulter ?

Ajouter la base de connaissances

Il s'agit des informations sur lesquelles le robot s'appuiera pour la RAG (retrieval-augmented generation), c'est-à-dire pour adapter ses réponses à vos données. C'est relativement simple, mais il vaut la peine d'apprendre à optimiser vos fichiers pour obtenir la meilleure RAG possible.

Wynona, mon sommelier(-ère ?) numérique a accès à une liste de vins. Il s'agit d'un sous-ensemble de l'ensemble de données " Wine Reviews": une liste de vins avec leurs régions et leurs notes de dégustation.

Déployer

Une fois que vous êtes satisfait de votre robot, cliquez sur Publier dans le studio et votre robot est en ligne.

Il est donc possible de l'intégrer dans toutes sortes de canaux de communication, tels que WhatsAppTelegram, et dans les applications web, comme celle que nous construisons.

2. Créer une application React

Nous avons notre chatbot, mais il a besoin d'un foyer, alors construisons une application React rapide où les utilisateurs peuvent interagir avec le bot.

Notez que j'utiliserai Next.js. Je pense qu'il est plus pertinent et plus complet que React simple, et ce tutoriel couvrira tout le terrain dont les utilisateurs de React ont besoin.

Exécuter Créer la prochaine application

Exécutez :

npx create-next-app@14

Vous remarquerez que j'utilise Next.js 14. La raison est que nous avons besoin de React 18 pour rendre notre application compatible avec le chatbot. L'exécution avec @latest construira avec Next.js 15 et React 19. Exécuter la commande ci-dessus est le moyen le plus simple de s'assurer que vous utilisez la bonne version de React, et que Next est compatible.

Configurer l'application

Une série de questions vous sera posée. Personnellement, je m'en tiens aux paramètres par défaut, et c'est ce que je vais faire pour ce tutoriel.

Si tout se passe bien, vous verrez le journal des succès.

3. Intégrer votre Chatbot dans votre application React

Il est temps de faire embrasser nos Barbies.

Obtenir le Botpress React Boilerplate

Pour intégrer le chatbot dans notre application, nous aurons besoin de :

• Notre client ID
• Les composants React de webchat préconstruits.

Botpress dispose d'un code de base qui inclut les deux. Pour l'obtenir :

• Accédez au studio et cliquez sur Partager dans le coin supérieur droit.
• En bas à droite de la fenêtre pop-up, cliquez sur Configurer

• Cliquez sur l'onglet React en haut à droite.
• Vous trouverez ici le boilerplate de Botpress , y compris la commande d'installation d'un identifiant client.

D'ailleurs, si vous avez besoin d'un accès rapide à votre numéro de client :

• Allez dans votre tableau de bordBotpress
• Sélectionnez Webchat dans le panneau latéral
• Cliquez sur Paramètres avancés

La meilleure pratique consiste à stocker cette information dans une variable d'environnement, mais nous la garderons dans le composant pour l'instant.

Créer un composant de Chat dans votre application

Dans le répertoire de mon projet, je vais créer un fichier chat.tsx.

Remplissez-le ensuite avec le code du client du chatbot :

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

Il s'agit du code de botpress avec quelques modifications notables :

• "utiliser le client" au sommet, pour les composants qui traitent de la gestion des états
• Renommer la fonction App en Chat
• Un peu de stylisme

Naviguez maintenant vers app/page.tsx et l'importer juste au-dessus du pied de page :

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

Vous pouvez maintenant exécuter npm run dev dans un terminal dans le répertoire du projet pour l'exécuter sur un serveur local.

Alimenter une application React avec un Chatbot

Avec les frameworks web robustes, vous êtes trop occupé par les fonctionnalités de base pour vous préoccuper des modules complémentaires.

Botpress est livré avec des composants pré-construits, un créateur visuel par glisser-déposer, et une personnalisation de haut en bas. L'intégration simple ne se fait pas au détriment de la performance. 

Si vous construisez avec React, c'est que vous recherchez la qualité. Votre chatbot doit en être le reflet.

Commencez à construire dès aujourd'hui. C'est gratuit.

FAQ

1. Puis-je déployer ce chatbot en production ?

Oui, vous pouvez déployer le chatbot en production après l'avoir publié dans Botpress Studio et l'avoir intégré dans votre application React. Une fois intégré, vous pouvez déployer l'application entière en utilisant des plateformes comme Vercel ou n'importe quel fournisseur d'hébergement qui supporte votre stack technologique.

2. Puis-je personnaliser l'aspect et la convivialité de l'interface utilisateur du chatbot ?

Oui, vous pouvez entièrement personnaliser l'apparence de l'interface du chatbot en utilisant le composant Botpress Webchat . Il prend en charge les couleurs, la taille, le placement et le style, et vous pouvez remplacer les styles par défaut par des CSS personnalisés pour correspondre au design de votre marque.

3. Dois-je définir un bot persona et comment cela affecte-t-il les conversations ?

Oui, il est important de définir une persona pour le chatbot, car elle oriente la façon dont le chatbot communique, y compris le ton et la phraséologie. Cela permet d'aligner la conversation sur la voix de votre marque et d'améliorer la confiance des utilisateurs.

4. Quel est l'objectif d'un flux de chatbot et comment en définir un ?

Le but d'un flux de chatbot est de contrôler la logique de la façon dont le bot répond aux utilisateurs. Dans Botpress, vous définissez les flux visuellement dans l'onglet "Workflows" en utilisant des nœuds pour les actions, les messages, les conditions et les transitions.

5. Puis-je utiliser mes documents existants (par exemple, des FAQ ou des catalogues de produits) pour former le robot ?

Oui, vous pouvez télécharger des documents existants comme des FAQ ou des manuels dans la base de connaissance de Botpress . Le bot utilise la génération augmentée par récupération (RAG) pour répondre aux questions en extrayant l'information pertinente directement de ces documents.