Giới thiệu
Trong những bài trước của chuỗi Xây dựng RAG AI, chúng ta đã lần lượt tìm hiểu về cách tạo ứng dụng backend, kết nối với OpenAI, cũng như tích hợp Vector Database (Qdrant) để trang bị “trí nhớ” cho hệ thống.
Trong bài viết này, chúng ta sẽ đi đến một bước quan trọng tiếp theo: xây dựng giao diện ứng dụng RAG Chat Assistant bằng ReactJS. Đây là phần frontend, cho phép người dùng trực tiếp trải nghiệm việc đặt câu hỏi, nhận câu trả lời có dẫn nguồn, cũng như kiểm tra độ chính xác thông qua score.
Ứng dụng RAG Chat Assistant hoạt động như thế nào?
Khi mở ứng dụng, người dùng sẽ thấy một danh sách simple questions (các câu hỏi thường gặp) được chuẩn bị sẵn. Chỉ cần click chọn một câu hỏi, hệ thống sẽ hiển thị icon “searching” rồi trả về kết quả dựa trên dữ liệu đã nạp vào VectorDB.
Ví dụ:
-
Câu hỏi: “How long I have return item?”
-
Trả lời: “Bạn có 30 ngày kể từ khi nhận gói hàng (nguyên vẹn, chưa sử dụng) để trả lại. Tiền sẽ hoàn trong vòng 5 ngày làm việc.”
Điểm nổi bật:
-
Nếu dữ liệu có trong tài liệu → hệ thống trả lời chính xác kèm score và nguồn file.
-
Nếu dữ liệu không có → hệ thống trả lời “I don’t know”, không cần đưa vào LLM nữa → tiết kiệm chi phí API.
Kết nối frontend ReactJS với backend
Để ReactJS app có thể giao tiếp với backend, chúng ta cần cấu hình một số bước quan trọng:
-
Thêm CORS Policy trong backend
-
Tạo policy “allowance” cho phép frontend chạy ở cổng 5173.
-
Kích hoạt middleware ngay sau
Buildđể đảm bảo React app có thể gọi API.
-
-
Cấu hình trong React
-
Trong file
package.json, thêm tham số:-
--port=5173→ chạy đúng cổng. -
--host→ cho phép truy cập từ các máy khác cùng LAN.
-
-
Như vậy, frontend React và backend ASP.NET Core sẽ giao tiếp mượt mà mà không bị chặn CORS.
Cấu trúc thư mục của ứng dụng
Ứng dụng RAG Chat Assistant được chia thành 2 phần chính: backend và frontend.
-
Backend (webapp backend): xử lý logic RAG, kết nối Qdrant, gọi API OpenAI.
-
Frontend (fan app bằng ReactJS): giao diện chat trực tiếp với người dùng.
Trong phần frontend, cấu trúc cụ thể gồm:
-
Components → chứa UI (khung chat, input, danh sách câu hỏi).
-
Data → file simple questions (category, question, description).
-
Services:
-
apiConfig→ cấu hình chung, URL backend. -
chatService→ gọi API chat. -
heService→ kiểm tra API key OpenAI.
-
-
Types → định nghĩa các class & kiểu dữ liệu.
Điểm linh hoạt: ngoài phần chat, bạn có thể tự mở rộng thêm các module như quản lý tài liệu, nạp dữ liệu vào Qdrant hoặc tích hợp tính năng đăng nhập.
Demo ứng dụng thực tế
Trong bản demo:
-
Người dùng chọn câu hỏi có sẵn hoặc tự nhập câu hỏi mới.
-
Kết quả hiển thị kèm score (mức độ phù hợp) và nguồn file.
-
Có thể clear chat để bắt đầu lại từ đầu.
Ví dụ:
-
Hỏi đúng câu có dữ liệu → trả lời chi tiết, kèm file trích dẫn.
-
Hỏi sai câu, không có dữ liệu → hệ thống phản hồi “I don’t know” → logic thông minh, tiết kiệm tài nguyên.
Lợi ích khi dùng ReactJS cho RAG Chat Assistant
-
Tốc độ nhanh: ReactJS tối ưu cho ứng dụng real-time như chat.
-
Dễ mở rộng: Có thể bổ sung thêm UI quản lý dữ liệu, upload file, theo dõi lịch sử hội thoại.
-
Tích hợp đơn giản: Dùng chung API backend, chỉ cần cấu hình một lần.
Kết luận
Với việc bổ sung frontend bằng ReactJS, ứng dụng RAG Chat Assistant của chúng ta đã hoàn thiện cả backend + giao diện người dùng.
-
Backend đảm nhiệm: xử lý RAG, kết nối Qdrant, gọi OpenAI.
-
Frontend đảm nhiệm: hiển thị UI, cho phép người dùng tương tác, xem score và nguồn tài liệu.
👉 Bạn có thể clone code từ link trong phần mô tả video, chạy thử với cổng 5173, và tùy biến thêm theo nhu cầu của mình.
Đây mới chỉ là bước khởi đầu – ở những bài tiếp theo, chúng ta sẽ cùng nhau mở rộng ứng dụng với nhiều tính năng quản trị tài liệu và tích hợp nâng cao hơn.
Tác giả: Bạch Ngọc Toàn
Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.
