Hoe bouw je een chatbot in React JS als een professional

Of het nu gaat om afspraken boeken, veelgestelde vragen of productadvies, vrijwel elke website kan profiteren van een AI-agent of chatbot.

En dat gebeurt ook. Chatbots zijn het snelst groeiende communicatiekanaal voor merken, dus dit is hét moment om ermee aan de slag te gaan.

Maar hoe verbind je al deze onderdelen? Naast React moet je rekening houden met je LLM-provider, AI-agent frameworks, en alles samenbrengen in UI-componenten waarmee bezoekers kunnen communiceren.

Het goede nieuws is dat chatbotplatforms dit al voor je regelen. In deze gids geef ik je de stappen om:

• Een eigen chatbot te bouwen
• Een website te maken met Next.js en React
• Je chatbot te integreren in de React-frontend
• De stijl van de chatbot-UI aan te passen

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

Je kunt de tutorial overslaan en direct de code bekijken.

2. Bouw een chatbot

Dan nu het eerste grote onderdeel: de chatbot.

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

Het helpt om een doel te bepalen, maar je hoeft nog geen uitgewerkt idee te hebben. Je organisatie heeft waarschijnlijk al beleidsdocumenten, FAQ’s of een productcatalogus. Een eenvoudige chatbot met toegang tot deze informatie kan je veel tijd besparen bij het beantwoorden van herhaalde vragen.

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

Bepaal de flow

Wat de 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. Eén enkele autonome node met toegang tot je documenten (de standaardbot) kan al heel effectief zijn.

Het is belangrijk om de bot instructies te geven. Denk hierbij aan:

• De persona die je wilt dat de bot aanneemt, bijvoorbeeld beleefd, informeel, of de toon van de gebruiker spiegelen
• Hoe het gesprek te beginnen of af te sluiten
• Hoe te reageren op bepaalde vragen
• Naar welke documenten verwezen moet worden en wanneer

Voeg de kennisbank toe

Dit is de informatie waar de bot op terugvalt voor RAG (retrieval-augmented generation), oftewel het afstemmen van antwoorden op jouw data. Dit is vrij eenvoudig, maar het is de moeite waard om te leren hoe je je bestanden optimaliseert voor de beste RAG-resultaten.

Wynona, mijn digitale sommelier, heeft toegang tot een wijnlijst. Dit is een deel van de Wine Reviews-dataset: een lijst van wijnen met regio’s en proefnotities.

Publiceren

Als je tevreden bent met je bot, klik je op Publish in de studio en is je bot live.

Nu is de bot beschikbaar voor integratie met allerlei communicatiekanalen, zoals WhatsApp, Telegram en webapps zoals die we nu bouwen.

2. Maak een React-app

We hebben onze chatbot, maar die heeft een plek nodig. Laten we dus snel een React-app bouwen waarin gebruikers met de bot kunnen praten.

Let op: ik gebruik Next.js. Dat is relevanter en completer dan puur React, en deze tutorial behandelt alles wat je als React-gebruiker nodig hebt.

Voer create-next-app uit

Voer uit:

npx create-next-app@14

Je ziet dat ik Next.js 14 gebruik. Dat komt omdat we React 18 nodig hebben om onze app chatbot-compatibel te maken. Met @latest krijg je Next.js 15 en React 19. De bovenstaande opdracht is de makkelijkste manier om zeker te weten dat je de juiste versie van React gebruikt en dat Next compatibel is.

Stel de app-configuraties in

Je krijgt een aantal vragen. Ik kies meestal de standaardinstellingen, en dat doe ik ook in deze tutorial.

Als alles goed gaat, zie je de succesmelding.

3. Integreer je chatbot in je React-app

Tijd om de Barbies te laten kussen.

Haal de Botpress React Boilerplate op

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

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

Botpress heeft boilerplate-code die beide bevat. Zo krijg je die:

• Ga naar de studio en klik rechtsboven op Share.
• Klik rechtsonder in het pop-upvenster op Configure

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

Mocht je snel je client-ID nodig hebben:

• Ga naar je Botpress-dashboard
• Selecteer Webchat in het zijmenu
• Klik op Advanced Settings

Het is het beste om deze in een omgevingsvariabele op te slaan, maar voor nu laten we hem in de component staan.

Maak een chatcomponent in je app

In mijn projectmap maak ik een chat.tsx-bestand aan.

Vul het bestand daarna 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-code met een paar belangrijke aanpassingen:

• "use client" bovenaan, voor componenten die met state management werken
• De functie hernoemen van App naar Chat
• Wat styling

Ga nu naar app/page.tsx en importeer hem net boven de footer:

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 kun je npm run dev uitvoeren in een terminal in de projectmap om de app lokaal te draaien.

Voorzie een React-app van een chatbot

Met zware webframeworks ben je vooral bezig met de kernfunctionaliteit en niet met extra’s.

Botpress biedt kant-en-klare componenten, een visuele drag-and-drop builder en volledige aanpasbaarheid. Eenvoudige integratie gaat niet ten koste van de prestaties.

Als je met React bouwt, ga je voor kwaliteit. Je chatbot moet dat ook uitstralen.

Begin vandaag nog met bouwen. Het is gratis.

Veelgestelde vragen

1. Kan ik deze chatbot in productie inzetten?

Ja, je kunt de chatbot in productie inzetten nadat je hem in Botpress Studio hebt gepubliceerd en in je React-app hebt geïntegreerd. Daarna kun je de hele applicatie uitrollen via platforms als Vercel of elke hostingprovider die je stack ondersteunt.

2. Kan ik het uiterlijk van de chatbot-UI aanpassen?

Ja, je kunt het uiterlijk van de chatbot-UI volledig aanpassen met de Botpress Webchat-component. Je kunt kleuren, formaat, positie en styling instellen via props, en standaardstijlen overschrijven met eigen CSS zodat het bij je merk past.

3. Moet ik een botpersona definiëren en wat is het effect op gesprekken?

Ja, het is belangrijk om een botpersona te definiëren, want dat bepaalt hoe de chatbot communiceert, inclusief toon en formulering. Zo sluit het gesprek aan bij de stem van je merk en vergroot je het vertrouwen van gebruikers.

4. Wat is het doel van een chatbot-flow en hoe stel ik die op?

Het doel van een chatbot-flow is de logica bepalen van hoe de bot reageert op gebruikers. In Botpress stel je flows visueel samen in het tabblad “Workflows”, met nodes voor acties, berichten, voorwaarden en overgangen.

5. Kan ik bestaande documenten (zoals FAQ’s of productcatalogi) gebruiken om de bot te trainen?

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