Paano Bumuo ng Chatbot sa React JS na Dalubhasa

Para man ito sa pag-book ng appointment, FAQs, o rekomendasyon ng produkto, halos lahat ng website ay maaaring makinabang sa isang AI Agent o chatbot.

At totoo iyon. Dahil ang chatbots ang pinakamabilis lumalaking channel ng komunikasyon para sa mga brand, ngayon na ang tamang panahon para sumali.

Paano mo nga ba pagsasama-samahin ang lahat ng ito? Bukod sa React, kailangan mong isipin ang iyong LLM provider, AI agent frameworks, at kung paano mo ito ilalagay sa UI components na pwedeng gamitin ng mga bisita mo.

Ang magandang balita, may chatbot platforms na tutulong sa’yo. Sa gabay na ito, ituturo ko ang mga hakbang para:

• Gumawa ng custom na chatbot
• Gumawa ng website gamit ang Next.js at React
• Isama ang iyong chatbot sa React front-end
• I-customize ang itsura ng chatbot UI

Sa kaunting pagsisikap, magkakaroon ka ng propesyonal at mahusay na chatbot na walang putol ang integration sa iyong React site.

Kung gusto mong laktawan ang tutorial, pwede mong tingnan agad ang code.

2. Gumawa ng Chatbot

Simulan na natin ang unang malaking bahagi: ang chatbot.

Para gumawa ng bot, pumunta sa studio at i-click ang Create Bot +.

Makakatulong kung may malinaw kang layunin, pero hindi kailangan ng masyadong detalyadong ideya. Malamang may mga dokumento, FAQs, o katalogo ng produkto ang negosyo mo. Ang simpleng chatbot na may access dito ay makakatipid ng oras sa pagsagot ng paulit-ulit na mga tanong.

Sa kaso ko, gagawa ako ng digital na sommelier: isang bot na nagbibigay ng payo sa pagpili ng alak, gamit ang panlabas na katalogo ng alak.

Itakda ang daloy

Ano man ang gagawin ng bot mo, kailangan nito ng flow. Ito ang lohika na magdidikta ng kilos ng bot.

Sa studio, i-click ang Workflows sa kaliwang panel.

Hindi kailangang komplikado. Isang autonomous node lang na may access sa iyong mga dokumento (halimbawa, ang default na bot) ay maaaring napaka-epektibo na.

Mahalagang bigyan ng malinaw na tagubilin ang bot. Kasama dito ang:

• Ang personalidad na gusto mong gamitin nito, hal. magalang, palakaibigan, o ginagaya ang tono ng user
• Mga paraan para simulan o tapusin ang mensahe
• Paano sumagot sa partikular na tanong
• Aling mga dokumento ang rerepasuhin at kailan

Idagdag ang Knowledge Base

Ito ang impormasyong gagamitin ng bot para sa RAG (retrieval-augmented generation), o para iangkop ang sagot batay sa iyong data. Madali lang ito, pero mainam na matutunan kung paano i-optimize ang iyong mga file para sa pinakamahusay na RAG.

Si Wynona, ang digital kong sommelier(-ère?), ay may access sa wine list. Bahagi lang ito ng Wine Reviews dataset: listahan ng mga alak kasama ang kanilang rehiyon at tasting notes.

I-deploy

Kapag ayos na ang bot mo, i-click ang Publish sa studio at live na ang iyong bot.

Magiging available na ito para sa integration sa iba’t ibang communication channels, gaya ng WhatsApp, Telegram, at web apps, gaya ng ginagawa natin ngayon.

2. Gumawa ng React App

May chatbot na tayo, pero kailangan nito ng tahanan, kaya gagawa tayo ng mabilisang React app kung saan pwedeng makipag-usap ang mga user sa bot.

Gagamit ako ng Next.js. Mas relevant at kumpleto ito kaysa plain React, at sakop ng tutorial na ito ang lahat ng kailangan ng React users.

Patakbuhin ang create-next-app

Patakbuhin:

npx create-next-app@14

Gamit ko ang Next.js 14. Kailangan natin ng React 18 para maging compatible ang app natin sa chatbot. Kung @latest ang gagamitin, Next.js 15 at React 19 ang lalabas. Ang utos sa taas ang pinakamadaling paraan para siguradong tama ang version ng React at compatible ang Next.

I-set ang mga configuration ng app

May lalabas na mga tanong. Karaniwan, default settings lang ang ginagamit ko, at iyon din ang gagawin ko rito.

Kung maayos ang lahat, makikita mo ang success log.

3. Isama ang Iyong Chatbot sa React App

Panahon na para pag-isahin ang ating Barbies.

Kunin ang Botpress React Boilerplate

Para maisama ang chatbot sa app, kailangan natin ng:

• Client ID natin
• Ang mga prebuilt na webchat React component.

May boilerplate code ang Botpress na kasama na ang dalawa. Para makuha ito:

• Pumunta sa studio, at i-click ang Share sa kanang itaas.
• Sa ibaba-kanan ng pop-up, i-click ang Configure

• I-click ang React tab sa kanang itaas.
• Dito mo makikita ang Botpress boilerplate, kasama ang installation command at client ID

Kung kailangan mo ng mabilisang access sa client ID mo:

• Pumunta sa iyong Botpress dashboard
• Piliin ang Webchat sa side panel
• I-click ang Advanced Settings

Pinakamainam na ilagay ito sa environment variable, pero ilalagay muna natin sa component.

Gumawa ng Chat Component sa iyong App

Sa project directory ko, gagawa ako ng chat.tsx file.

Pagkatapos, lagyan ito ng code para sa 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>
   );
}

Ito ang botpress code na may ilang mahahalagang pagbabago:

• "use client" sa itaas, para sa components na may state management
• Pagpapalit ng pangalan ng function mula App papuntang Chat
• Kaunting pag-istilo

Ngayon, pumunta sa app/page.tsx at i-import ito bago ang 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>
 );
}

Ngayon, maaari mo nang patakbuhin ang npm run dev sa terminal sa project directory para patakbuhin ito sa local server.

Paganahin ang React App gamit ang Chatbot

Sa mabibigat na web framework, abala ka sa core functionality kaya hindi mo na iniintindi ang mga add-on.

May pre-built na components ang Botpress, visual drag-and-drop builder, at kabuuang customizability. Simple ang integration pero hindi isinusuko ang performance.

Kung React ang gamit mo, kalidad ang hanap mo. Dapat ganun din ang chatbot mo.

‍Simulan ang paggawa ngayon. Libre ito.

FAQs

1. Pwede ko bang i-deploy ang chatbot na ito sa production?

Oo, pwede mong i-deploy ang chatbot sa production pagkatapos i-publish sa Botpress Studio at i-embed sa React app mo. Kapag na-embed na, pwede mong i-deploy ang buong application gamit ang mga platform tulad ng Vercel o anumang hosting provider na compatible sa tech stack mo.

2. Pwede ko bang i-customize ang itsura ng chatbot UI?

Oo, maaari mong ganap na iangkop ang itsura ng chatbot UI gamit ang Botpress Webchat component. May mga props ito para sa kulay, laki, pwesto, at istilo, at maaari mong palitan ang default na mga estilo gamit ang custom na CSS upang bumagay sa disenyo ng iyong brand.

3. Kailangan ko bang magtakda ng persona para sa bot, at paano ito nakakaapekto sa usapan?

Oo, mahalaga ang pagtatakda ng persona ng bot dahil ito ang gagabay kung paano makikipag-usap ang chatbot, kabilang ang tono at pananalita. Tinitiyak nito na tugma ang usapan sa boses ng brand mo at nakakatulong sa tiwala ng user.

4. Para saan ang chatbot flow, at paano ito itinatakda?

Ang layunin ng chatbot flow ay kontrolin ang lohika kung paano tumutugon ang bot sa mga user. Sa Botpress, visual mong itinatakda ang mga flow sa “Workflows” tab gamit ang mga node para sa mga aksyon, mensahe, kondisyon, at paglipat.

5. Pwede ko bang gamitin ang mga existing na dokumento (hal. FAQs o katalogo ng produkto) para sanayin ang bot?

Oo, pwede mong i-upload ang mga existing na dokumento tulad ng FAQs o manuals sa Botpress Knowledge Base. Gamit ng bot ang retrieval-augmented generation (RAG) para sagutin ang mga tanong gamit ang impormasyong direkta mula sa mga dokumentong iyon.