Construire des Chatbots React comme un pro - Pas besoin d'expérience

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.

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.

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.