Jak zbudować chatbota w React JS

Zdefiniuj przepływ

Niezależnie od tego, co robi, bot będzie potrzebował przepływu. Jest to logika, która określa zachowanie bota. 

W studiu wybierz opcję Przepływy pracy w lewym panelu.

Nie musi to być skomplikowane. Pojedynczy autonomiczny węzeł z dostępem do dokumentów (tj. domyślny bot) może być niezwykle skuteczny.

Ważne jest, aby przekazać botowi instrukcje. Obejmują one:

• Personę, jaką ma przyjąć, np. uprzejmą, przyjacielską lub odzwierciedlającą ton użytkownika.
• Sposoby rozpoczęcia lub zakończenia wiadomości
• Jak odpowiadać na poszczególne zapytania
• Do jakich dokumentów należy się odwoływać, gdy

Dodaj bazę wiedzy

Są to informacje, z których bot będzie korzystał podczas generowania RAG (retrieval-augmented generation), czyli cateringu swoich odpowiedzi na dane użytkownika. Jest to stosunkowo proste, ale warto dowiedzieć się, jak zoptymalizować pliki pod kątem najlepszego możliwego RAG.

Wynona, mój cyfrowy sommelier (-ère?) ma dostęp do listy win. To tylko podzbiór zbioru danych Wine Reviews: lista win z ich regionami i notami degustacyjnymi.

Wdrożenie

Gdy będziesz zadowolony ze swojego bota, naciśnij przycisk Publikuj w studiu, a Twój bot zostanie uruchomiony.

Umożliwia to integrację z różnymi kanałami komunikacji, takimi jak WhatsAppi Telegram, a także w aplikacjach internetowych, takich jak ta, którą tworzymy.

Bieg create-next-app

Bieg:

npx create-next-app@14

Zauważysz, że używam Next.js 14. Powodem jest to, że potrzebujemy React 18, aby nasza aplikacja była kompatybilna z chatbotem. Uruchomienie z @latest spowoduje kompilację z Next.js 15 i React 19. Uruchomienie powyższego polecenia to najprostszy sposób, aby upewnić się, że używasz poprawnej wersji React i że Next jest kompatybilny.

Ustawianie konfiguracji aplikacji

Zostanie wyświetlony monit z serią pytań. Osobiście trzymam się ustawień domyślnych, co też zrobię w tym poradniku.

Zakładając, że wszystko pójdzie gładko, zobaczysz dziennik sukcesu.

Pobierz Botpress React Boilerplate

Aby zintegrować chatbota z naszą aplikacją, będziemy potrzebować:

• Identyfikator naszego klienta
• Gotowe komponenty webchat React.

Botpress posiada szablon kodu, który zawiera oba te elementy. Aby go pobrać:

• Przejdź do studia i kliknij Udostępnij w prawym górnym rogu.
• W prawym dolnym rogu wyskakującego okienka kliknij Konfiguruj

• Kliknij zakładkę React w prawym górnym rogu.
• Tutaj znajdziesz szablon Botpress , w tym polecenie instalacji identyfikatora klienta

Przy okazji, jeśli kiedykolwiek będziesz potrzebować szybkiego dostępu do swojego identyfikatora klienta:

• Przejdź do pulpitu nawigacyjnegoBotpress
• Wybierz Webchat w panelu bocznym
• Kliknij Ustawienia zaawansowane

Najlepszą praktyką jest przechowywanie tego w zmiennej środowiskowej, ale na razie zachowamy ją w komponencie.

Tworzenie komponentu Chat w aplikacji

W moim katalogu projektu utworzę plik chat.tsx.

Następnie wypełnij go kodem klienta chatbota:

"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>
   );
}

To jest kod botpress z kilkoma znaczącymi poprawkami:

• "użyj klienta" na górze, dla komponentów zajmujących się zarządzaniem stanem
• Zmiana nazwy funkcji z App na Chat
• Niektóre stylizacje

Teraz przejdź do app/page.tsx i zaimportować go tuż nad stopką:

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>
 );
}

Teraz możesz uruchomić npm run dev w terminalu w katalogu projektu, aby uruchomić go na lokalnym serwerze.