Tạo Chatbot AI Đỉnh Cao Với OpenAI Và Supabase Trong 5 Phút

Chatbot AI với OpenAI và Supabase: Hướng dẫn xây dựng chi tiết

Mở đầu

Chatbot đang dần trở thành công cụ không thể thiếu trong nhiều lĩnh vực, từ hỗ trợ khách hàng đến trợ lý cá nhân. Khi kết hợp sức mạnh của các mô hình ngôn ngữ lớn từ OpenAI với khả năng lưu trữ và truy vấn dữ liệu của Supabase, bạn có thể tạo ra một chatbot thông minh, có khả năng ghi nhớ cuộc trò chuyện và phản hồi phù hợp ngữ cảnh. Bài viết này sẽ hướng dẫn bạn xây dựng một chatbot như vậy từ đầu đến cuối.

Tổng quan về công nghệ

OpenAI

OpenAI cung cấp các mô hình ngôn ngữ tiên tiến như GPT-4, cho phép chatbot hiểu và tạo ra văn bản giống người. Bạn sẽ sử dụng API của OpenAI để gửi tin nhắn và nhận phản hồi.

Supabase

Supabase là một nền tảng cơ sở dữ liệu mã nguồn mở, cung cấp PostgreSQL và các công cụ phát triển nhanh. Bạn sẽ dùng Supabase để lưu trữ lịch sử hội thoại, quản lý người dùng và xây dựng API.

Công nghệ phía frontend

Bạn có thể chọn React, Vue, hoặc bất kỳ framework JavaScript nào để xây dựng giao diện chat. React là lựa chọn phổ biến nhờ hệ sinh thái phong phú và dễ tích hợp.

Thiết lập môi trường phát triển

Tạo Supabase project

1. Đăng nhập vào Supabase và tạo một project mới. 2. Tạo bảng messages với các cột: id (khóa chính), conversation_id, user_id, content, created_at. 3. Tạo bảng conversations để nhóm các tin nhắn theo cuộc hội thoại. 4. Tạo bảng users để quản lý thông tin người dùng.

Lấy API key OpenAI

Đăng ký tài khoản OpenAI, vào mục API keys và tạo một key mới. Lưu ý bảo mật key này, không nên commit lên repository.

Khởi tạo project frontend

npx create-react-app chatbot-app
cd chatbot-app

Xây dựng backend API

Tạo function để lưu trữ tin nhắn

-- Supabase SQL function
CREATE OR REPLACE FUNCTION insert_message(
  conv_id UUID,
  usr_id UUID,
  msg_content TEXT
)
RETURNS TABLE(id UUID, created_at TIMESTAMP) AS $$
BEGIN
  RETURN QUERY
  INSERT INTO messages (conversation_id, user_id, content)
  VALUES (conv_id, usr_id, msg_content)
  RETURNING id, created_at;
END;
$$ LANGUAGE plpgsql;

Tạo API endpoint

Sử dụng Supabase Edge Functions hoặc một server riêng (Node.js/Express) để: - Nhận tin nhắn từ client. - Lưu tin nhắn vào Supabase. - Gọi OpenAI API với lịch sử cuộc trò chuyện. - Trả lời cho client.

Phát triển frontend

Thiết kế giao diện chat

- Khung chat với tin nhắn xếp từ dưới lên. - Input field để gõ tin nhắn. - Nút gửi tin nhắn.

Quản lý state

Sử dụng useState và useEffect để: - Lưu danh sách tin nhắn. - Tự động cuộn khi có tin nhắn mới. - Gửi request tới backend khi người dùng gửi tin nhắn.

Ví dụ code React

import { useState, useEffect } from 'react';

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');


const sendMessage = async () => {
    if (!input.trim()) return;


const newMessage = {
      user_id: 'user-1',
      content: input,
      created_at: new Date().toISOString()
    };


setMessages([...messages, newMessage]);


const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newMessage)
    });
Quảng cáo
300x250 In-Content Advertisement


const botReply = await response.json();
    setMessages([...messages, newMessage, botReply]);
    setInput('');
  };


return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, idx) => (
          <div key={idx} className={msg.user_id ? 'user' : 'bot'}>
            {msg.content}
          </div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
      />
      <button onClick={sendMessage}>Gửi</button>
    </div>
  );
}

Tích hợp OpenAI và Supabase

Luồng xử lý tin nhắn

1. Người dùng gửi tin nhắn → lưu vào Supabase. 2. Backend lấy toàn bộ lịch sử cuộc trò chuyện từ Supabase. 3. Backend gọi OpenAI API với prompt chứa lịch sử. 4. OpenAI trả lời → backend lưu câu trả lời vào Supabase. 5. Trả lời về frontend và hiển thị cho người dùng.

Prompt engineering

Tạo prompt chất lượng để chatbot hiểu ngữ cảnh:

Bạn là trợ lý AI. Dưới đây là lịch sử cuộc trò chuyện:
[tin nhắn 1]
[tin nhắn 2]
...
Dựa vào ngữ cảnh trên, trả lời câu hỏi/phản hồi của người dùng một cách phù hợp.

Kiểm thử và tối ưu

Kiểm thử chức năng

- Thử nghiệm với nhiều loại câu hỏi. - Kiểm tra khả năng ghi nhớ ngữ cảnh. - Đảm bảo tin nhắn được lưu và hiển thị đúng.

Tối ưu hiệu năng

- Sử dụng caching cho các câu trả lời thường gặp. - Giới hạn số tin nhắn gửi cho OpenAI để tránh vượt quá giới hạn ký tự. - Xử lý lỗi khi API OpenAI không khả dụng.

Bảo mật

- Không lưu API key trên client. - Sử dụng Row Level Security (RLS) của Supabase để bảo vệ dữ liệu người dùng.

Kết luận

Việc kết hợp OpenAI và Supabase giúp bạn xây dựng một chatbot mạnh mẽ, có khả năng ghi nhớ cuộc trò chuyện và phản hồi thông minh. Bằng cách làm theo hướng dẫn này, bạn có thể tạo ra một ứng dụng chat hoàn chỉnh, sẵn sàng mở rộng và tùy chỉnh theo nhu cầu. Hãy bắt đầu thử nghiệm và tận hưởng quá trình học hỏi công nghệ AI!