- Membangun sebuah chatbot situs web dengan React membutuhkan penyatuan LLMs, framework, dan komponen UI.
- Buat logika dan basis pengetahuan chatbot Anda terlebih dahulu, lalu terapkan untuk integrasi di berbagai saluran seperti web dan aplikasi perpesanan.
- Next.js menjadi fondasi yang kuat untuk aplikasi React Anda; integrasikan komponenwebchat Botpress untuk menyematkan bot Anda dengan mulus.
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.