Jak zbudować chatbota w React JS jak profesjonalista

Niezależnie od tego, czy chodzi o rezerwację spotkań, często zadawane pytania, czy rekomendacje produktów, prawie każda strona internetowa może skorzystać z agenta AI lub chatbota.

I są. Ponieważ chatboty są najszybciej rozwijającym się kanałem komunikacji dla marek, nie ma lepszego czasu niż teraźniejszość, aby włączyć się do akcji.

Jak więc połączyć te wszystkie komponenty? Oprócz Reacta musisz martwić się o dostawcę LLM , frameworki agentów AI i jakoś spakować to wszystko w komponenty interfejsu użytkownika, z którymi odwiedzający mogą wchodzić w interakcje.

Dobrą wiadomością jest to, że platformy chatbotowe mają wszystko pod kontrolą. W tym przewodniku przedstawię kroki, aby:

• Tworzenie niestandardowego chatbota
• Tworzenie strony internetowej za pomocą Next.js i React
• Zintegruj swojego chatbota z front-endem Reacta
• Dostosuj styl interfejsu użytkownika chatbota

Niewielkim nakładem pracy stworzysz profesjonalnego, wydajnego chatbota zintegrowanego z twoją stroną React.

Przy okazji, możesz pominąć samouczek i sprawdzić kod.

2. Zbuduj Chatbota

Przejdźmy do pierwszego dużego elementu układanki: chatbota.

Aby utworzyć bota, przejdź do studia i kliknij Create Bot +.

Pomaga to zdefiniować cel, ale nie trzeba mieć szczególnie rozwiniętego pomysłu. Twoja firma prawie na pewno ma dokumenty dotyczące polityki, często zadawane pytania lub katalog produktów. Prosty chatbot z dostępem do tych informacji może zwolnić mnóstwo czasu, który spędzasz na odpowiadaniu na powtarzające się pytania.

W moim przypadku zbuduję cyfrowego sommeliera: bota, który będzie doradzał użytkownikom przy zakupie wina, kierując się zewnętrznym katalogiem win.

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.

2. Tworzenie aplikacji React

Mamy naszego chatbota, ale potrzebuje on domu, więc zbudujmy szybką aplikację React, w której użytkownicy będą mogli wchodzić w interakcje z botem.

Zauważ, że będę używał Next.js. Myślę, że jest bardziej odpowiedni i kompletny niż zwykły React, a ten samouczek obejmie wszystkie podstawy, których potrzebują użytkownicy Reacta.

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.

3. Zintegruj swojego chatbota z aplikacją React

Czas sprawić, by nasze Barbie się całowały.

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.

Zasilanie aplikacji React za pomocą chatbota

Dzięki wytrzymałym frameworkom internetowym jesteś zbyt zajęty podstawową funkcjonalnością, aby martwić się dodatkami.

Botpress zawiera gotowe komponenty, wizualny kreator typu "przeciągnij i upuść" oraz możliwość dostosowania od góry do dołu. Prosta integracja nie odbywa się kosztem wydajności. 

Jeśli tworzysz w React, stawiasz na jakość. Twój chatbot powinien to odzwierciedlać.

Zacznij budować już dziś. To nic nie kosztuje.

Najczęściej zadawane pytania

1. Czy mogę wdrożyć tego chatbota do produkcji?

Tak, chatbota można wdrożyć w środowisku produkcyjnym po opublikowaniu go w Botpress Studio i osadzeniu w aplikacji React. Po osadzeniu możesz wdrożyć całą aplikację za pomocą platform takich jak Vercel lub dowolnego dostawcy hostingu, który obsługuje twój stack technologiczny.

2. Czy mogę dostosować wygląd interfejsu użytkownika chatbota?

Tak, możesz w pełni dostosować wygląd interfejsu użytkownika chatbota za pomocą komponentu Botpress Webchat . Obsługuje on rekwizyty dla kolorów, rozmiaru, rozmieszczenia i stylizacji, a domyślne style można zastąpić niestandardowym CSS, aby dopasować je do projektu marki.

3. Czy muszę zdefiniować osobowość bota i jak wpływa to na konwersacje?

Tak, zdefiniowanie persony bota jest ważne, ponieważ kieruje sposobem komunikacji chatbota, w tym tonem i sformułowaniami. Zapewnia to zgodność konwersacji z głosem marki i zwiększa zaufanie użytkowników.

4. Jaki jest cel przepływu chatbota i jak go zdefiniować?

Celem przepływu chatbota jest kontrolowanie logiki sposobu, w jaki bot reaguje na użytkowników. W Botpress przepływy definiuje się wizualnie w zakładce "Workflows" za pomocą węzłów dla akcji, komunikatów, warunków i przejść.

5. Czy mogę wykorzystać moje istniejące dokumenty (np. FAQ lub katalogi produktów) do szkolenia bota?

Tak, do bazy wiedzy Botpress można przesyłać istniejące dokumenty, takie jak często zadawane pytania lub podręczniki. Bot wykorzystuje generowanie wspomagane wyszukiwaniem (RAG), aby odpowiadać na pytania, pobierając odpowiednie informacje bezpośrednio z tych dokumentów.