Paano Gumawa ng Chatbot sa React JS Like a Pro

Para man sa booking ng appointment, FAQ, o rekomendasyon sa produkto, halos anumang website ang maaaring makinabang mula sa isang AI Agent o chatbot.

At sila ay. Sa pagiging ang chatbots ang pinakamabilis na lumalagong channel ng komunikasyon para sa mga brand, walang oras tulad ng kasalukuyan para makisali sa aksyon.

Kaya paano mo pinagsasama-sama ang lahat ng mga sangkap na ito? Sa ibabaw ng React, kailangan mong mag-alala tungkol sa iyong LLM provider, AI agent frameworks , at kahit papaano ay naka-package na lahat sa mga bahagi ng UI na maaaring makipag-ugnayan ang iyong mga bisita.

Ang magandang balita ay nasasakupan ka ng mga platform ng chatbot . Sa gabay na ito, ibibigay ko sa iyo ang mga hakbang upang:

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

Sa kaunting pagsisikap, magkakaroon ka ng isang propesyonal, mahusay na gumaganap na chatbot na isinama nang walang putol sa iyong React site.

Siyanga pala, maaari mong laktawan ang tutorial at tingnan ang code .

2. Bumuo ng Chatbot

Sa unang malaking piraso ng puzzle: ang chatbot.

Upang gumawa ng bot, pumunta sa studio at i-click ang Lumikha ng Bot + .

Nakakatulong itong tukuyin ang isang layunin, ngunit hindi mo kailangan ng partikular na binuong ideya. Ang iyong negosyo ay halos tiyak na may mga dokumento ng patakaran, FAQ, o isang katalogo ng produkto. Ang isang simpleng chatbot na may access sa impormasyong ito ay maaaring magbakante ng maraming oras na ginugugol mo sa pagsagot sa mga paulit-ulit na tanong.

Sa aking kaso, gagawa ako ng digital sommelier: isang bot na nagpapayo sa mga user na bumili ng mga alak, na ginagabayan ng isang external na catalog ng alak.

Tukuyin ang daloy

Anuman ang ginagawa nito, kakailanganin ng iyong bot ng daloy. Ito ang lohika na tumutukoy sa gawi ng bot. 

Sa studio, pindutin ang Workflows sa kaliwang panel.

Hindi naman kailangang kumplikado. Ang nag-iisang autonomous node na may access sa iyong mga dokumento, (ibig sabihin, ang default na bot), ay maaaring maging lubos na epektibo.

Mahalagang ibigay ang mga tagubilin sa bot. Kabilang dito ang:

• Ang katauhan na gusto mong gamitin, hal. magalang, magiliw, o i-mirror ang tono ng gumagamit
• Mga paraan upang simulan o tapusin ang mensahe
• Paano tumugon sa mga partikular na query
• Aling mga dokumento ang sasangguni kung kailan

Idagdag ang Knowledge Base

Ito ang impormasyong kukunin ng bot para sa RAG (retrieval-augmented generation) , o paglalagay ng mga tugon nito sa iyong data. Ito ay medyo diretso, ngunit ito ay nagkakahalaga ng pag-aaral kung paano i-optimize ang iyong mga file para sa pinakamahusay na posibleng RAG.

Wynona, ang aking digital sommelier(-ère?) ay may access sa isang listahan ng alak. Isa lamang itong subset ng dataset ng Wine Reviews : isang listahan ng mga alak kasama ang kanilang mga rehiyon at mga tala sa pagtikim.

I-deploy

Kapag masaya ka na sa iyong bot, pindutin ang I-publish sa studio at live ang iyong bot.

Ginagawa nitong available para sa pagsasama sa lahat ng uri ng mga channel ng komunikasyon, tulad ng WhatsApp , Telegram , at sa mga web app, tulad ng ginagawa namin.

2. Gumawa ng React App

Mayroon kaming chatbot, ngunit kailangan nito ng tahanan, kaya bumuo tayo ng isang mabilis na React app kung saan maaaring makipag-ugnayan ang mga user sa bot.

Tandaan na gagamitin ko ang Next.js. Sa tingin ko ito ay mas may kaugnayan at kumpleto kaysa sa simpleng React, at ang tutorial na ito ay sumasaklaw sa lahat ng lupa na kailangan ng mga user ng React.

Takbo create-next-app

Patakbuhin:

npx create-next-app@14

Mapapansin mong gumagamit ako ng Next.js 14. Ang dahilan ay kailangan natin ng React 18 para maging tugma ang ating app chatbot. Ang pagpapatakbo gamit ang @latest ay bubuo sa Next.js 15 at React 19. Ang pagpapatakbo sa command sa itaas ay ang pinakamadaling paraan upang matiyak na pinapatakbo mo ang tamang bersyon ng React, at ang Next ay tugma.

Itakda ang mga configuration ng app

Ipo-prompt ka ng isang serye ng mga tanong. Personal kong nananatili sa mga default na setting, na kung ano ang gagawin ko para sa tutorial na ito.

Ipagpalagay na maayos ang lahat, makikita mo ang tala ng tagumpay.

3. Isama ang Iyong Chatbot sa React App mo

Oras na para maghalikan ang ating mga Barbie.

Kunin ang Botpress React Boilerplate

Upang isama ang chatbot sa aming app, kakailanganin namin ang:

• Ang aming client ID
• Ang prebuilt webchat Mga bahagi ng reaksyon.

Botpress ay may boilerplate code na kinabibilangan ng pareho. Para makuha ito:

• Mag-navigate sa studio , at i-click ang Ibahagi sa kanang sulok sa itaas.
• Sa kanang ibaba ng pop-up, i-click ang I-configure

• I-click ang tab na React sa kanang tuktok.
• Dito makikita mo ang Botpress boilerplate, kasama ang utos ng pag-install ng isang client ID

Siyanga pala, kung kailangan mo ng mabilis na access sa iyong client ID:

• Pumunta sa iyong dashboard Botpress
• Pumili Webchat sa side panel
• I-click ang Mga Advanced na Setting

Pinakamainam na kasanayan na iimbak ito sa isang variable ng kapaligiran, ngunit pananatilihin namin ito sa bahagi sa ngayon.

Lumikha ng a Chat Component sa iyong App

Sa aking direktoryo ng proyekto, gagawa ako ng chat.tsx file.

Pagkatapos ay punan 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 kapansin-pansing pag-aayos:

• "gamitin ang kliyente" sa taas, para sa mga bahagi na nakikitungo sa pamamahala ng estado
• Ang pagpapalit ng pangalan ng function mula sa App patungo sa Chat
• Ilang styling

Ngayon mag-navigate sa app/page.tsx at i-import ito sa itaas lamang ng 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 ay maaari kang tumakbo npm tumakbo dev sa isang terminal sa direktoryo ng proyekto upang patakbuhin ito sa isang lokal na server.

Paganahin ang React App gamit ang Chatbot

Sa mabibigat na web frameworks, masyado kang abala sa pangunahing functionality para mag-alala tungkol sa mga add-on.

Botpress ay may mga pre-built na bahagi, isang visual na tagabuo ng drag-and-drop, at top-to-bottom na customizability. Ang simpleng pagsasama ay hindi naabot sa halaga ng pagganap. 

Kung nagtatayo ka gamit ang React, ang habol mo ay kalidad. Dapat ipakita iyon ng iyong chatbot.

Simulan ang pagtatayo ngayon . Ito ay libre.

Mga FAQ

1. Maaari ko bang i-deploy ang chatbot na ito sa produksyon?

Oo, maaari mong i-deploy ang chatbot sa produksyon pagkatapos itong i-publish Botpress Studio at i-embed ito sa iyong React app. Kapag naka-embed na, maaari mong i-deploy ang buong application gamit ang mga platform tulad ng Vercel o anumang hosting provider na sumusuporta sa iyong tech stack .

2. Maaari ko bang i-customize ang hitsura at pakiramdam ng chatbot UI?

Oo, maaari mong ganap na i-customize ang hitsura ng chatbot UI gamit ang Botpress Webchat sangkap. Sinusuportahan nito ang mga props para sa mga kulay, laki, pagkakalagay, at estilo, at maaari mong i-override ang mga default na istilo gamit ang custom na CSS upang tumugma sa disenyo ng iyong brand.

3. Kailangan ko bang tukuyin ang isang bot persona, at paano ito nakakaapekto sa mga pag-uusap?

Oo, mahalaga ang pagtukoy sa isang bot persona dahil ginagabayan nito kung paano nakikipag-usap ang chatbot, kabilang ang tono at parirala. Tinitiyak nito na naaayon ang pag-uusap sa boses ng iyong brand at pinapahusay nito ang tiwala ng user.

4. Ano ang layunin ng daloy ng chatbot, at paano ko tutukuyin ang isa?

Ang layunin ng daloy ng chatbot ay kontrolin ang lohika kung paano tumugon ang bot sa mga user. Sa Botpress , makikita mo ang mga daloy sa tab na "Mga Daloy ng Trabaho" gamit ang mga node para sa mga aksyon, mensahe, kundisyon, at transition.

5. Maaari ko bang gamitin ang aking umiiral na mga dokumento (hal., FAQ o mga katalogo ng produkto) upang sanayin ang bot?

Oo, maaari kang mag-upload ng mga kasalukuyang dokumento tulad ng mga FAQ o manual sa Botpress Base ng Kaalaman. Gumagamit ang bot ng retrieval-augmented generation (RAG) upang sagutin ang mga tanong sa pamamagitan ng direktang pagkuha ng nauugnay na impormasyon mula sa mga dokumentong iyon.