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.
// 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 MUỐN TRIỂN KHAI CHO CẢ PHÒNG BAN / DOANH NGHIỆP?
Đề Xuất Công Ty Tài Trợ & Đào Tạo In-House Trọn Gói
AI Tinh Gọn hỗ trợ khảo sát hiện trạng, kèm 1-1 on-premise bảo mật dữ liệu, setup hạ tầng riêng và xuất hóa đơn VAT hợp pháp cho doanh nghiệp.
⚖️ 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.