Comment créer un chatbot en React JS comme un pro

Que ce soit pour la prise de rendez-vous, les FAQ ou les recommandations de produits, presque tous les sites web peuvent bénéficier d’un agent IA ou d’un chatbot.

Et c’est déjà le cas. Les chatbots sont le canal de communication qui croît le plus vite pour les marques, alors c’est le moment idéal pour s’y mettre.

Mais comment assembler tous ces éléments ? En plus de React, il faut choisir un fournisseur LLM, des frameworks d’agents IA, et regrouper tout cela dans des composants UI accessibles à vos visiteurs.

La bonne nouvelle, c’est que les plateformes de chatbot facilitent tout ça. Dans ce guide, je vous explique comment :

• 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 du chatbot

En quelques étapes, vous aurez un chatbot professionnel et performant, parfaitement intégré à votre site React.

Au fait, vous pouvez passer le tutoriel et consulter le code.

2. Créer un chatbot

Passons à la première étape majeure : le chatbot.

Pour créer un bot, rendez-vous dans le studio et cliquez sur Create Bot +.

Définir un objectif aide, mais il n’est pas nécessaire d’avoir une idée très aboutie. Votre entreprise a sûrement des documents internes, des FAQ ou un catalogue produit. Un simple chatbot ayant accès à ces informations peut vous faire gagner beaucoup de temps sur les questions répétitives.

Dans mon cas, je vais créer un sommelier digital : un bot qui conseille les utilisateurs sur le choix de vins, à partir d’un catalogue externe.

Définir le flow

Quel que soit son usage, votre bot aura besoin d’un flow. C’est la logique qui détermine son comportement.

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

Pas besoin de complexité. Un seul nœud autonome ayant accès à vos documents (c’est-à-dire le bot par défaut) peut être très efficace.

Il est important de donner des instructions au bot. Cela inclut :

• La personnalité à adopter, par exemple poli, amical, ou en miroir du ton de l’utilisateur
• Les façons de commencer ou terminer un message
• Comment répondre à certains types de questions
• À quels documents se référer et dans quelles situations

Ajouter la base de connaissances

C’est l’information sur laquelle le bot s’appuiera pour le RAG (retrieval-augmented generation), c’est-à-dire pour adapter ses réponses à vos données. C’est assez simple, mais il vaut la peine d’apprendre comment optimiser vos fichiers pour un RAG optimal.

Wynona, mon sommelier digital, a accès à une liste de vins. Il s’agit simplement d’un extrait du jeu de données Wine Reviews : une liste de vins avec leurs régions et notes de dégustation.

Déployer

Une fois satisfait de votre bot, cliquez sur Publish dans le studio pour le mettre en ligne.

Votre bot est alors prêt à être intégré sur tous types de canaux de communication, comme WhatsApp, Telegram, ou des applications web comme celle que nous construisons.

2. Créer une application React

Nous avons notre chatbot, mais il lui faut un espace. Créons donc rapidement une application React pour permettre aux utilisateurs d’interagir avec le bot.

À noter : j’utilise Next.js. Je le trouve plus pertinent et complet que React seul, et ce tutoriel couvrira tout ce dont un utilisateur React a besoin.

Lancer create-next-app

Exécutez :

npx create-next-app@14

Vous remarquerez que j’utilise Next.js 14. La raison : nous avons besoin de React 18 pour rendre notre app compatible avec le chatbot. Utiliser @latest installera Next.js 15 et React 19. La commande ci-dessus est le moyen le plus simple de garantir la bonne version de React, et la compatibilité avec Next.

Configurer l’application

Vous serez guidé par une série de questions. Personnellement, je garde les paramètres par défaut, ce que je ferai ici.

Si tout se passe bien, vous verrez le message de succès.

3. Intégrer votre chatbot dans votre application React

Il est temps de faire s’embrasser nos Barbies.

Récupérer le boilerplate React de Botpress

Pour intégrer le chatbot à notre application, il nous faut :

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

Botpress fournit un code boilerplate qui inclut les deux. Pour l’obtenir :

• Allez dans le studio et cliquez sur Share en haut à droite.
• En bas à droite de la fenêtre, cliquez sur Configure

• Cliquez sur l’onglet React en haut à droite.
• Vous trouverez ici le boilerplate Botpress, avec la commande d’installation et un client ID

D’ailleurs, si vous avez besoin de retrouver rapidement votre client ID :

• Rendez-vous sur votre dashboard Botpress
• Sélectionnez Webchat dans le menu latéral
• Cliquez sur Advanced Settings

Il est recommandé de stocker ce code dans une variable d’environnement, mais pour l’instant, nous le laisserons dans le composant.

Créer un composant Chat dans votre application

Dans mon dossier de projet, je vais créer un fichier chat.tsx.

Puis ajoutez le code du client 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>
   );
}

C’est le code Botpress avec quelques ajustements notables :

• "use client" en haut, pour les composants qui gèrent l’état
• Renommage de la fonction App en Chat
• Un peu de style

Ensuite, allez dans app/page.tsx et importez-le juste avant le 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 lancer npm run dev dans un terminal du dossier projet pour le tester en local.

Dynamiser une application React avec un chatbot

Avec des frameworks web puissants, vous pouvez vous concentrer sur l’essentiel sans vous soucier des modules complémentaires.

Botpress propose des composants prêts à l’emploi, un éditeur visuel en glisser-déposer, et une personnalisation complète. L’intégration simple ne sacrifie pas la performance.

Si vous développez avec React, c’est que vous visez la qualité. Votre chatbot doit être à la hauteur.

Commencez à créer 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 intégré à votre application React. Une fois intégré, vous pouvez déployer l’ensemble de l’application sur des plateformes comme Vercel ou tout hébergeur compatible avec votre stack technique.

2. Puis-je personnaliser l’apparence de l’interface du chatbot ?

Oui, vous pouvez entièrement personnaliser l’apparence du chatbot avec le composant Webchat de Botpress. Il prend en charge les couleurs, la taille, le placement et le style, et vous pouvez remplacer les styles par défaut avec votre propre CSS pour correspondre à votre identité visuelle.

3. Dois-je définir une personnalité pour le bot, et quel impact cela a-t-il sur les conversations ?

Oui, définir une personnalité pour le bot est important car cela guide la façon dont il communique, le ton et la formulation. Cela garantit que la conversation correspond à la voix de votre marque et renforce la confiance des utilisateurs.

4. À quoi sert un flow de chatbot, et comment le définir ?

Le flow d’un chatbot sert à contrôler la logique de ses réponses. Dans Botpress, vous définissez les flows visuellement dans l’onglet « Workflows » en utilisant des nœuds pour les actions, messages, conditions et transitions.

5. Puis-je utiliser mes documents existants (FAQ, catalogues produits, etc.) pour entraîner le bot ?

Oui, vous pouvez importer des documents existants comme des FAQ ou des manuels dans la base de connaissances Botpress. Le bot utilise le RAG (retrieval-augmented generation) pour répondre en allant chercher directement les informations pertinentes dans ces documents.