React Chatbots bouwen als een pro - geen ervaring nodig

De stroom definiëren

Wat uw bot ook doet, hij heeft een flow nodig. Dit is de logica die het gedrag van de bot bepaalt. 

Klik in de studio op Workflows in het linkerpaneel.

Het hoeft niet ingewikkeld te zijn. Een enkel autonoom knooppunt met toegang tot je documenten (d.w.z. de standaard bot) kan uiterst effectief zijn.

Het is belangrijk om de bot instructies te geven. Dit houdt in:

• De persona die je wilt aannemen, bijvoorbeeld beleefd, vriendelijk of de toon van de gebruiker spiegelen
• Manieren om het bericht te beginnen of te eindigen
• Hoe te reageren op bepaalde vragen
• Naar welke documenten moet je verwijzen wanneer

De kennisbank toevoegen

Dit is de informatie waaruit de bot zal putten voor RAG (retrieval-augmented generation), oftewel de catering van zijn reacties op je gegevens. Dit is relatief eenvoudig, maar het is de moeite waard om te leren hoe u uw bestanden kunt optimaliseren voor de best mogelijke RAG.

Wynona, mijn digitale sommelier(-ère?) heeft toegang tot een wijnkaart. Het is slechts een subset van de Wine Reviews dataset: een lijst van wijnen met hun regio's en proefnotities.

Installeer

Als u tevreden bent met uw bot, klikt u op Publiceren in de studio en uw bot is live.

Hierdoor is het beschikbaar voor integratie in allerlei communicatiekanalen, zoals WhatsAppTelegram en in webapps, zoals degene die we aan het bouwen zijn.

Ren create-next-app

Rennen:

npx create-next-app@14

Je zult zien dat ik Next.js 14 gebruik. De reden hiervoor is dat we React 18 nodig hebben om onze app chatbot-compatibel te maken. Als je met @latest werkt, wordt Next.js 15 en React 19 gebruikt. Het bovenstaande commando uitvoeren is de eenvoudigste manier om ervoor te zorgen dat je de juiste versie van React gebruikt en dat Next compatibel is.

App-configuraties instellen

Je wordt gevraagd om een reeks vragen. Persoonlijk blijf ik bij de standaardinstellingen en dat is wat ik in deze tutorial zal doen.

Als alles goed gaat, zie je het succeslogboek.

Ontvang de Botpress React Boilerplate

Om de chatbot in onze app te integreren, hebben we het volgende nodig:

• Onze klant ID
• De kant-en-klare webchat React-componenten.

Botpress heeft boilerplate code die beide bevat. Om het te krijgen:

• Navigeer naar de studio en klik op Delen in de rechterbovenhoek.
• Klik rechtsonder in het pop-upvenster op Configureren

• Klik rechtsboven op het tabblad React.
• Hier vind je de Botpress boilerplate, inclusief het installatiecommando een client ID

Trouwens, als je ooit snel toegang wilt tot je klant-ID:

• Ga naar je Botpress dashboard
• Selecteer Webchat in het zijpaneel
• Klik op Geavanceerde instellingen

Het is het beste om dit op te slaan in een omgevingsvariabele, maar we houden het voorlopig in de component.

Een Chat maken in je app

In mijn projectmap maak ik een bestand chat.tsx.

Vul deze dan met de code voor de chatbot-client:

"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>
   );
}

Dit is de botpress met een paar opmerkelijke aanpassingen:

• "klant gebruiken". bovenaan, voor componenten die te maken hebben met statusbeheer
• De naam van de functie wijzigen van App naar Chat
• Wat styling

Navigeer nu naar app/pagina.tsx en importeer het net boven de voettekst:

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

Nu kunt u npm uitvoeren dev in een terminal in de projectmap om het op een lokale server uit te voeren.