Với sự tiến bộ không ngừng của công nghệ, chatbot AI đã dần trở thành xu thế nổi bật không chỉ trong năm 2024 mà còn nhiều năm tiếp theo. Bài viết này sẽ hướng dẫn bạn cách tích hợp chatbot vào website React một cách đơn giản và hiệu quả. Hãy cùng bắt đầu nhé.
Bước 1: Tạo một dự án mới
Trước khi bắt tay vào xây dựng chatbot, hãy đảm bảo bạn đã quen thuộc với React, Node.js/npm và các lệnh Linux cơ bản. Nếu bạn là người mới, có thể tham khảo các tài liệu hướng dẫn trực tuyến có đầy ở trên mạng nhé.
Để bắt đầu, hãy tạo một dự án React mới tinh bằng cách mở terminal và chạy lệnh sau:
npm create vite@latest
Bạn sẽ được yêu cầu nhập tên dự án, framework và biến thể. Hãy chọn như sau:
- Tên dự án: MyChatBot
- Framework: React
- Biến thể: JavaScript
Sau khi thiết lập xong, hãy chuyển đến thư mục dự án và chạy lệnh:
npm install && npm run dev
Truy cập http://localhost:5173 trên trình duyệt, bạn sẽ thấy màn hình chào mừng của ứng dụng React.
Bước 2: Cài đặt React ChatBotify
React ChatBotify là một thư viện React tùy biến cao giúp đơn giản hóa việc tích hợp chatbot vào ứng dụng. Để cài đặt, hãy chạy lệnh sau:
npm install react-chatbotify
Sau khi cài đặt xong, hãy mở file App.jsx trong thư mục src và thêm dòng sau vào đầu file:
import ChatBot from 'react-chatbotify'
Tiếp theo, thêm dòng sau bên trên thẻ
<ChatBot/>
Lưu file và chạy lại ứng dụng. Bạn sẽ thấy chatbot xuất hiện ở góc dưới cùng bên phải màn hình.
Bước 3: Thử tạo tin nhắn "Hello World"
Để thay thế tin nhắn chào mừng mặc định, bạn có thể tạo tin nhắn riêng bằng cách sử dụng thuộc tính flow trong component <ChatBot/>. Thuộc tính này xác định nội dung cuộc trò chuyện, điểm bắt đầu luôn là khối start như ví dụ dưới đây:
const flow = { "start": { "message": "Hello world!" }
};
Hãy thêm đoạn mã trên vào component <ChatBot/>:
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import ChatBot from "react-chatbotify";
import './App.css'; function App() { const [count, setCount] = useState(0); const flow = { "start": { "message": "Hello world!" } }; return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.jsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> <ChatBot flow={flow} /> </> );
} export default App;
Bây giờ, khi chạy lại ứng dụng, bạn sẽ thấy tin nhắn chào mừng đã được thay thế bằng "Hello world!".
Kết luận
Bài viết đã hướng dẫn bạn cách thiết lập chatbot React đơn giản. Mặc dù ví dụ trên khá đơn giản, thư viện React ChatBotify còn cung cấp nhiều thuộc tính khác trong flow giúp bạn xây dựng cuộc trò chuyện phức tạp hơn.
Bạn có thể tìm hiểu thêm về các thuộc tính này và xem các ví dụ trực tiếp trên trang web của thư viện. Cảm ơn các bạn đã theo dõi bài viết.