Xây dựng Chatbot React như một chuyên gia

Được viết bởi

Ben Luks

Nhà ngôn ngữ học tính toán, nhà nghiên cứu AI và thạc sĩ công nghệ giọng nói AI

Mục lục

Bước 1. Tiêu đề của bước đi đến đây như mong đợi

Bản tóm tắt

Xây dựng một chatbot trang web bằng React đòi hỏi phải ghép nối các thành phần lại với nhau LLMs , khung và thành phần UI.
Trước tiên, hãy tạo logic và cơ sở kiến thức cho chatbot của bạn, sau đó triển khai để tích hợp trên các kênh như web và ứng dụng nhắn tin.
Next.js tạo nên nền tảng vững chắc cho ứng dụng React của bạn; tích hợp Botpress webchat thành phần để nhúng bot của bạn một cách liền mạch.

Cách xây dựng Chatbot AI trong React

Cho dù là để đặt lịch hẹn, trả lời câu hỏi thường gặp hay đề xuất sản phẩm, hầu như bất kỳ trang web nào cũng có thể được hưởng lợi từ AI Agent hoặc chatbot.

Và đúng là như vậy. Với việc chatbot đang là kênh truyền thông phát triển nhanh nhất cho các thương hiệu, không còn thời điểm nào thích hợp hơn hiện tại để tham gia vào hoạt động này.

Vậy làm thế nào để bạn kết hợp tất cả các thành phần này lại với nhau? Trên React, bạn phải lo lắng về LLM nhà cung cấp, khung tác nhân AI và bằng cách nào đó đóng gói tất cả thành các thành phần UI mà khách truy cập của bạn có thể tương tác.

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

Xây dựng một chatbot tùy chỉnh
Tạo một trang web với Next.js và React
Tích hợp chatbot của bạn vào React front-end
Tùy chỉnh giao diện người dùng của chatbot

Chỉ cần bỏ ra chút công sức, bạn sẽ có một chatbot chuyên nghiệp, hiệu suất cao được tích hợp liền mạch vào trang web React của mình.

Nhân tiện, bạn có thể bỏ qua phần hướng dẫn và kiểm tra mã .

Xây dựng AI Chatbots

Xây dựng chatbot agentic tùy chỉnh

Bắt đầu ngay

2. Xây dựng một Chatbot

Đến với phần quan trọng đầu tiên của câu đố: chatbot.

Để tạo bot, hãy vào studio và nhấp vào Tạo Bot + .

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

Trong trường hợp của tôi, tôi sẽ xây dựng một chuyên gia pha chế rượu kỹ thuật số: một bot tư vấn cho người dùng về các loại rượu nên mua, dựa trên danh mục rượu bên ngoài.

Xác định luồng

Bất kể nó làm gì, bot của bạn sẽ cần một luồng. Đây là logic quyết định hành vi của bot.

Trong studio, nhấn vào Quy trình làm việc ở bảng bên trái.

Tab quy trình công việc trong Botpress phòng thu

Không cần phải phức tạp. Một nút tự động duy nhất có quyền truy cập vào tài liệu của bạn (tức là bot mặc định) có thể cực kỳ hiệu quả.

Botpress quy trình làm việc với một nút tự động duy nhất

Điều quan trọng là phải cung cấp hướng dẫn cho bot. Bao gồm:

Tính cách mà bạn muốn nó áp dụng, ví dụ như lịch sự, thân thiện hoặc phản ánh giọng điệu của 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ể
Tài liệu nào cần tham khảo khi

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

Đây là thông tin mà bot sẽ sử dụng cho RAG (retrieval-augmented generation) hoặc cung cấp phản hồi cho dữ liệu của bạn. Điều này tương đối đơn giản, nhưng bạn nên tìm hiểu cách tối ưu hóa tệp của mình để có RAG tốt nhất có thể.

Wynona, chuyên gia nếm rượu kỹ thuật số của tôi (-ère?) có quyền truy cập vào danh sách rượu vang. Đây chỉ là một tập hợp con của bộ dữ liệu Đánh giá rượu : danh sách các loại rượu vang cùng với vùng sản xuất và ghi chú nếm thử.

Triển khai

Khi đã hài lòng với bot của mình, hãy nhấn Xuất bản trong studio và bot của bạn sẽ hoạt động.

Điều này giúp nó có thể tích hợp trên tất cả các loại kênh truyền thông, như WhatsApp , Telegram và trong các ứng dụng web, như ứng dụng chúng tôi đang xây dựng.

2. Tạo ứng dụng React

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

Lưu ý rằng tôi sẽ sử dụng Next.js. Tôi nghĩ nó phù hợp và đầy đủ hơn React thông thường, và hướng dẫn này sẽ đề cập đến mọi kiến thức cơ bản mà người dùng React cần.

Chạy `tạo-ứng-dụng-tiếp-theo`

Chạy:

npx tạo-ứng-dụng-tiếp-theo@14

Bạn sẽ thấy tôi đang sử dụng Next.js 14. Lý do là chúng ta cần React 18 để chatbot ứng dụng của chúng ta tương thích. Chạy với @latest sẽ xây dựng với Next.js 15 và React 19. Chạy lệnh trên là cách dễ nhất để đảm bảo bạn chạy đúng phiên bản React và Next tương thích.

Thiết lập cấu hình ứng dụng

Bạn sẽ được nhắc nhở bằng một loạt các câu hỏi. Cá nhân tôi sẽ sử dụng các thiết lập mặc định, đó là những gì tôi sẽ làm cho hướng dẫn này.

Giả sử mọi việc diễn ra suôn sẻ, bạn sẽ thấy nhật ký thành công.

3. Tích hợp Chatbot của bạn vào ứng dụng React của bạn

Đã đến lúc cho búp bê Barbie hôn nhau.

Nhận được Botpress Phản ứng mẫu

Để tích hợp chatbot vào ứng dụng của chúng tôi, chúng tôi sẽ cần:

ID khách hàng của chúng tôi
Được xây dựng sẵn webchat Các thành phần phản ứng.

Botpress có mã mẫu bao gồm cả hai. Để có được nó:

Điều hướng đến studio và nhấp vào Chia sẻ ở góc trên bên phải.
Ở góc dưới bên phải của cửa sổ bật lên, nhấp vào Cấu hình

Nhấp vào tab React ở góc trên bên phải.
Ở đây bạn sẽ tìm thấy Botpress mẫu, bao gồm lệnh cài đặt ID máy khách

Tab "Phản ứng" của Botpress chia sẻ bot modal

Nhân tiện, nếu bạn cần truy cập nhanh vào ID khách hàng của mình:

Đi đến bảng điều khiển Botpress của bạn
Lựa chọn Webchat trong bảng điều khiển bên
Nhấp vào Cài đặt nâng cao

Cách tốt nhất là lưu trữ thông tin này trong một biến môi trường, nhưng hiện tại chúng ta sẽ giữ nó trong thành phần.

Triển khai tác nhân AI?

Đọc Bản thiết kế của chúng tôi để triển khai tác nhân AI

Đọc ngay

Tạo một Chat Thành phần trong ứng dụng của bạn

Trong thư mục dự án của mình, tôi sẽ tạo một tệp chat.tsx.

Cấu trúc tệp ứng dụng tiếp theo trong trình khám phá tệp VSCode

Sau đó điền mã cho máy khách 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>
   );
}

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

"sử dụng máy khách" ở trên cùng, cho các thành phần liên quan đến quản lý trạng thái
Đổi tên chức năng từ Ứng dụng thành Chat
Một số kiểu dáng

Bây giờ hãy điều hướng đến ứng dụng/trang.tsx và nhập nó ngay phía trên chân trang:

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

Bây giờ bạn có thể chạy npm chạy dev trong một thiết bị đầu cuối trong thư mục dự án để chạy nó trên máy chủ cục bộ.

Cung cấp năng lượng cho ứng dụng React bằng Chatbot

Với các khung web nặng, bạn sẽ quá bận rộn với chức năng cốt lõi để lo lắng về các tiện ích bổ sung.

Botpress đi kèm với các thành phần được xây dựng sẵn, trình xây dựng kéo và thả trực quan và khả năng tùy chỉnh từ trên xuống dưới. Tích hợp đơn giản không làm giảm hiệu suất.

Nếu bạn đang xây dựng bằng React, thì bạn đang theo đuổi chất lượng. Chatbot của bạn nên phản ánh điều đó.

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

Xây dựng AI Chatbots

Xây dựng chatbot agentic tùy chỉnh

Bắt đầu ngay

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

1. Tôi có thể triển khai chatbot này vào sản xuất không?

Có, bạn có thể triển khai chatbot vào giai đoạn sản xuất sau khi xuất bản nó trong Botpress Studio và nhúng nó vào ứng dụng React của bạn. Sau khi nhúng, bạn có thể triển khai toàn bộ ứng dụng bằng các nền tảng như Vercel hoặc bất kỳ nhà cung cấp dịch vụ lưu trữ nào hỗ trợ công nghệ của bạn. stack .

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

Có, bạn có thể tùy chỉnh hoàn toàn giao diện người dùng chatbot bằng cách sử dụng Botpress Webchat thành phần. 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, và bạn có thể ghi đè các kiểu mặc định bằng CSS tùy chỉnh để phù hợp với thiết kế thương hiệu của bạn.

3. Tôi có cần xác định nhân vật bot không và điều đó ảnh hưởng đến cuộc trò chuyện như thế nào?

Đúng vậy, việc xác định tính cách của bot rất quan trọng vì nó định hướng cách chatbot giao tiếp, bao gồm cả giọng điệu và cách diễn đạt. Điều này đảm bảo cuộc trò chuyện phù hợp với thương hiệu của bạn và cải thiện niềm tin của người dùng.

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

Mục đích của luồng chatbot là kiểm soát logic về cách bot phản hồi với người dùng. Trong Botpress , bạn xác định luồng trực quan trong tab “Luồng công việc” bằng cách sử dụng các nút cho hành động, thông báo, điều kiện và chuyển đổi.

5. Tôi có thể sử dụng các tài liệu hiện có (ví dụ: Câu hỏi thường gặp 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 hiện có như Câu hỏi thường gặp hoặc hướng dẫn sử dụng vào Botpress Cơ sở tri thức. Bot sử dụng công nghệ tăng cường truy xuất (RAG) để trả lời các câu hỏi bằng cách trích xuất thông tin có liên quan trực tiếp từ các tài liệu đó.

Xây dựng Chatbot React như một chuyên gia — Không cần kinh nghiệm