So baust du einen Chatbot in React JS wie ein Profi

Ob für Terminbuchungen, FAQs oder Produktempfehlungen – fast jede Website profitiert von einem KI-Agenten oder Chatbot.

Und das passiert bereits. Chatbots sind der schnellst wachsende Kommunikationskanal für Marken – es gibt also keinen besseren Zeitpunkt, um einzusteigen.

Wie verbindet man nun all diese Komponenten? Neben React müssen Sie sich um Ihren LLM-Anbieter, KI-Agenten-Frameworks und die Einbindung in UI-Komponenten kümmern, mit denen Ihre Besucher interagieren können.

Die gute Nachricht: Chatbot-Plattformen bieten alles, was Sie brauchen. In dieser Anleitung zeige ich Ihnen, wie Sie:

• Einen eigenen Chatbot erstellen
• Eine Website mit Next.js und React bauen
• Ihren Chatbot ins React-Frontend integrieren
• Das UI-Design des Chatbots anpassen

Mit wenig Aufwand haben Sie einen professionellen, leistungsstarken Chatbot nahtlos in Ihre React-Seite integriert.

Übrigens: Sie können das Tutorial überspringen und sich direkt den Code ansehen.

2. Einen Chatbot bauen

Kommen wir zum ersten großen Baustein: dem Chatbot.

Um einen Bot zu erstellen, gehen Sie ins Studio und klicken Sie auf Bot erstellen +.

Es hilft, ein Ziel zu definieren, aber eine ausgereifte Idee ist nicht nötig. Ihr Unternehmen hat vermutlich Richtlinien, FAQs oder einen Produktkatalog. Ein einfacher Chatbot mit Zugriff auf diese Informationen kann Ihnen viel Zeit bei wiederkehrenden Fragen sparen.

In meinem Beispiel baue ich einen digitalen Sommelier: einen Bot, der Nutzer beim Weinkauf berät und sich an einem externen Weinkatalog orientiert.

Den Flow definieren

Unabhängig vom Zweck braucht Ihr Bot einen Flow – also die Logik, die das Verhalten des Bots steuert.

Klicken Sie im Studio im linken Menü auf Workflows.

Das muss nicht kompliziert sein. Ein einzelner autonomer Knoten mit Zugriff auf Ihre Dokumente (also der Standard-Bot) kann sehr effektiv sein.

Es ist wichtig, dem Bot Anweisungen zu geben. Dazu gehören:

• Die gewünschte Persona, z. B. höflich, locker oder im Tonfall des Nutzers
• Wie Nachrichten begonnen oder beendet werden sollen
• Wie auf bestimmte Anfragen reagiert werden soll
• Auf welche Dokumente wann Bezug genommen werden soll

Die Wissensbasis hinzufügen

Dies sind die Informationen, auf die der Bot für RAG (retrieval-augmented generation) zugreift, um seine Antworten an Ihre Daten anzupassen. Das ist recht einfach, aber es lohnt sich, zu lernen, wie Sie Ihre Dateien optimieren, um bestmögliche RAG-Ergebnisse zu erzielen.

Wynona, mein digitaler Sommelier, hat Zugriff auf eine Weinauswahl. Das ist ein Auszug aus dem Wine Reviews-Datensatz: eine Liste von Weinen mit Regionen und Verkostungsnotizen.

Veröffentlichen

Wenn Sie mit Ihrem Bot zufrieden sind, klicken Sie im Studio auf Veröffentlichen – Ihr Bot ist dann live.

Damit steht er für die Integration in verschiedene Kommunikationskanäle bereit, z. B. WhatsApp, Telegram oder Web-Apps wie die, die wir gerade bauen.

2. Eine React-App erstellen

Wir haben unseren Chatbot, aber er braucht eine Plattform. Bauen wir also schnell eine React-App, in der Nutzer mit dem Bot interagieren können.

Ich verwende Next.js, weil es relevanter und vollständiger ist als reines React. Dieses Tutorial deckt aber alles ab, was auch React-Nutzer brauchen.

create-next-app ausführen

Führen Sie Folgendes aus:

npx create-next-app@14

Ich verwende Next.js 14, weil wir React 18 benötigen, damit unser Chatbot funktioniert. Mit @latest würden Next.js 15 und React 19 installiert. Der obige Befehl ist der einfachste Weg, um sicherzustellen, dass Sie die richtige Version von React und eine kompatible Next-Version nutzen.

App-Konfigurationen festlegen

Sie werden durch einige Fragen geführt. Ich bleibe bei den Standardeinstellungen, die ich auch in diesem Tutorial verwende.

Wenn alles klappt, sehen Sie die Erfolgsmeldung.

3. Chatbot in Ihre React-App integrieren

Zeit, unsere Barbies küssen zu lassen.

Das Botpress React-Boilerplate herunterladen

Um den Chatbot in unsere App einzubinden, brauchen wir:

• Unsere Client-ID
• Die vorgefertigten Webchat-React-Komponenten.

Botpress stellt Boilerplate-Code bereit, der beides enthält. So bekommen Sie ihn:

• Gehen Sie ins Studio und klicken Sie oben rechts auf Teilen.
• Klicken Sie unten rechts im Pop-up auf Konfigurieren

• Klicken Sie oben rechts auf den Tab React.
• Hier finden Sie das Botpress-Boilerplate inklusive Installationsbefehl und Client-ID.

Falls Sie Ihre Client-ID schnell benötigen:

• Gehen Sie zum Botpress-Dashboard
• Wählen Sie Webchat im Seitenmenü
• Klicken Sie auf Erweiterte Einstellungen

Am besten speichern Sie diese in einer Umgebungsvariable, aber wir lassen sie vorerst in der Komponente.

Eine Chat-Komponente in Ihrer App erstellen

Im Projektverzeichnis erstelle ich eine chat.tsx-Datei.

Füllen Sie diese Datei dann mit dem Code für den 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>
   );
}

Das ist der Botpress-Code mit ein paar Anpassungen:

• "use client" ganz oben, für Komponenten mit State-Management
• Umbenennung der Funktion von App zu Chat
• Etwas Styling

Wechseln Sie nun zu app/page.tsx und importieren Sie die Komponente direkt über dem 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>
 );
}

Jetzt können Sie im Projektverzeichnis im Terminal npm run dev ausführen, um die App lokal zu starten.

Eine React-App mit einem Chatbot betreiben

Mit leistungsstarken Web-Frameworks können Sie sich auf die Kernfunktionen konzentrieren und müssen sich nicht um Zusatzfunktionen sorgen.

Botpress bietet vorgefertigte Komponenten, einen visuellen Drag-and-Drop-Builder und umfassende Anpassungsmöglichkeiten. Die einfache Integration geht nicht zulasten der Performance.

Wer mit React baut, setzt auf Qualität – das sollte auch Ihr Chatbot widerspiegeln.

Jetzt loslegen. Kostenlos.

FAQs

1. Kann ich diesen Chatbot produktiv einsetzen?

Ja, Sie können den Chatbot nach der Veröffentlichung in Botpress Studio und der Einbettung in Ihre React-App produktiv einsetzen. Anschließend können Sie die gesamte Anwendung z. B. mit Vercel oder jedem anderen Hosting-Anbieter, der Ihren Tech-Stack unterstützt, bereitstellen.

2. Kann ich das Aussehen des Chatbot-UIs anpassen?

Ja, Sie können das Aussehen des Chatbot-UIs mit der Botpress-Webchat-Komponente vollständig anpassen. Sie unterstützt Eigenschaften für Farben, Größe, Position und Styling. Sie können Standard-Styles mit eigenem CSS überschreiben, um das Design Ihrer Marke zu übernehmen.

3. Muss ich eine Bot-Persona definieren und wie beeinflusst das die Gespräche?

Ja, die Definition einer Bot-Persona ist wichtig, da sie die Kommunikation des Chatbots – also Tonfall und Formulierungen – steuert. So bleibt das Gespräch im Einklang mit Ihrer Markenstimme und das Vertrauen der Nutzer steigt.

4. Was ist der Zweck eines Chatbot-Flows und wie definiere ich einen?

Ein Chatbot-Flow steuert die Logik, wie der Bot auf Nutzer reagiert. In Botpress definieren Sie Flows visuell im Tab „Workflows“ mit Knoten für Aktionen, Nachrichten, Bedingungen und Übergänge.

5. Kann ich meine bestehenden Dokumente (z. B. FAQs oder Produktkataloge) nutzen, um den Bot zu trainieren?

Ja, Sie können bestehende Dokumente wie FAQs oder Handbücher in die Botpress-Wissensbasis hochladen. Der Bot nutzt Retrieval-Augmented Generation (RAG), um Fragen zu beantworten, indem er relevante Informationen direkt aus diesen Dokumenten zieht.