devbong

No more AI toy projects that end with a single API call!
Based on my experience designing and deploying a full-stack AI chatbot, I will guide you through the entire process of building an AI chatbot that "works as a real service"—covering streaming, tool calling, memory, multi-modal capabilities, and Human-in-the-Loop.

kaburi

Building a Full-Stack AI ChatBot (React 19, NestJS, LangChain.Graph v1.+)

LangChain

langchain

fullstack

human-in-the-loop

llm-streaming

ai-chatbot

Đừng làm những dự án AI đồ chơi chỉ dừng lại ở việc gọi API một lần rồi thôi!

Dựa trên kinh nghiệm thiết kế và triển khai thực tế một chatbot AI Full-stack với cấu trúc có thể vận hành ổn định, tôi sẽ hướng dẫn bạn toàn bộ quy trình tạo ra một chatbot AI "hoạt động như một dịch vụ thực thụ" — từ Streaming, Tool calling, Memory, Multimodal cho đến Human-in-the-Loop.

Kaburi

입문

초급

중급이상

리액트

React

포스트그레SQL

PostgreSQL

네스트JS

NestJS

랭체인

랭그래프

LangGraph

Xây dựng AI ChatBot Full-stack (React 19, NestJS, LangChain.Graph v1.+)

Giới thiệu

Thiết lập ban đầu cho dự án Frontend

Tạo màn hình giao diện người dùng (UI) cho chatbot

Thiết lập ban đầu dự án Backend (NestJS)

Tích hợp LangChain và phát trực tuyến (streaming) trò chuyện

Refactoring Frontend

LangChain(v1.0) Agent — Gọi Tool và Truyền dữ liệu (Streaming)

Hiển thị quá trình thực thi Tool trên UI

Multimodal — Xử lý hình ảnh và PDF

Ghi nhớ cuộc hội thoại — Bộ nhớ ngắn hạn LangGraph

Human in the Loop — Người dùng quyết định hành động của AI

Phân tách phòng chat — Bộ nhớ độc lập theo Chat ID

Xây dựng cơ sở dữ liệu PostgreSQL

Lưu trữ dữ liệu chat lâu dài — Prisma + PostgreSQL