Wie man einen Chatbot in React JS erstellt

Definieren Sie den Fluss

Unabhängig davon, was er tut, benötigt Ihr Bot einen Ablauf. Dies ist die Logik, die das Verhalten des Bots bestimmt. 

Klicken Sie im Studio auf Workflows in der linken Leiste.

Es muss nicht kompliziert sein. Ein einziger autonomer Knoten mit Zugang zu Ihren Dokumenten (d. h. der Standard-Bot) kann äußerst effektiv sein.

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

• Die Persönlichkeit, die sie annehmen soll, z. B. höflich, gesellig oder den Tonfall des Benutzers widerspiegelnd
• Möglichkeiten, die Nachricht zu beginnen oder zu beenden
• Wie man auf bestimmte Anfragen antwortet
• Auf welche Dokumente ist zu verweisen, wenn

Hinzufügen der Wissensdatenbank

Dies sind die Informationen, auf die der Bot bei der RAG (retrieval-augmented generation) zurückgreift, d. h. bei der Anpassung seiner Antworten an Ihre Daten. Dies ist relativ einfach, aber es lohnt sich zu lernen , wie Sie Ihre Dateien für die bestmögliche RAG optimieren können.

Wynona, meine digitale Sommelière, hat Zugang zu einer Weinliste. Es handelt sich dabei nur um eine Teilmenge des Datensatzes von Wine Reviews: eine Liste von Weinen mit ihren Regionen und Verkostungsnotizen.

Bereitstellung von

Sobald Sie mit Ihrem Bot zufrieden sind, klicken Sie im Studio auf Veröffentlichen und Ihr Bot ist live.

Dies ermöglicht die Integration in alle Arten von Kommunikationskanälen, wie WhatsApp, Telegram und in Web-Apps, wie die, die wir gerade entwickeln.

ausführen. create-next-app

Laufen:

npx create-next-app@14

Sie werden feststellen, dass ich Next.js 14 verwende. Der Grund dafür ist, dass wir React 18 benötigen, um unsere App Chatbot-kompatibel zu machen. Die Ausführung mit @latest wird mit Next.js 15 und React 19 erstellt. Die Ausführung des obigen Befehls ist der einfachste Weg, um sicherzustellen, dass Sie die richtige Version von React verwenden und dass Next kompatibel ist.

App-Konfigurationen festlegen

Sie werden mit einer Reihe von Fragen konfrontiert. Ich persönlich bleibe bei den Standardeinstellungen, was ich auch in diesem Tutorial tun werde.

Wenn alles reibungslos verläuft, wird das Erfolgsprotokoll angezeigt.

Holen Sie sich die Botpress React Boilerplate

Um den Chatbot in unsere App zu integrieren, benötigen wir:

• Unser Kunde ID
• Die vorgefertigten webchat React Komponenten.

Botpress verfügt über Boilerplate-Code, der beides enthält. Um ihn zu erhalten:

• Navigieren Sie zum Studio und klicken Sie auf Freigeben in der oberen rechten Ecke.
• Klicken Sie unten rechts im Pop-up-Fenster auf Configure

• Klicken Sie oben rechts auf die Registerkarte React.
• Hier finden Sie das Boilerplate für Botpress , einschließlich des Installationsbefehls und einer Client-ID

Übrigens, falls Sie einmal einen schnellen Zugriff auf Ihre Kunden-ID benötigen:

• Gehen Sie zu Ihrem Botpress
• Wählen Sie Webchat in der Seitenleiste
• Klicken Sie auf Erweiterte Einstellungen

Es ist am besten, dies in einer Umgebungsvariablen zu speichern, aber wir werden es vorerst in der Komponente belassen.

Erstellen Sie eine Chat in Ihrer App

In meinem Projektverzeichnis werde ich eine Datei chat.tsx erstellen.

Füllen Sie ihn 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>
   );
}

Dies ist der botpress mit ein paar bemerkenswerten Änderungen:

• "Client verwenden" an der Spitze, für Komponenten, die sich mit der Zustandsverwaltung befassen
• Umbenennung der Funktion von App in Chat
• Etwas Styling

Navigieren Sie nun zu app/page.tsx und importieren Sie es direkt über die Fußzeile:

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 npm run dev in einem Terminal im Projektverzeichnis, um es auf einem lokalen Server auszuführen.