Cách xây dựng chatbot trong React JS như một chuyên gia

Dù là đặt lịch hẹn, trả lời câu hỏi thường gặp hay gợi ý sản phẩm, hầu hết mọi website đều có thể hưởng lợi từ một AI Agent hoặc chatbot.

Và thực tế là như vậy. Khi chatbot đang trở thành kênh giao tiếp phát triển nhanh nhất cho các thương hiệu, đây là thời điểm lý tưởng để bắt đầu.

Vậy làm thế nào để kết nối tất cả các thành phần này? Ngoài React, bạn còn phải quan tâm đến nhà cung cấp LLM, framework AI agent, và đóng gói tất cả thành các thành phần giao diện để người dùng tương tác.

Tin tốt là nền tảng chatbot đã hỗ trợ bạn. Trong hướng dẫn này, tôi sẽ chỉ bạn các bước để:

• Xây dựng chatbot tùy chỉnh
• Tạo website với Next.js và React
• Tích hợp chatbot vào giao diện React
• Tùy chỉnh giao diện chatbot

Chỉ với vài bước đơn giản, bạn sẽ có một chatbot chuyên nghiệp, hiệu suất cao tích hợp liền mạch vào trang React của mình.

Ngoài ra, bạn có thể bỏ qua hướng dẫn và xem trực tiếp mã nguồn.

2. Xây dựng Chatbot

Bây giờ đến phần quan trọng đầu tiên: chatbot.

Để tạo bot, vào studio và nhấn Create Bot +.

Việc xác định mục đích sẽ hữu ích, nhưng bạn không cần ý tưởng quá chi tiết. Doanh nghiệp của bạn gần như chắc chắn đã có tài liệu chính sách, FAQ hoặc danh mục sản phẩm. Một chatbot đơn giản truy cập được các thông tin này có thể giúp bạn tiết kiệm rất nhiều thời gian trả lời các câu hỏi lặp lại.

Trong ví dụ này, tôi sẽ xây dựng một sommelier số: bot tư vấn chọn rượu vang dựa trên danh mục rượu bên ngoài.

Xác định flow

Dù bot làm gì, nó cũng cần một flow. Đây là logic quyết định cách bot hoạt động.

Trong studio, chọn Workflows ở bảng bên trái.

Flow không cần phức tạp. Một autonomous node duy nhất truy cập tài liệu của bạn (ví dụ: bot mặc định) cũng đã rất hiệu quả.

Cần cung cấp hướng dẫn cho bot. Bao gồm:

• Nhân vật bạn muốn bot thể hiện, ví dụ: lịch sự, thân thiện, hoặc phản chiếu phong cách người dùng
• Cách bắt đầu hoặc kết thúc tin nhắn
• Cách trả lời các câu hỏi cụ thể
• Khi nào nên tham khảo tài liệu nào

Thêm cơ sở kiến thức

Đây là nguồn thông tin bot sẽ sử dụng cho RAG (retrieval-augmented generation), tức là trả lời dựa trên dữ liệu của bạn. Việc này khá đơn giản, nhưng bạn nên tìm hiểu cách tối ưu hóa file để đạt hiệu quả RAG tốt nhất.

Wynona, sommelier số của tôi, có quyền truy cập vào danh sách rượu vang. Đó là một phần nhỏ của bộ dữ liệu Wine Reviews: danh sách các loại rượu với vùng sản xuất và ghi chú hương vị.

Triển khai

Khi đã hài lòng với bot, nhấn Publish trong studio để đưa bot lên hoạt động.

Bot sẽ sẵn sàng tích hợp trên nhiều kênh giao tiếp như WhatsApp, Telegram, và các ứng dụng web như chúng ta đang xây dựng.

2. Tạo ứng dụng React

Chúng ta đã có chatbot, nhưng nó cần một nơi để hoạt động, vì vậy hãy xây dựng nhanh một ứng dụng React để người dùng có thể tương tác với bot.

Lưu ý tôi sẽ dùng Next.js. Tôi cho rằng nó phù hợp và đầy đủ hơn React thuần, và hướng dẫn này cũng đáp ứng đủ cho người dùng React.

Chạy create-next-app

Chạy lệnh:

npx create-next-app@14

Bạn sẽ thấy tôi dùng Next.js 14. Lý do là chúng ta cần React 18 để ứng dụng tương thích với chatbot. Nếu dùng @latest sẽ là Next.js 15 và React 19. Lệnh trên là cách đơn giản nhất để đảm bảo bạn dùng đúng phiên bản React và Next tương thích.

Cấu hình ứng dụng

Bạn sẽ được hỏi một số câu hỏi. Tôi thường giữ nguyên mặc định, và sẽ làm như vậy trong hướng dẫn này.

Nếu mọi thứ suôn sẻ, bạn sẽ thấy thông báo thành công.

3. Tích hợp Chatbot vào ứng dụng React

Đã đến lúc tích hợp chatbot vào ứng dụng của chúng ta.

Lấy React Boilerplate của Botpress

Để tích hợp chatbot vào ứng dụng, bạn cần:

• Client ID của bạn
• Các thành phần React webchat dựng sẵn.

Botpress đã có sẵn mã mẫu gồm cả hai. Để lấy:

• Vào studio, nhấn Share ở góc trên bên phải.
• Ở góc dưới bên phải cửa sổ bật lên, nhấn Configure

• Nhấn tab React ở góc trên bên phải.
• Tại đây bạn sẽ thấy mã mẫu của Botpress, gồm lệnh cài đặt và client ID.

Nếu bạn cần lấy nhanh client ID:

• Vào bảng điều khiển Botpress
• Chọn Webchat ở bảng bên
• Nhấn Advanced Settings

Tốt nhất nên lưu thông tin này vào biến môi trường, nhưng hiện tại chúng ta sẽ để trong component.

Tạo thành phần Chat trong ứng dụng

Trong thư mục dự án, tôi sẽ tạo file chat.tsx.

Sau đó thêm mã cho client chatbot vào file này:

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

Đây là mã Botpress với một số điều chỉnh đáng chú ý:

• "use client" ở đầu file, dành cho các component quản lý trạng thái
• Đổi tên hàm từ App thành Chat
• Thêm một chút style

Tiếp theo, vào app/page.tsx và import component này ngay trên phần 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>
 );
}

Giờ bạn có thể chạy npm run dev trong terminal của thư mục dự án để chạy server cục bộ.

Tăng sức mạnh cho ứng dụng React với Chatbot

Với các framework web mạnh mẽ, bạn có thể tập trung vào chức năng chính mà không phải lo về phần bổ sung.

Botpress có sẵn các thành phần dựng sẵn, trình xây dựng kéo thả trực quan và khả năng tùy chỉnh toàn diện. Việc tích hợp đơn giản không làm giảm hiệu suất.

Nếu bạn xây dựng bằng React, chắc chắn bạn hướng tới chất lượng. Chatbot của bạn cũng nên như vậy.

Bắt đầu xây dựng ngay hôm nay. Miễn phí.

Câu hỏi thường gặp

1. Tôi có thể triển khai chatbot này lên môi trường thực tế không?

Có, bạn có thể triển khai chatbot lên môi trường thực tế sau khi xuất bản trên Botpress Studio và nhúng vào ứng dụng React. Sau khi nhúng, bạn có thể triển khai toàn bộ ứng dụng trên các nền tảng như Vercel hoặc bất kỳ nhà cung cấp hosting nào hỗ trợ công nghệ bạn dùng.

2. Tôi có thể tùy chỉnh giao diện chatbot không?

Có, bạn hoàn toàn có thể tùy chỉnh giao diện chatbot bằng thành phần Botpress Webchat. Nó hỗ trợ các thuộc tính về màu sắc, kích thước, vị trí và kiểu dáng, bạn cũng có thể ghi đè CSS mặc định để phù hợp với thiết kế thương hiệu.

3. Tôi có cần xác định persona cho bot không, và điều đó ảnh hưởng thế nào đến hội thoại?

Có, xác định persona cho bot rất quan trọng vì nó định hướng cách chatbot giao tiếp, bao gồm giọng điệu và cách diễn đạt. Điều này giúp cuộc trò chuyện phù hợp với phong cách thương hiệu và tăng sự tin tưởng của người dùng.

4. Mục đích của chatbot flow là gì và tôi định nghĩa nó như thế nào?

Mục đích của chatbot flow là kiểm soát logic về cách bot phản hồi người dùng. Trong Botpress, bạn định nghĩa flow một cách trực quan ở tab “Workflows” bằng các node cho hành động, tin nhắn, điều kiện và chuyển tiếp.

5. Tôi có thể dùng tài liệu sẵn có (ví dụ FAQ hoặc danh mục sản phẩm) để đào tạo bot không?

Có, bạn có thể tải lên các tài liệu như FAQ hoặc hướng dẫn vào Botpress Knowledge Base. Bot sẽ sử dụng retrieval-augmented generation (RAG) để trả lời bằng cách lấy thông tin phù hợp trực tiếp từ các tài liệu đó.