Cara Membina Chatbot dalam React JS Seperti Pro

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

Dan mereka adalah. Dengan chatbots menjadi saluran komunikasi yang paling pesat berkembang untuk jenama, tiada masa seperti masa kini untuk mengambil bahagian dalam tindakan itu.

Jadi bagaimana anda menyusun semua komponen ini? Selain daripada React, anda perlu risau tentang anda LLM pembekal, rangka kerja ejen AI , dan entah bagaimana membungkus semuanya ke dalam komponen UI yang boleh berinteraksi dengan pelawat anda.

Berita baiknya ialah platform chatbot telah anda lindungi. Dalam panduan ini saya akan memberi anda langkah-langkah untuk:

• Bina chatbot tersuai
• Buat tapak web dengan Next.js dan React
• Sepadukan chatbot anda ke bahagian hadapan React
• Sesuaikan gaya UI chatbot

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

By the way, anda boleh melangkau tutorial dan lihat kod .

2. Bina Chatbot

Pada bahagian besar pertama teka-teki: chatbot.

Untuk membuat bot, pergi ke studio dan klik Cipta Bot + .

Ia membantu untuk menentukan tujuan, tetapi anda tidak memerlukan idea yang dibangunkan secara khusus. Perniagaan anda hampir pasti mempunyai dokumen dasar, Soalan Lazim atau katalog produk. Bot sembang ringkas dengan akses kepada maklumat ini boleh membebaskan banyak masa yang anda luangkan untuk menjawab soalan berulang.

Dalam kes saya, saya akan membina sommelier digital: bot yang menasihati pengguna tentang wain untuk membeli, dipandu oleh katalog wain luaran.

Tentukan aliran

Tidak kira apa yang dilakukannya, bot anda memerlukan aliran. Inilah logik yang menentukan tingkah laku bot. 

Di studio, tekan Workflows di panel kiri.

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

Adalah penting untuk memberikan arahan kepada bot. Ini termasuk:

• Persona yang anda mahu pakai, cth sopan, mesra atau mencerminkan nada pengguna
• Cara untuk memulakan atau menamatkan mesej
• Cara menjawab pertanyaan tertentu
• Dokumen mana yang perlu dirujuk apabila

Tambah Pangkalan Pengetahuan

Ini ialah maklumat yang akan diambil oleh bot untuk RAG (generasi dipertingkatkan semula) , atau memenuhi responsnya kepada data anda. Ini agak mudah, tetapi ia berbaloi untuk mempelajari cara mengoptimumkan fail anda untuk RAG yang terbaik.

Wynona, sommelier digital saya(-ère?) mempunyai akses kepada senarai wain. Ia hanyalah subset set data Ulasan Wain : senarai wain dengan kawasan dan nota rasanya.

Menggunakan

Setelah anda berpuas hati dengan bot anda, tekan Terbitkan dalam studio dan bot anda disiarkan secara langsung.

Ini menjadikannya tersedia untuk penyepaduan merentas semua jenis saluran komunikasi, seperti WhatsApp , Telegram , dan dalam apl web, seperti yang sedang kami bina.

2. Cipta Apl React

Kami mempunyai chatbot kami, tetapi ia memerlukan rumah, jadi mari bina apl React pantas di mana pengguna boleh berinteraksi dengan bot.

Ambil perhatian bahawa saya akan menggunakan Next.js. Saya rasa ia lebih relevan dan lengkap daripada React biasa, dan tutorial ini akan merangkumi semua perkara yang pengguna React perlukan.

Lari create-next-app

Jalankan:

npx create-next-app@14

Anda akan perasan saya menggunakan Next.js 14. Sebabnya ialah kami memerlukan React 18 untuk menjadikan chatbot aplikasi kami serasi. Menjalankan dengan @latest akan membina dengan Next.js 15 dan React 19. Menjalankan arahan di atas ialah cara paling mudah untuk memastikan anda menjalankan versi React yang betul dan Next adalah serasi.

Tetapkan konfigurasi apl

Anda akan digesa dengan beberapa siri soalan. Saya secara peribadi tetap dengan tetapan lalai, yang akan saya lakukan untuk tutorial ini.

Dengan mengandaikan semuanya berjalan lancar, anda akan melihat log kejayaan.

3. Sepadukan Chatbot Anda Ke Apl React anda

Masa untuk membuat Barbies kami mencium.

Dapatkan Botpress React Boilerplate

Untuk menyepadukan chatbot ke dalam apl kami, kami memerlukan:

• ID pelanggan kami
• Yang terbina webchat Komponen bertindak balas.

Botpress mempunyai kod boilerplate yang merangkumi kedua-duanya. Untuk mendapatkannya:

• Navigasi ke studio , dan klik Kongsi di penjuru kanan sebelah atas.
• Di bahagian bawah sebelah kanan pop timbul, klik Konfigurasikan

• Klik tab React di bahagian atas sebelah kanan.
• Di sini anda akan menemui Botpress boilerplate, termasuk arahan pemasangan ID pelanggan

Ngomong-ngomong, jika anda memerlukan akses pantas kepada ID pelanggan anda:

• Pergi ke papan pemuka Botpress anda
• Pilih Webchat dalam panel sisi
• Klik Tetapan Lanjutan

Amalan terbaik untuk menyimpan ini dalam pembolehubah persekitaran, tetapi kami akan menyimpannya dalam komponen buat masa ini.

Buat a Chat Komponen dalam Apl anda

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

Kemudian isi dengan kod untuk pelanggan 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 adalah botpress kod dengan beberapa tweak yang ketara:

• "gunakan pelanggan" di bahagian atas, bagi komponen yang berurusan dengan pengurusan negeri
• Menamakan semula fungsi daripada Apl kepada Chat
• Beberapa penggayaan

Sekarang navigasi ke app/page.tsx dan importnya tepat di atas pengaki:

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 berlari npm run dev dalam terminal dalam direktori projek untuk menjalankannya pada pelayan tempatan.

Kuasa Apl React dengan Chatbot

Dengan rangka kerja web tugas berat, anda terlalu sibuk dengan fungsi teras untuk bimbang tentang alat tambah.

Botpress datang dengan komponen pra-bina, pembina seret dan lepas visual dan kebolehsesuaian atas ke bawah. Penyepaduan mudah tidak melibatkan kos prestasi. 

Jika anda membina dengan React, maka anda mahukan kualiti. Chatbot anda harus mencerminkannya.

Mula membina hari ini . Ia percuma.

Soalan lazim

1. Bolehkah saya menggunakan chatbot ini ke pengeluaran?

Ya, anda boleh menggunakan chatbot ke pengeluaran selepas menerbitkannya Botpress Studio dan membenamkannya dalam apl React anda. Setelah dibenamkan, anda boleh menggunakan keseluruhan aplikasi menggunakan platform seperti Vercel atau mana-mana penyedia pengehosan yang menyokong teknologi anda stack .

2. Bolehkah saya menyesuaikan rupa dan rasa UI chatbot?

Ya, anda boleh menyesuaikan sepenuhnya rupa UI chatbot menggunakan Botpress Webchat komponen. Ia menyokong prop untuk warna, saiz, peletakan dan penggayaan, dan anda boleh menggantikan gaya lalai dengan CSS tersuai untuk dipadankan dengan reka bentuk jenama anda.

3. Adakah saya perlu mentakrifkan persona bot, dan bagaimanakah ia mempengaruhi perbualan?

Ya, mentakrifkan persona bot adalah penting kerana ia membimbing cara chatbot berkomunikasi, termasuk nada dan frasa. Ini memastikan perbualan sejajar dengan suara jenama anda dan meningkatkan kepercayaan pengguna.

4. Apakah tujuan aliran chatbot, dan bagaimana saya mentakrifkannya?

Tujuan aliran chatbot adalah untuk mengawal logik cara bot bertindak balas kepada pengguna. Dalam Botpress , anda menentukan aliran secara visual dalam tab "Aliran Kerja" menggunakan nod untuk tindakan, mesej, syarat dan peralihan.

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

Ya, anda boleh memuat naik dokumen sedia ada seperti Soalan Lazim atau manual ke dalam Botpress Pangkalan Pengetahuan. Bot menggunakan penjanaan dipertingkatkan semula (RAG) untuk menjawab soalan dengan menarik maklumat yang berkaitan terus daripada dokumen tersebut.