Tạo Chatbot AI Nhanh Chóng Với Supabase Và OpenAI

Giới thiệu

Bạn có bao giờ nghĩ đến việc tự tay tạo ra một chatbot thông minh, có khả năng ghi nhớ ngữ cảnh và trả lời theo yêu cầu của người dùng? Với sự kết hợp giữa Supabase và OpenAI, điều này hoàn toàn khả thi trong vòng 30 phút. Bài viết này sẽ hướng dẫn bạn từng bước để xây dựng một chatbot AI hoàn chỉnh, từ việc thiết lập cơ sở dữ liệu cho đến tích hợp API OpenAI và xây dựng giao diện người dùng.

Bước 1: Thiết lập cơ sở dữ liệu với Supabase

Supabase là một nền tảng mã nguồn mở cung cấp cơ sở dữ liệu PostgreSQL đầy đủ tính năng, kèm theo xác thực người dùng và lưu trữ file. Để bắt đầu, bạn cần tạo một dự án mới trên Supabase. Sau khi đăng nhập, hãy chọn "New Project" và đặt tên cho dự án của bạn. Supabase sẽ tự động tạo một cơ sở dữ liệu PostgreSQL cho bạn.

Tiếp theo, bạn cần tạo các bảng cần thiết cho chatbot. Sử dụng SQL Editor trong Supabase, hãy tạo một bảng để lưu trữ các cuộc hội thoại. Ví dụ:

CREATE TABLE conversations (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  message TEXT NOT NULL,
  response TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Bảng này sẽ lưu trữ ID của người dùng, nội dung tin nhắn, phản hồi từ chatbot và thời gian tạo. Đừng quên kích hoạt Row Level Security (RLS) để bảo mật dữ liệu.

Bước 2: Tích hợp API OpenAI

Để chatbot có thể trả lời thông minh, bạn cần tích hợp API của OpenAI. Đầu tiên, hãy đăng ký một tài khoản trên OpenAI và lấy API key. Sau đó, trong dự án Supabase của bạn, hãy vào phần "Project Settings" và thêm API key này vào phần "API" dưới dạng biến môi trường.

Tiếp theo, bạn cần tạo một hàm trong Supabase để gọi API OpenAI. Sử dụng SQL Editor, hãy tạo một hàm như sau:

CREATE OR REPLACE FUNCTION get_chatbot_response(message TEXT)
RETURNS TEXT AS $$
DECLARE
  response TEXT;
BEGIN
  -- Gọi API OpenAI để lấy phản hồi
  SELECT * FROM http(
    'POST',
    'https://api.openai.com/v1/chat/completions',
    '{ "model": "gpt-3.5-turbo", "messages": [ { "role": "user", "content": "' || message || '" } ] }',
    'application/json',
    'Bearer ' || current_setting('services.openai.api_key')
  ) INTO response;

RETURN response;
END;
$$ LANGUAGE plpgsql;

Hàm này sẽ nhận vào một tin nhắn và trả về phản hồi từ OpenAI. Lưu ý rằng bạn cần thay thế services.openai.api_key bằng tên biến môi trường bạn đã thiết lập.

Bước 3: Xây dựng giao diện người dùng

Với cơ sở dữ liệu và API đã sẵn sàng, bước tiếp theo là xây dựng giao diện cho chatbot. Bạn có thể sử dụng bất kỳ framework frontend nào như React, Vue.js, hoặc thậm chí là HTML/CSS thuần túy. Trong ví dụ này, chúng ta sẽ sử dụng React.

Đầu tiên, hãy tạo một component để hiển thị cuộc hội thoại và nhập tin nhắn từ người dùng. Sử dụng Supabase JavaScript client để tương tác với cơ sở dữ liệu:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('your-supabase-url', 'your-supabase-anon-key');


function Chatbot() {
  const [conversations, setConversations] = useState([]);
  const [message, setMessage] = useState('');
Quảng cáo
300x250 In-Content Advertisement


useEffect(() => {
    fetchConversations();
  }, []);


const fetchConversations = async () => {
    const { data } = await supabase
      .from('conversations')
      .select('*')
      .order('created_at', { ascending: false });
    setConversations(data);
  };


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


// Lưu tin nhắn vào cơ sở dữ liệu
    await supabase.from('conversations').insert({
      user_id: 'your-user-id',
      message: message
    });


// Lấy phản hồi từ chatbot
    const response = await supabase.rpc('get_chatbot_response', { message });
    await supabase.from('conversations').insert({
      user_id: 'your-user-id',
      message: message,
      response: response
    });


setMessage('');
    fetchConversations();
  };


return (
    <div>
      <div>
        {conversations.map((conv) => (
          <div key={conv.id}>
            <p>{conv.message}</p>
            <p>{conv.response}</p>
          </div>
        ))}
      </div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Component này sẽ hiển thị các cuộc hội thoại đã lưu và cho phép người dùng gửi tin nhắn mới. Khi người dùng gửi tin nhắn, tin nhắn sẽ được lưu vào cơ sở dữ liệu và gửi đến API OpenAI để lấy phản hồi.

Kết luận

Với sự kết hợp giữa Supabase và OpenAI, bạn đã có thể tạo ra một chatbot AI hoàn chỉnh trong vòng 30 phút. Supabase cung cấp cơ sở dữ liệu mạnh mẽ và dễ sử dụng, trong khi OpenAI mang đến khả năng xử lý ngôn ngữ tự nhiên tiên tiến. Bằng cách làm theo các bước trong bài viết này, bạn có thể tùy chỉnh và mở rộng chatbot theo nhu cầu của mình. Hãy thử nghiệm và khám phá tiềm năng của AI trong các ứng dụng của bạn!