Cara Membuat Chatbot di React JS Seperti Seorang Pro

Baik untuk pemesanan janji temu, FAQ, atau rekomendasi produk, hampir semua situs web dapat memanfaatkan Agen AI atau chatbot.

Dan memang benar. Dengan chatbot sebagai saluran komunikasi yang paling cepat berkembang untuk merek, tidak ada waktu yang lebih tepat selain saat ini untuk ikut beraksi.

Jadi, bagaimana Anda merangkai semua komponen ini? Selain React, Anda juga harus memikirkan tentang penyedia LLM , kerangka kerja agen AI, dan entah bagaimana mengemas semua itu ke dalam komponen UI yang dapat digunakan oleh pengunjung.

Kabar baiknya adalah bahwa platform chatbot siap membantu Anda. Dalam panduan ini saya akan memberi Anda langkah-langkahnya:

• Bangun chatbot khusus
• Membuat situs web dengan Next.js dan React
• Integrasikan chatbot Anda ke dalam front-end React
• Sesuaikan gaya UI chatbot

Dengan sedikit usaha, Anda akan memiliki chatbot profesional berkinerja tinggi yang terintegrasi dengan mulus ke dalam situs React Anda.

Ngomong-ngomong, Anda bisa melewatkan tutorial ini dan melihat kodenya.

2. Membangun Chatbot

Lanjut ke bagian besar pertama dari teka-teki ini: chatbot.

Untuk membuat bot, masuk ke studio dan klik Create Bot +.

Akan sangat membantu untuk menentukan tujuan, namun Anda tidak memerlukan ide yang sangat berkembang. Bisnis Anda hampir pasti memiliki dokumen kebijakan, FAQ, atau katalog produk. Chatbot sederhana dengan akses ke informasi ini dapat menghemat banyak waktu yang Anda habiskan untuk menjawab pertanyaan yang berulang-ulang.

Dalam kasus saya, saya akan membuat sommelier digital: bot yang memberi saran kepada pengguna tentang wine yang akan dibeli, dipandu oleh katalog wine eksternal.

Tentukan aliran

Terlepas dari apa yang dilakukannya, bot Anda akan membutuhkan alur. Ini adalah logika yang menentukan perilaku bot. 

Di studio, tekan Workflows di panel kiri.

Tidak harus rumit. Sebuah simpul otonom tunggal dengan akses ke dokumen Anda, (yaitu bot default), bisa sangat efektif.

Penting untuk memberikan instruksi kepada bot. Ini termasuk:

• Persona yang Anda inginkan untuk diadopsi, misalnya sopan, ramah, atau mencerminkan nada pengguna
• Cara untuk memulai atau mengakhiri pesan
• Cara menanggapi pertanyaan tertentu
• Dokumen mana yang harus dirujuk ketika

Menambahkan Basis Pengetahuan

Ini adalah informasi yang akan digunakan bot untuk RAG (retrieval-augmented generation), atau memberikan respons terhadap data Anda. Hal ini relatif mudah, tetapi ada baiknya Anda mempelajari cara mengoptimalkan file Anda untuk mendapatkan RAG terbaik.

Wynona, sommelier (-ère?) digital saya memiliki akses ke daftar wine. Ini hanyalah bagian dari kumpulan data Ulasan Anggur: daftar anggur dengan wilayah dan catatan pencicipannya.

Menyebarkan

Setelah Anda puas dengan bot Anda, tekan Publikasikan di studio dan bot Anda akan ditayangkan.

Hal ini membuatnya tersedia untuk integrasi di semua jenis saluran komunikasi, seperti WhatsAppTelegram, dan di aplikasi web, seperti yang sedang kami kembangkan.

2. Membuat Aplikasi React

Kita memiliki chatbot, tetapi chatbot membutuhkan rumah, jadi mari kita buat aplikasi React yang cepat di mana pengguna dapat berinteraksi dengan bot.

Perhatikan bahwa saya akan menggunakan Next.js. Saya rasa ini lebih relevan dan lengkap daripada React biasa, dan tutorial ini akan membahas semua hal yang dibutuhkan oleh pengguna React.

Jalankan buat-aplikasi-selanjutnya

Lari:

npx buat-aplikasi-berikutnya@14

Anda akan melihat bahwa saya menggunakan Next.js 14. Alasannya adalah karena kita membutuhkan React 18 untuk membuat chatbot aplikasi kita kompatibel. Menjalankan dengan @latest akan membangun dengan Next.js 15 dan React 19. Menjalankan perintah di atas adalah cara termudah untuk memastikan Anda menjalankan versi React yang benar, dan Next kompatibel.

Mengatur konfigurasi aplikasi

Anda akan diminta untuk menjawab serangkaian pertanyaan. Saya pribadi tetap menggunakan pengaturan default, dan itulah yang akan saya lakukan untuk tutorial ini.

Dengan asumsi semua berjalan lancar, Anda akan melihat log keberhasilan.

3. Integrasikan Chatbot Anda ke dalam Aplikasi React Anda

Saatnya membuat Barbie kita berciuman.

Dapatkan Botpress React Boilerplate

Untuk mengintegrasikan chatbot ke dalam aplikasi kita, kita perlu:

• ID klien kami
• Komponen-komponen webchat React yang sudah ada sebelumnya.

Botpress memiliki kode boilerplate yang mencakup keduanya. Untuk mendapatkannya:

• Navigasikan ke studio, dan klik Bagikan di sudut kanan atas.
• Di bagian kanan bawah pop-up, klik Konfigurasi

• Klik tab React di bagian kanan atas.
• Di sini Anda akan menemukan boilerplate Botpress , termasuk perintah instalasi ID klien

Omong-omong, jika Anda membutuhkan akses cepat ke ID klien Anda:

• Buka dasborBotpress Anda
• Pilih Webchat di panel samping
• Klik Pengaturan Lanjutan

Praktik terbaiknya adalah menyimpan ini dalam variabel lingkungan, tetapi kita akan menyimpannya di dalam komponen untuk saat ini.

Membuat Komponen Chat di Aplikasi Anda

Di direktori proyek saya, saya akan membuat file chat.tsx.

Kemudian isi dengan kode 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 adalah kode botpress dengan beberapa penyesuaian penting:

• "gunakan klien" di bagian atas, untuk komponen-komponen yang berhubungan dengan manajemen negara
• Mengganti nama fungsi dari Aplikasi ke Chat
• Beberapa gaya

Sekarang arahkan ke app/page.tsx dan mengimpornya tepat 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 dapat menjalankan npm run dev di terminal dalam direktori proyek untuk menjalankannya di server lokal.

Mengaktifkan Aplikasi React dengan Chatbot

Dengan kerangka kerja web tugas berat, Anda terlalu sibuk dengan fungsionalitas inti untuk mengkhawatirkan add-on.

Botpress hadir dengan komponen-komponen yang sudah jadi, pembangun seret-dan-lepas visual, dan kustomisasi dari atas ke bawah. Integrasi yang sederhana tidak mengorbankan performa. 

Jika Anda membuat aplikasi dengan React, maka Anda mengejar kualitas. Chatbot Anda harus mencerminkan hal tersebut.

Mulai membangun hari ini. Gratis.

Hal-hal yang sering ditanyakan

1. Dapatkah saya menggunakan chatbot ini untuk produksi?

Ya, Anda dapat menggunakan chatbot ke produksi setelah menerbitkannya di Botpress Studio dan menyematkannya di aplikasi React Anda. Setelah disematkan, Anda dapat menggunakan seluruh aplikasi menggunakan platform seperti Vercel atau penyedia hosting yang mendukung tech stack Anda.

2. Dapatkah saya menyesuaikan tampilan dan nuansa UI chatbot?

Ya, Anda dapat sepenuhnya menyesuaikan tampilan UI chatbot menggunakan komponen Botpress Webchat . Komponen ini mendukung props untuk warna, ukuran, penempatan, dan gaya, dan Anda bisa mengganti gaya default dengan CSS kustom agar sesuai dengan desain merek Anda.

3. Apakah saya perlu mendefinisikan persona bot, dan bagaimana pengaruhnya terhadap percakapan?

Ya, mendefinisikan persona bot itu penting karena memandu bagaimana chatbot berkomunikasi, termasuk nada dan frasa. Hal ini memastikan percakapan selaras dengan suara merek Anda dan meningkatkan kepercayaan pengguna.

4. Apa tujuan dari alur chatbot, dan bagaimana cara mendefinisikannya?

Tujuan dari alur chatbot adalah untuk mengontrol logika bagaimana bot merespons pengguna. Di Botpress, Anda mendefinisikan alur secara visual di tab "Alur Kerja" menggunakan node untuk tindakan, pesan, kondisi, dan transisi.

5. Dapatkah saya menggunakan dokumen yang sudah ada (misalnya, FAQ atau katalog produk) untuk melatih bot?

Ya, Anda dapat mengunggah dokumen yang sudah ada seperti FAQ atau manual ke dalam Botpress Knowledge Base. Bot menggunakan retrieval-augmented generation (RAG) untuk menjawab pertanyaan dengan mengambil informasi yang relevan langsung dari dokumen-dokumen tersebut.