Xây Dựng Chatbot AI với Gemini và ReactJS
Bạn đã bao giờ muốn tạo ra một chatbot thông minh có thể trò chuyện với người dùng như một người bạn chưa? Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một chatbot AI đơn giản nhưng mạnh mẽ bằng cách sử dụng Gemini AI và ReactJS. Đây là một dự án thú vị để học cách tích hợp AI vào ứng dụng web, và bạn không cần phải là chuyên gia để bắt đầu!
Tại Sao Chọn Gemini AI và ReactJS?
- Gemini AI: Một mô hình AI tiên tiến, có khả năng hiểu và trả lời các câu hỏi một cách tự nhiên, giống như con người.
- ReactJS: Thư viện JavaScript phổ biến giúp bạn xây dựng giao diện động và dễ tương tác.
Mục tiêu của chúng ta là tạo ra một chatbot mà người dùng có thể nhập câu hỏi và nhận được câu trả lời thông minh từ Gemini AI, tất cả đều trong một giao diện thân thiện.
Bắt Đầu: Chuẩn Bị Môi Trường
Trước tiên, bạn cần thiết lập môi trường phát triển. Đừng lo, các bước này rất đơn giản!
- Cài đặt Node.js: Tải và cài đặt từ nodejs.org. Điều này sẽ cung cấp cho bạn cả Node.js và npm (trình quản lý gói).
- Tạo dự án ReactJS: Mở terminal và chạy:
npx create-react-app gemini-chatbot cd gemini-chatbot
- Cài đặt Axios: Đây là thư viện giúp chúng ta gửi yêu cầu đến API của Gemini AI.
npm install axios
- Lấy API Key từ Gemini AI: Đăng ký tại trang web của Gemini AI để nhận API key. Đây là “chìa khóa” để kết nối với AI.
Xây Dựng Chatbot: Code và Giao Diện
Chúng ta sẽ tạo một chatbot với giao diện gồm khu vực hiển thị tin nhắn và ô nhập liệu để gửi câu hỏi. Dưới đây là code hoàn chỉnh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot AI với Gemini và ReactJS</title>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root" class="flex flex-col items-center justify-center min-h-screen bg-gray-100"></div>
<script type="text/babel">
const Chatbot = () => {
const [messages, setMessages] = React.useState([]);
const [input, setInput] = React.useState('');
const sendMessage = async () => {
if (input.trim() === '') return;
const userMessage = { sender: 'user', text: input };
setMessages([...messages, userMessage]);
try {
const response = await axios.post('https://api.gemini.ai/v1/chat', {
message: input,
apiKey: 'YOUR_API_KEY_HERE' // Thay bằng API key thực tế của bạn
});
const botMessage = { sender: 'bot', text: response.data.reply };
setMessages([...messages, userMessage, botMessage]);
} catch (error) {
console.error('Error:', error);
const errorMessage = { sender: 'bot', text: 'Xin lỗi, có lỗi xảy ra!' };
setMessages([...messages, userMessage, errorMessage]);
}
setInput('');
};
const handleKeyPress = (e) => {
if (e.key === 'Enter') sendMessage();
};
return (
<div className="w-full max-w-md bg-white rounded-lg shadow-lg p-4">
<h1 className="text-2xl font-bold text-center mb-4">Chatbot AI</h1>
<div className="h-80 overflow-y-auto p-2 bg-gray-50 rounded">
{messages.map((msg, index) => (
<div
key={index}
className={`mb-2 p-2 rounded-lg ${
msg.sender === 'user'
? 'bg-blue-500 text-white self-end'
: 'bg-gray-200 text-black self-start'
}`}
>
{msg.text}
</div>
))}
</div>
<div className="flex mt-4">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="Nhập câu hỏi của bạn..."
className="flex-1 p-2 border rounded-l-lg focus:outline-none"
/>
<button
onClick={sendMessage}
className="p-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600"
>
Gửi
</button>
</div>
</div>
);
};
const App = () => (
<div className="p-4">
<Chatbot />
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>Giải Thích Code
- React.useState: Quản lý danh sách tin nhắn và nội dung ô nhập liệu.
- sendMessage: Gửi câu hỏi của người dùng đến API Gemini AI và hiển thị câu trả lời.
- Tailwind CSS: Được sử dụng để tạo giao diện đẹp mắt mà không cần viết CSS thủ công.
- Axios: Gửi yêu cầu HTTP đến API của Gemini AI.
Lưu ý: Thay ‘YOUR_API_KEY_HERE’ bằng API key thực tế của bạn.
Chạy Chatbot
- Lưu code trên vào file index.html.
- Mở file trong trình duyệt (có kết nối internet để tải các thư viện).
- Nhập câu hỏi như “Hôm nay là thứ mấy?” và nhấn “Gửi” hoặc Enter để xem chatbot trả lời.
Mở Rộng Chatbot
Bạn có thể nâng cấp chatbot bằng cách:
- Thêm nút xóa lịch sử trò chuyện.
- Tùy chỉnh giao diện với màu sắc hoặc avatar cho bot.
- Tích hợp thêm các API AI khác để xử lý các loại câu hỏi phức tạp hơn.
Kết Luận
Chỉ với vài bước đơn giản, bạn đã tạo ra một chatbot AI bằng Gemini và ReactJS! Đây là một cách tuyệt vời để học về lập trình web và AI. Hãy thử nghiệm, sáng tạo và chia sẻ thành quả của bạn với bạn bè nhé!
Vui lòng đăng ký thành viên để bình chọn cho bài viết.
Bài hướng dẫn rất chi tiết! Mình mới học ReactJS, đọc xong là muốn thử tích hợp Gemini AI ngay. Cảm ơn tác giả đã chia sẻ cả code mẫu lẫn giải thích từng bước.
Mình chưa từng dùng Gemini AI, không biết API có giới hạn số lần gọi miễn phí không nhỉ? Ai thử rồi cho mình xin kinh nghiệm với!
@Trần Thị Mai Mình từng đăng ký Gemini AI, bản free cho phép test cơ bản, còn muốn dùng nhiều thì phải mua gói trả phí.
I tried customizing the UI with avatars and it really improved the user experience. Highly recommend adding that feature!
@Fatima Al-Farsi Cảm ơn bạn gợi ý, mình sẽ thử thêm avatar và tùy chỉnh màu sắc cho chatbot.
@Trần Thị Mai You can start with the free tier, but for production or heavy use, you’ll need a paid plan. Check their docs for details.
@Fatima Al-Farsi Mình cũng muốn thêm avatar cho bot, bạn có tài liệu hướng dẫn không chia sẻ với mình với nhé!
@Nguyễn Thị Tuyết Lan Mình từng xem video hướng dẫn trên YouTube, bạn thử tìm với từ khóa “ReactJS chatbot avatar” sẽ ra nhiều kết quả lắm.
@Trần Thị Mai Nếu bạn chỉ thử nghiệm thì bản miễn phí là đủ, mình từng làm demo cho lớp học cũng không gặp giới hạn gì lớn.
The error handling in the code is a nice touch. Helps users know when something goes wrong.
This is awesome! The combination of ReactJS and Gemini AI makes chatbot building much more accessible. Thanks for the clear instructions.
Mình thích phần hướng dẫn tích hợp Tailwind CSS, giao diện chatbot nhìn rất hiện đại và dễ dùng.
@Nguyễn Thị Mai Mình cũng thích Tailwind CSS, vừa dễ học vừa làm giao diện đẹp nhanh.
@Anna Nguyen I agree, the code is easy to follow and works well for beginners.
@Lucas Evans I added a dark mode toggle to my chatbot project, it’s a great UX improvement.
@Anna Nguyen Mình cũng mới học ReactJS, nhờ bài này mà hiểu rõ hơn về cách quản lý state và gọi API.
@Nguyễn Văn Tài Mình thấy quản lý state trong ReactJS rất tiện, nhất là khi kết hợp với API như Gemini AI.