Lộ trình cá nhânBuild Website Động cùng AI & Supabase: Full-Stack Web App, Auth, Database & Thanh toán Tự động
7/8

Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0735phút ước tínhThực chiến · Builder

7. Tích Hợp Tính Năng AI Thông Minh Vào Web App: Chatbot Streaming & Gợi Ý Tự Động

Đưa sức mạnh AI vào sản phẩm: Tích hợp API Claude/OpenAI với phản hồi thời gian thực (Streaming Text) và gợi ý thông minh.

🤖 Kiến Trúc Tích Hợp AI An Toàn

  • Không bao giờ lộ API Key ở Frontend: Mọi lệnh gọi API Claude/OpenAI phải đi qua Supabase Edge Function hoặc Backend Server trung gian.
  • Streaming Response: Hiển thị từng từ khi AI đang suy nghĩ, giúp người dùng không phải chờ đợi lâu.
example.py
// GỌI AI EDGE FUNCTION VỚI HIỆU ỨNG STREAMING
async function askAiStreaming(prompt: string, onChunk: (text: string) => void) {
  const response = await fetch('/api/ai-chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });

  const reader = response.body?.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader!.read();
    if (done) break;
    const chunk = decoder.decode(value);
    onChunk(chunk); // Cập nhật text lên giao diện liên tục
  }
}
Thực hành

Thực hành và tự đánh giá

Tích hợp một nút bấm 'Tóm tắt nội dung bằng AI' trên giao diện quản lý bài viết của bạn.

⚖️ Bản quyền sở hữu trí tuệ: © 2026 AI Tinh Gọn (aitinhgon.vn) · Giấy phép Creative Commons CC BY-NC-ND 4.0. Cho phép tự học cá nhân, nghiêm cấm thương mại hóa hoặc bán lại. Giáo trình mở →

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.