Cara Membangun Chatbot di React JS Seperti Profesional

Baik untuk pemesanan janji temu, FAQ, atau rekomendasi produk, hampir semua website bisa mendapatkan manfaat dari AI Agent atau chatbot.

Dan memang begitu. Dengan chatbot menjadi saluran komunikasi dengan pertumbuhan tercepat bagi brand, sekarang adalah waktu yang tepat untuk ikut serta.

Jadi, bagaimana cara menggabungkan semua komponen ini? Selain React, Anda juga harus memikirkan penyedia LLM, framework AI agent, dan bagaimana mengemas semuanya ke dalam komponen UI yang bisa digunakan pengunjung.

Kabar baiknya, platform chatbot sudah menyediakan semuanya. Dalam panduan ini saya akan memberikan langkah-langkah untuk:

• Membangun chatbot kustom
• Membuat website dengan Next.js dan React
• Mengintegrasikan chatbot ke frontend React Anda
• Menyesuaikan tampilan UI chatbot

Dengan sedikit usaha, Anda akan memiliki chatbot profesional dan berkinerja tinggi yang terintegrasi mulus di situs React Anda.

Ngomong-ngomong, Anda bisa melewati tutorial dan langsung melihat kode sumbernya.

2. Bangun Chatbot

Sekarang ke bagian besar pertama: chatbot.

Untuk membuat bot, buka studio dan klik Create Bot +.

Akan lebih mudah jika Anda menentukan tujuannya, tapi Anda tidak perlu ide yang terlalu matang. Bisnis Anda hampir pasti punya dokumen kebijakan, FAQ, atau katalog produk. Chatbot sederhana yang bisa mengakses informasi ini dapat menghemat banyak waktu Anda dalam menjawab pertanyaan berulang.

Dalam contoh saya, saya akan membuat sommelier digital: bot yang memberi saran pembelian wine kepada pengguna, berdasarkan katalog wine eksternal.

Tentukan flow-nya

Apapun fungsinya, bot Anda membutuhkan flow. Inilah logika yang menentukan perilaku bot.

Di studio, klik Workflows di panel kiri.

Tidak harus rumit. Satu autonomous node yang punya akses ke dokumen Anda (misalnya bot default) bisa sangat efektif.

Penting untuk memberikan instruksi pada bot. Ini meliputi:

• Persona yang ingin Anda gunakan, misalnya sopan, akrab, atau meniru gaya bicara pengguna
• Cara memulai atau mengakhiri pesan
• Bagaimana merespons pertanyaan tertentu
• Dokumen mana yang dirujuk dan kapan

Tambahkan Basis Pengetahuan

Inilah informasi yang akan digunakan bot untuk RAG (retrieval-augmented generation), atau menyesuaikan responsnya dengan data Anda. Proses ini cukup mudah, tapi sebaiknya pelajari cara mengoptimalkan file Anda untuk hasil RAG terbaik.

Wynona, sommelier digital saya, punya akses ke daftar wine. Ini hanya sebagian dari dataset Wine Reviews: daftar wine beserta wilayah dan catatan rasanya.

Deploy

Setelah Anda puas dengan bot Anda, klik Publish di studio dan bot Anda akan aktif.

Ini membuat bot tersedia untuk integrasi ke berbagai saluran komunikasi, seperti WhatsApp, Telegram, dan aplikasi web seperti yang sedang kita bangun.

2. Buat Aplikasi React

Kita sudah punya chatbot, tapi butuh wadah, jadi mari kita buat aplikasi React sederhana agar pengguna bisa berinteraksi dengan bot.

Perlu diketahui, saya akan menggunakan Next.js. Menurut saya ini lebih relevan dan lengkap dibanding React biasa, dan tutorial ini akan mencakup semua yang dibutuhkan pengguna React.

Jalankan create-next-app

Jalankan:

npx create-next-app@14

Anda akan melihat saya menggunakan Next.js 14. Alasannya adalah kita butuh React 18 agar aplikasi kita kompatibel dengan chatbot. Jika menjalankan @latest, Anda akan mendapat Next.js 15 dan React 19. Perintah di atas adalah cara termudah untuk memastikan Anda menggunakan versi React yang benar dan Next.js yang kompatibel.

Atur konfigurasi aplikasi

Anda akan mendapat beberapa pertanyaan. Saya pribadi memilih pengaturan default, dan itulah yang akan saya gunakan di tutorial ini.

Jika semua berjalan lancar, Anda akan melihat log sukses.

3. Integrasikan Chatbot ke Aplikasi React Anda

Saatnya menggabungkan semuanya.

Dapatkan React Boilerplate dari Botpress

Untuk mengintegrasikan chatbot ke aplikasi kita, kita butuh:

• Client ID kita
• Komponen React webchat yang sudah jadi.

Botpress menyediakan kode boilerplate yang mencakup keduanya. Untuk mendapatkannya:

• Buka studio, lalu klik Share di pojok kanan atas.
• Di pojok kanan bawah pop-up, klik Configure

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

Ngomong-ngomong, jika Anda butuh akses cepat ke client ID Anda:

• Buka dashboard Botpress Anda
• Pilih Webchat di panel samping
• Klik Advanced Settings

Sebaiknya simpan ini di environment variable, tapi untuk sekarang kita simpan di komponen saja.

Buat Komponen Chat di Aplikasi Anda

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

Kemudian isi dengan kode untuk client 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:

• "use client" di bagian atas, untuk komponen yang mengelola state
• Mengganti nama fungsi dari App menjadi Chat
• Beberapa penyesuaian gaya

Sekarang buka app/page.tsx dan import 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 bisa menjalankan npm run dev di terminal pada direktori proyek untuk menjalankan server lokal.

Menghidupkan Aplikasi React dengan Chatbot

Dengan framework web yang kuat, Anda bisa fokus pada fungsi utama tanpa khawatir soal add-on.

Botpress menyediakan komponen siap pakai, builder visual drag-and-drop, dan kustomisasi penuh. Integrasi yang mudah tidak mengorbankan performa.

Jika Anda membangun dengan React, berarti Anda mengutamakan kualitas. Chatbot Anda juga harus mencerminkan hal itu.

Mulai bangun hari ini. Gratis.

FAQ

1. Apakah saya bisa menerapkan chatbot ini ke lingkungan produksi?

Ya, Anda bisa menerapkan chatbot ke lingkungan produksi setelah mempublikasikannya di Botpress Studio dan menanamkannya di aplikasi React Anda. Setelah terpasang, Anda bisa menerapkan seluruh aplikasi menggunakan platform seperti Vercel atau penyedia hosting lain yang mendukung stack teknologi Anda.

2. Apakah saya bisa menyesuaikan tampilan UI chatbot?

Ya, Anda bisa sepenuhnya menyesuaikan tampilan UI chatbot menggunakan komponen Webchat Botpress. Komponen ini mendukung props untuk warna, ukuran, posisi, dan gaya, serta Anda bisa menimpa gaya default dengan CSS kustom agar sesuai dengan desain brand Anda.

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

Ya, mendefinisikan persona bot itu penting karena akan memandu cara chatbot berkomunikasi, termasuk nada dan gaya bahasa. Ini memastikan percakapan sesuai dengan suara brand Anda dan meningkatkan kepercayaan pengguna.

4. Apa tujuan flow chatbot, dan bagaimana cara mendefinisikannya?

Tujuan flow chatbot adalah mengatur logika bagaimana bot merespons pengguna. Di Botpress, Anda mendefinisikan flow secara visual di tab “Workflows” dengan node untuk aksi, pesan, kondisi, dan transisi.

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

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