Hoe je als een professional een chatbot bouwt in React JS

Of het nu gaat om het maken van afspraken, veelgestelde vragen of productaanbevelingen, vrijwel elke website kan profiteren van een AI Agent of chatbot.

En dat zijn ze ook. Nu chatbots het snelst groeiende communicatiekanaal voor merken zijn, is er geen beter moment dan nu om mee te doen.

Dus hoe rijg je al deze componenten aan elkaar? Bovenop React moet je je zorgen maken over je LLM , AI-agentframeworks en dat alles op de een of andere manier verpakken in UI-componenten waarmee je bezoekers kunnen interageren.

Het goede nieuws is dat chatbotplatforms je kunnen helpen. In deze gids geef ik je de stappen om:

• Een aangepaste chatbot bouwen
• Een website maken met Next.js en React
• Integreer je chatbot in de React front-end
• De UI-stijl van de chatbot aanpassen

Met weinig moeite heb je een professionele, goed presterende chatbot die naadloos in je React-site is geïntegreerd.

Je kunt de tutorial trouwens overslaan en de code bekijken.

2. Een chatbot bouwen

Op naar het eerste grote stuk van de puzzel: de chatbot.

Om een bot te maken, ga je naar de studio en klik je op Bot + maken.

Het helpt om een doel te definiëren, maar je hebt geen bijzonder uitgewerkt idee nodig. Je bedrijf heeft bijna zeker beleidsdocumenten, FAQ's of een productcatalogus. Een eenvoudige chatbot met toegang tot deze informatie kan veel tijd vrijmaken die je kwijt bent aan het beantwoorden van steeds terugkerende vragen.

In mijn geval bouw ik een digitale sommelier: een bot die gebruikers adviseert over de te kopen wijnen, op basis van een externe wijncatalogus.

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.

2. Een React-app maken

We hebben onze chatbot, maar hij heeft een thuis nodig, dus laten we een snelle React-app bouwen waar gebruikers met de bot kunnen communiceren.

Merk op dat ik Next.js gebruik. Ik denk dat het relevanter en completer is dan gewoon React, en deze tutorial zal alle onderwerpen behandelen die React-gebruikers nodig hebben.

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.

3. Integreer je Chatbot in je React-app

Tijd om onze Barbies te laten kussen.

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.

Een React-app van stroom voorzien met een chatbot

Met zware webframeworks heb je het te druk met de kernfunctionaliteit om je zorgen te maken over add-ons.

Botpress wordt geleverd met kant-en-klare componenten, een visuele drag-and-drop bouwer en aanpasbaarheid van boven tot onder. Eenvoudige integratie gaat niet ten koste van de prestaties. 

Als je bouwt met React, dan ben je uit op kwaliteit. Je chatbot moet dat weerspiegelen.

Begin vandaag nog met bouwen. Het is gratis.

FAQs

1. Kan ik deze chatbot in productie nemen?

Ja, je kunt de chatbot in productie nemen nadat je deze hebt gepubliceerd in Botpress Studio en hebt ingesloten in je React-app. Eenmaal ingebed, kun je de hele applicatie implementeren met platforms zoals Vercel of een andere hostingprovider die jouw tech stack ondersteunt.

2. Kan ik de look en feel van de UI van de chatbot aanpassen?

Ja, je kunt het uiterlijk van de chatbot UI volledig aanpassen met het Botpress Webchat component. Het ondersteunt rekwisieten voor kleuren, grootte, plaatsing en styling, en je kunt de standaardstijlen overschrijven met aangepaste CSS om bij het ontwerp van je merk te passen.

3. Moet ik een botpersona definiëren en hoe beïnvloedt dit gesprekken?

Ja, het definiëren van een bot persona is belangrijk omdat het de manier bepaalt waarop de chatbot communiceert, inclusief toon en zinsopbouw. Dit zorgt ervoor dat de conversatie overeenkomt met de stem van je merk en verbetert het vertrouwen van de gebruiker.

4. Wat is het doel van een chatbotflow en hoe definieer ik er een?

Het doel van een chatbot flow is om de logica te bepalen van hoe de bot reageert op gebruikers. In Botpress definieer je flows visueel in het tabblad "Workflows" met behulp van knooppunten voor acties, berichten, voorwaarden en overgangen.

5. Kan ik mijn bestaande documenten (bijv. FAQ's of productcatalogi) gebruiken om de bot te trainen?

Ja, je kunt bestaande documenten zoals FAQ's of handleidingen uploaden naar de Botpress Knowledge Base. De bot gebruikt retrieval-augmented generation (RAG) om vragen te beantwoorden door relevante informatie rechtstreeks uit die documenten te halen.