Jak zbudować chatbota w React JS jak profesjonalista

Niezależnie czy chodzi o rezerwację wizyt, FAQ czy rekomendacje produktów, praktycznie każda strona może zyskać na Agencie AI lub chatbotcie.

I tak się dzieje. Chatboty to najszybciej rozwijający się kanał komunikacji dla marek, więc to idealny moment, by dołączyć do trendu.

Jak więc połączyć te wszystkie elementy? Oprócz React musisz zadbać o dostawcę LLM, frameworki agentów AI i jakoś zamknąć to wszystko w komponentach UI, z którymi użytkownicy będą wchodzić w interakcję.

Dobra wiadomość jest taka, że platformy chatbotowe mają to już zapewnione. W tym przewodniku pokażę Ci, jak:

• Zbudować własnego chatbota
• Stworzyć stronę w Next.js i React
• Zintegrować chatbota z front-endem React
• Dostosować wygląd UI chatbota

Przy niewielkim wysiłku będziesz mieć profesjonalnego, wydajnego chatbota płynnie zintegrowanego ze swoją stroną React.

Możesz też pominąć tutorial i zobaczyć kod.

2. Zbuduj chatbota

Czas na pierwszy duży element układanki: chatbota.

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

Warto określić cel, ale nie musisz mieć szczegółowego pomysłu. Twoja firma prawie na pewno ma dokumenty z politykami, FAQ lub katalog produktów. Prosty chatbot z dostępem do tych informacji może zaoszczędzić mnóstwo czasu poświęcanego na powtarzające się pytania.

W moim przypadku zbuduję cyfrowego sommeliera: bota, który doradza użytkownikom w wyborze win, korzystając z zewnętrznego katalogu win.

Zdefiniuj flow

Niezależnie od funkcji, Twój bot potrzebuje flow, czyli logiki określającej jego zachowanie.

W studio kliknij Workflows w lewym panelu.

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

Ważne jest, by przekazać botowi instrukcje. Obejmuje to:

• Personę, jaką ma przyjąć, np. uprzejmy, koleżeński lub odzwierciedlający ton użytkownika
• Sposoby rozpoczynania i kończenia wiadomości
• Jak odpowiadać na konkretne pytania
• Do których dokumentów się odwoływać i kiedy

Dodaj Bazę Wiedzy

To informacje, z których bot będzie korzystać do RAG (retrieval-augmented generation), czyli dostosowywania odpowiedzi do Twoich danych. To dość proste, ale warto dowiedzieć się jak zoptymalizować pliki dla najlepszego RAG.

Wynona, mój cyfrowy sommelier, ma dostęp do listy win. To po prostu fragment zbioru Wine Reviews: lista win z regionami i opisami smakowymi.

Wdróż

Gdy Twój bot jest gotowy, kliknij Publish w studio i bot zostanie opublikowany.

Dzięki temu będzie dostępny do integracji na różnych kanałach komunikacji, takich jak WhatsApp, Telegram czy aplikacje webowe, jak ta, którą budujemy.

2. Stwórz aplikację React

Mamy już chatbota, ale potrzebuje on miejsca, więc zbudujmy szybką aplikację React, w której użytkownicy będą mogli z nim rozmawiać.

Zauważ, że będę używać Next.js. Uważam, że jest bardziej kompletny i relewantny niż czysty React, a ten tutorial obejmie wszystkie zagadnienia potrzebne użytkownikom React.

Uruchom create-next-app

Wpisz:

npx create-next-app@14

Zauważ, że używam Next.js 14. Powód jest taki, że potrzebujemy React 18, by nasza aplikacja była kompatybilna z chatbotem. Użycie @latest zainstaluje Next.js 15 i React 19. Powyższe polecenie to najprostszy sposób, by mieć właściwą wersję React i kompatybilny Next.

Skonfiguruj aplikację

Zostaniesz poproszony o odpowiedzi na kilka pytań. Osobiście wybieram domyślne ustawienia, co pokażę w tym tutorialu.

Jeśli wszystko pójdzie dobrze, zobaczysz komunikat o sukcesie.

3. Zintegruj chatbota z aplikacją React

Czas sprawić, by nasze Barbies się pocałowały.

Pobierz React Boilerplate Botpress

Aby zintegrować chatbota z aplikacją, potrzebujemy:

• Naszego client ID
• Gotowych komponentów webchat dla React.

Botpress udostępnia boilerplate zawierający oba te elementy. Aby go pobrać:

• Przejdź do studio i kliknij Share w prawym górnym rogu.
• Na dole okienka kliknij Configure

• Kliknij zakładkę React w prawym górnym rogu.
• Znajdziesz tu boilerplate Botpress, w tym polecenie instalacji oraz client ID.

Jeśli będziesz potrzebować szybkiego dostępu do swojego client ID:

• Przejdź do panelu Botpress
• Wybierz Webchat w bocznym panelu
• Kliknij Advanced Settings

Najlepiej przechowywać to w zmiennej środowiskowej, ale na razie zostawimy to w komponencie.

Utwórz komponent czatu w aplikacji

W katalogu projektu utworzę plik chat.tsx.

Następnie wklej kod 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 kod Botpress z kilkoma istotnymi zmianami:

• "use client" na górze, dla komponentów zarządzających stanem
• Zmiana nazwy funkcji z App na Chat
• Trochę stylowania

Przejdź do app/page.tsx i zaimportuj komponent 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ć serwer lokalny.

Zasil aplikację React chatbotem

Przy rozbudowanych frameworkach webowych jesteś zbyt zajęty kluczową funkcjonalnością, by martwić się o dodatki.

Botpress oferuje gotowe komponenty, wizualny kreator drag-and-drop i pełną możliwość dostosowania. Prosta integracja nie oznacza kompromisów w wydajności.

Jeśli budujesz w React, zależy Ci na jakości. Twój chatbot powinien to odzwierciedlać.

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

Najczęstsze pytania

1. Czy mogę wdrożyć tego chatbota na produkcję?

Tak, możesz wdrożyć tego chatbota na produkcję po opublikowaniu go w Botpress Studio i osadzeniu w aplikacji React. Po osadzeniu możesz wdrożyć całą aplikację na platformach takich jak Vercel lub dowolnym hostingu obsługującym Twój stack technologiczny.

2. Czy mogę dostosować wygląd i styl UI chatbota?

Tak, możesz w pełni dostosować wygląd UI chatbota korzystając z komponentu Botpress Webchat. Obsługuje on właściwości dotyczące kolorów, rozmiaru, położenia i stylowania, a domyślne style możesz nadpisać własnym CSS, by dopasować je do identyfikacji wizualnej marki.

3. Czy muszę zdefiniować personę bota i jak to wpływa na rozmowy?

Tak, określenie persony bota jest ważne, bo wpływa na sposób komunikacji chatbota, w tym ton i sformułowania. Dzięki temu rozmowa jest spójna z głosem Twojej marki i buduje zaufanie użytkowników.

4. Jaki jest cel flow chatbota i jak go zdefiniować?

Flow chatbota służy do kontrolowania logiki odpowiedzi bota. W Botpress definiujesz flow wizualnie w zakładce „Workflows”, używając węzłów do akcji, wiadomości, warunków i przejść.

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

Tak, możesz przesłać istniejące dokumenty, takie jak FAQ czy instrukcje, do Bazy Wiedzy Botpress. Bot korzysta z retrieval-augmented generation (RAG), by odpowiadać na pytania, pobierając odpowiednie informacje bezpośrednio z tych dokumentów.