Cara Membina Chatbot dalam React JS Seperti Pakar

Sama ada untuk tempahan janji temu, Soalan Lazim, atau cadangan produk, hampir semua laman web boleh mendapat manfaat daripada Ejen AI atau chatbot.

Dan memang benar. Dengan chatbot menjadi saluran komunikasi yang paling pesat berkembang untuk jenama, inilah masa terbaik untuk turut serta.

Jadi, bagaimana anda menggabungkan semua komponen ini? Selain React, anda juga perlu fikirkan tentang penyedia LLM anda, rangka kerja ejen AI, dan bagaimana untuk membungkus semuanya ke dalam komponen UI yang boleh digunakan oleh pelawat anda.

Berita baiknya, platform chatbot sudah sedia membantu anda. Dalam panduan ini saya akan tunjukkan langkah-langkah untuk:

• Bina chatbot tersuai
• Cipta laman web dengan Next.js dan React
• Integrasikan chatbot anda ke dalam antaramuka React
• Sesuaikan gaya UI chatbot

Dengan sedikit usaha, anda akan mempunyai chatbot profesional dan berprestasi tinggi yang diintegrasikan dengan lancar ke dalam laman React anda.

Sebagai alternatif, anda boleh langkau tutorial ini dan terus lihat kodnya.

2. Bina Chatbot

Sekarang ke bahagian utama pertama: chatbot.

Untuk mencipta bot, pergi ke studio dan klik Create Bot +.

Adalah baik untuk tetapkan tujuan, tetapi anda tidak perlukan idea yang terlalu terperinci. Perniagaan anda hampir pasti mempunyai dokumen polisi, Soalan Lazim, atau katalog produk. Chatbot ringkas yang boleh mengakses maklumat ini boleh menjimatkan banyak masa anda daripada menjawab soalan berulang.

Untuk contoh saya, saya akan bina seorang sommelier digital: bot yang memberi nasihat tentang wain untuk dibeli, berpandukan katalog wain luaran.

Tetapkan aliran

Apa pun fungsinya, bot anda perlukan aliran. Inilah logik yang menentukan tingkah laku bot.

Dalam studio, klik Workflows di panel kiri.

Ia tidak perlu rumit. Satu nod autonomi dengan akses kepada dokumen anda (iaitu bot lalai) sudah sangat berkesan.

Penting untuk beri arahan kepada bot. Ini termasuk:

• Persona yang anda mahu bot gunakan, contohnya sopan, mesra, atau meniru nada pengguna
• Cara untuk memulakan atau menamatkan mesej
• Bagaimana untuk menjawab pertanyaan tertentu
• Dokumen mana yang perlu dirujuk dan bila

Tambah Pangkalan Pengetahuan

Inilah maklumat yang akan digunakan bot untuk RAG (retrieval-augmented generation), atau menyesuaikan jawapan dengan data anda. Ia agak mudah, tetapi berbaloi untuk belajar cara mengoptimumkan fail anda untuk hasil RAG terbaik.

Wynona, sommelier digital saya, mempunyai akses kepada senarai wain. Ia hanyalah sebahagian daripada set data Wine Reviews: senarai wain dengan wilayah dan nota rasa.

Terbitkan

Bila anda sudah berpuas hati dengan bot anda, klik Publish dalam studio dan bot anda akan aktif.

Ini membolehkan bot diintegrasikan ke pelbagai saluran komunikasi, seperti WhatsApp, Telegram, dan aplikasi web seperti yang kita bina sekarang.

2. Cipta Aplikasi React

Kita sudah ada chatbot, tapi ia perlukan tempat, jadi mari bina aplikasi React ringkas supaya pengguna boleh berinteraksi dengan bot.

Perlu diingat saya akan gunakan Next.js. Saya rasa ia lebih relevan dan lengkap berbanding React biasa, dan tutorial ini akan meliputi semua yang diperlukan oleh pengguna React.

Jalankan create-next-app

Jalankan:

npx create-next-app@14

Anda akan perasan saya gunakan Next.js 14. Sebabnya ialah kita perlukan React 18 supaya aplikasi kita serasi dengan chatbot. Jika gunakan @latest, ia akan bina dengan Next.js 15 dan React 19. Arahan di atas ialah cara paling mudah untuk pastikan anda gunakan versi React yang betul dan Next serasi.

Tetapkan konfigurasi aplikasi

Anda akan ditanya beberapa soalan. Saya sendiri biasanya kekal dengan tetapan lalai, dan itu juga yang saya akan gunakan dalam tutorial ini.

Jika semuanya berjalan lancar, anda akan lihat log kejayaan.

3. Integrasikan Chatbot Anda ke dalam Aplikasi React

Masa untuk buat Barbies kita 'bercium'.

Dapatkan Boilerplate React Botpress

Untuk integrasi chatbot ke dalam aplikasi kita, kita perlukan:

• ID klien kita
• Komponen React webchat yang telah siap.

Botpress menyediakan kod boilerplate yang mengandungi kedua-duanya. Untuk dapatkannya:

• Pergi ke studio, dan klik Share di penjuru kanan atas.
• Di penjuru kanan bawah pop-up, klik Configure

• Klik tab React di penjuru kanan atas.
• Di sini anda akan jumpa boilerplate Botpress, termasuk arahan pemasangan dan ID klien

Jika anda perlukan akses pantas ke ID klien anda:

• Pergi ke papan pemuka Botpress
• Pilih Webchat di panel sisi
• Klik Advanced Settings

Amalan terbaik ialah simpan ini dalam pembolehubah persekitaran, tetapi untuk sekarang kita letak dalam komponen.

Cipta Komponen Chat dalam Aplikasi Anda

Dalam direktori projek saya, saya akan cipta fail chat.tsx.

Kemudian isikan dengan kod untuk klien chatbot:

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

Ini ialah kod botpress dengan beberapa perubahan penting:

• "use client" di bahagian atas, untuk komponen yang menguruskan state
• Menukar nama fungsi daripada App kepada Chat
• Beberapa penyesuaian gaya

Sekarang pergi ke app/page.tsx dan import komponen ini betul-betul di atas 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>
 );
}

Sekarang anda boleh jalankan npm run dev dalam terminal di direktori projek untuk jalankan di pelayan tempatan.

Gerakkan Aplikasi React dengan Chatbot

Dengan rangka kerja web yang mantap, anda boleh fokus pada fungsi utama tanpa risau tentang tambahan.

Botpress hadir dengan komponen siap guna, pembina visual drag-and-drop, dan boleh disesuaikan sepenuhnya. Integrasi mudah tidak menjejaskan prestasi.

Jika anda membina dengan React, anda pasti mahukan kualiti. Chatbot anda juga patut mencerminkan perkara itu.

Mula bina hari ini. Ia percuma.

Soalan Lazim

1. Bolehkah saya terbitkan chatbot ini ke produksi?

Ya, anda boleh terbitkan chatbot ke produksi selepas menerbitkannya dalam Botpress Studio dan memasukkannya ke dalam aplikasi React anda. Selepas diintegrasikan, anda boleh terbitkan keseluruhan aplikasi menggunakan platform seperti Vercel atau mana-mana penyedia hosting yang menyokong teknologi anda.

2. Bolehkah saya sesuaikan rupa dan gaya UI chatbot?

Ya, anda boleh sesuaikan sepenuhnya rupa UI chatbot menggunakan komponen Webchat Botpress. Ia menyokong props untuk warna, saiz, kedudukan, dan gaya, dan anda boleh ganti gaya lalai dengan CSS tersuai supaya sepadan dengan reka bentuk jenama anda.

3. Perlukah saya tetapkan persona bot, dan bagaimana ia mempengaruhi perbualan?

Ya, menetapkan persona bot adalah penting kerana ia membimbing cara chatbot berkomunikasi, termasuk nada dan gaya bahasa. Ini memastikan perbualan selari dengan suara jenama anda dan meningkatkan kepercayaan pengguna.

4. Apakah tujuan aliran chatbot, dan bagaimana saya boleh tetapkan satu?

Tujuan aliran chatbot ialah untuk mengawal logik bagaimana bot bertindak balas kepada pengguna. Dalam Botpress, anda tetapkan aliran secara visual di tab “Workflows” menggunakan nod untuk tindakan, mesej, syarat, dan peralihan.

5. Bolehkah saya gunakan dokumen sedia ada (cth. Soalan Lazim atau katalog produk) untuk melatih bot?

Ya, anda boleh muat naik dokumen sedia ada seperti Soalan Lazim atau manual ke dalam Pangkalan Pengetahuan Botpress. Bot akan menggunakan retrieval-augmented generation (RAG) untuk menjawab soalan dengan menarik maklumat berkaitan terus daripada dokumen tersebut.