- Het bouwen van een chatbot voor websites met React vereist het samenvoegen van LLMs, frameworks en UI-componenten.
- Creëer eerst de logica en kennisbank van je chatbot en implementeer deze dan voor integratie in kanalen zoals web en messaging apps.
- Next.js vormt een solide basis voor je React-app; integreer de Botpress webchat om je bot naadloos in te bouwen.
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.