inflearn logo
inflearn logo

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

Đừ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.

4 học viên đang tham gia khóa học này

Độ khó Cơ bản

Thời gian Không giới hạn

React
React
PostgreSQL
PostgreSQL
NestJS
NestJS
LangChain
LangChain
LangGraph
LangGraph
React
React
PostgreSQL
PostgreSQL
NestJS
NestJS
LangChain
LangChain
LangGraph
LangGraph

Bạn sẽ nhận được điều này sau khi học.

  • Bạn có thể tự mình tạo ra một chatbot AI phát trực tuyến (streaming) thời gian thực tương tự như ChatGPT từ đầu đến cuối.

  • Bạn sẽ có khả năng áp dụng Agent, gọi Tool, xử lý song song và quản lý bộ nhớ của LangChain/LangGraph vào các dự án thực tế.

  • Bằng cách triển khai mô hình Human in the Loop, bạn có thể thiết kế một hệ thống tác nhân (agent) an toàn, nơi người dùng có thể phê duyệt, từ chối hoặc chỉnh sửa việc sử dụng Công cụ (Tool) của AI.

  • Bạn có thể triển khai chatbot AI đa phương thức (Multimodal AI) có khả năng xử lý hình ảnh và tệp PDF.

  • Bạn có thể xây dựng hệ thống backend để lưu trữ và truy vấn lịch sử trò chuyện một cách vĩnh viễn bằng NestJS + Prisma + PostgreSQL.

  • Trong React, bạn có thể phân tích cú pháp luồng dữ liệu HTTP (HTTP stream) để triển khai trải nghiệm người dùng (UX) đẳng cấp như ChatGPT, bao gồm các tính năng như hiển thị thời gian thực theo từng token, tự động cuộn và hiển thị Markdown.

  • Học cách sử dụng thực tế các công cụ trong hệ sinh thái React hiện đại như Zustand, TanStack Query, Shadcn UI.

Màn hình chính

MultiModal

Human in the loop

Sử dụng công cụ

Phát trực tuyến thời gian thực
Tự tay tạo chatbot AI

Triển khai dịch vụ vượt xa cả việc gọi API!


Vượt ra ngoài việc gọi API đơn thuần, hãy tự mình trải nghiệm từ khâu thiết kế đến triển khai chatbot AI.
Bạn có thể nâng cao năng lực phát triển chatbot ở cấp độ dịch vụ thực tế và phát triển thành một chuyên gia công nghệ AI thế hệ mới.


Xây dựng Chatbot AI Full-stack
Trải nghiệm thực tế việc xây dựng chatbot AI ở cấp độ dịch vụ.

Sử dụng các công nghệ mới nhất như React 19, NestJS, LangChain, LangGraph
để triển khai các tính năng truyền phát thời gian thực (streaming), gọi Tool, đa phương thức (multimodal) và Human in the Loop.

Không chỉ dừng lại ở việc gọi API đơn thuần, bạn sẽ trực tiếp thiết kế và triển khai tất cả các tính năng cần thiết trong một dịch vụ thực tế như quản lý lịch sử trò chuyện, xử lý tệp, phê duyệt của người dùng, v.v.

Chúng tôi sẽ cùng bạn xây dựng một chatbot full-stack dựa trên React, NestJS, PostgreSQL từ đầu đến cuối và cung cấp toàn bộ mã nguồn. from start to finish together, and all source code will be provided.

Hoàn thiện trải nghiệm phát triển
chatbot AI thực tế

Phần 1 - Giới thiệu khóa học và thiết lập môi trường phát triển

Giới thiệu mục tiêu của khóa học này, bao gồm thiết lập môi trường ban đầu cho dự án frontend dựa trên React 19 và cấu hình môi trường gỡ lỗi (debugging) trong VS Code.

Phần 2 - Thiết kế và triển khai giao diện người dùng (UI) chatbot

Sử dụng Shadcn UI để thiết kế bố cục cơ bản của chatbot, khu vực trò chuyện, cửa sổ nhập liệu, v.v., đồng thời xử lý sự kiện gửi tin nhắn và trạng thái tải (loading).

Phần 3 - Thiết lập dự án Backend (NestJS)

Thiết lập ban đầu cho dự án NestJS và cấu hình các thiết lập cho biến môi trường, logging, kiểm tra DTO và tạo tài liệu Swagger. Bao gồm cả việc tạo tài nguyên Chat API.

Phần 4 - Tích hợp LangChain và truyền phát trực tuyến (streaming) thời gian thực

Cài đặt LangChain và kết nối với OpenAI API để thực hiện cuộc gọi LLM đầu tiên. Học cách triển khai gọi API bằng TanStack Query và truyền phát phản hồi thời gian thực thông qua Stream HTTP từ backend.

Phần 5 - Quản lý trạng thái Frontend và Refactoring

Triển khai quản lý trạng thái toàn cục bằng cách áp dụng thư viện Zustand, đồng thời tái cấu trúc logic trò chuyện một cách hiệu quả thông qua việc tách biệt các hook tùy chỉnh và thành phần.

Phần 6 - Sử dụng LangChain Agent và Tool

Cung cấp khả năng sử dụng Tool cho AI Agent, đồng thời triển khai xử lý song song Tool, Middleware Logging tùy chỉnh và giao tiếp HTTP-Stream sử dụng streamMode.

Phần 7 - Trực quan hóa quá trình thực thi Tool và cải thiện UX

Hiển thị trực quan luồng thực thi Tool trên màn hình chatbot, đồng thời cải thiện trải nghiệm người dùng bằng cách triển khai giao diện Accordion UI, render Markdown thời gian thực và tính năng tự động cuộn.

Phần 8 - Chatbot AI đa phương thức (Xử lý Hình ảnh/PDF)

Phát triển API tải lên tệp, đồng thời triển khai tính năng đa phương thức (multimodal) để xử lý tệp hình ảnh và PDF trên cả backend và frontend.

Phần 9 - Sử dụng Bộ nhớ ngắn hạn và LangGraph

Sử dụng MemorySaver và summarizationMiddleware của LangGraph để ghi nhớ lịch sử hội thoại, đồng thời theo dõi luồng thực thi bằng LangSmith.

Phần 10 - Triển khai Human in the Loop

Triển khai mô hình Human in the Loop cho phép người dùng phê duyệt/từ chối/chỉnh sửa việc sử dụng Tool của AI, đồng thời phát triển tính năng tạm dừng và tiếp tục luồng stream.

Section 11 - Tách biệt phòng chat và áp dụng bộ nhớ độc lập

Áp dụng bộ nhớ ngắn hạn độc lập cho từng Chat ID để tách biệt các phòng chat, đồng thời triển khai HomePage và ChatPage để tạo cuộc trò chuyện mới.

Phần 12 - Thiết lập cơ sở dữ liệu PostgreSQL

Sử dụng Docker để chạy container PostgreSQL và thiết lập môi trường kết nối, quản lý cơ sở dữ liệu thông qua DBeaver.

Phần 13 - Lưu trữ dữ liệu bền vững bằng Prisma ORM

Thiết lập Prisma ORM và kết nối với PostgreSQL để triển khai các tính năng lưu trữ và truy vấn dữ liệu hội thoại một cách bền vững, bao gồm luồng trò chuyện (thread), tin nhắn và kết quả của Tool.

Đừng chỉ dừng lại ở việc gọi API đơn thuần.
Hãy phát triển thành một chuyên gia có năng lực xây dựng chatbot AI full-stack hoạt động như một dịch vụ thực thụ.

Lưu ý trước khi tham gia khóa học


Môi trường thực hành

  • Hệ điều hành: Windows, macOS, Linux đều có thể sử dụng được.

  • Công cụ phát triển: Yêu cầu bắt buộc Node.js (khuyến nghị v18 trở lên), pnpm, Docker Desktop, VS Code.

  • Cấu hình PC: Khuyến nghị RAM từ 8GB trở lên để môi trường phát triển vận hành mượt mà.

Kiến thức tiên quyết và lưu ý

  • Cần hiểu cơ bản về cú pháp React và TypeScript.

  • Sẽ rất tốt nếu bạn có kinh nghiệm với các framework backend dựa trên Node.js như NestJS hoặc Express.js.

  • Nếu bạn đã có kinh nghiệm gọi API, điều đó sẽ giúp ích rất nhiều cho việc thực hành.

  • Không cần có kiến thức tiền đề về LangChain hay LangGraph cũng không sao.

Tài liệu học tập

  • Cung cấp toàn bộ mã nguồn cho mỗi bài giảng.

  • Bạn sẽ được học cách sử dụng các thư viện mới nhất cần thiết cho việc phát triển dịch vụ thực tế.


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Nhà phát triển Backend muốn áp dụng LangChain/LangGraph vào dịch vụ thực tế

  • Nhà phát triển Frontend muốn tự mình tạo ra dịch vụ AI chatbot giống như ChatGPT.

  • Nhà phát triển đã từng sử dụng LLM API nhưng chưa có kinh nghiệm thực hiện dự án chatbot full-stack.

  • Dành cho các nhà phát triển muốn tìm hiểu các mô hình nâng cao của AI Agent như Human-in-the-Loop, bộ nhớ (memory) và truyền phát dữ liệu (streaming).

  • Sinh viên mới tốt nghiệp đang tìm việc hoặc lập trình viên cấp độ Junior muốn xây dựng danh mục dự án (portfolio) thực tế full-stack dựa trên React + NestJS.

  • Người thực hành cần xây dựng nhanh chóng bản PoC hoặc nguyên mẫu chatbot AI trong nội bộ công ty.

Cần biết trước khi bắt đầu?

  • Cơ bản về JavaScript / TypeScript — Bạn cần hiểu các cú pháp cơ bản như biến, hàm, async/await, hệ thống module, v.v.

  • Cơ bản về React — Sẽ rất tốt nếu bạn đã có kinh nghiệm sử dụng các hook cơ bản như component, props, useState, useEffect.

  • Cơ bản về Node.js — Sẽ rất tốt nếu bạn đã quen thuộc với việc cài đặt gói bằng npm/pnpm và cách sử dụng terminal.

  • Khái niệm REST API — Nếu bạn hiểu về các phương thức HTTP (GET, POST, v.v.) và cấu trúc yêu cầu/phản hồi (request/response), bạn có thể dễ dàng theo kịp nội dung này.

  • Kinh nghiệm về NestJS hoặc Express — dù không có thì khóa học vẫn hướng dẫn từ các bước thiết lập ban đầu, nhưng nếu có thì bạn sẽ tiếp cận dễ dàng hơn.

Xin chào
Đây là Kaburi

766

Học viên

62

Đánh giá

28

Trả lời

5.0

Xếp hạng

4

Các khóa học

Công ty phát triển phần mềm cho bệnh viện và phòng khám | 2015 ~ Hiện tại

Vận hành kênh YouTube bài giảng về C#: Kaburi Coder (https://www.youtube.com/@kaburi-coder) 2022 ~

 

Các công nghệ chủ lực hiện đang được sử dụng như sau.

  • Ngôn ngữ lập trình: C#, TypeScript, Dart, Python, VB.NET

  • Ứng dụng máy tính: WinForms, WPF

  • Phát triển ứng dụng di động: Flutter

  • Phát triển Web: React, Next.js, Express, NestJS

  • Gen AI: LangChain, LangGraph

  • Container và Điều phối (Orchestration): Docker, Kubernetes, Helm, ArgoCD ..

  • CI/CD: GitHub Actions

  • Cơ sở dữ liệu: MySql, Postgresql, MongoDB, SQLITE, v.v.

Tôi có kinh nghiệm dẫn dắt thành công nhiều dự án khác nhau trong lĩnh vực phát triển phần mềm từ năm 2015 đến nay.

Với tư cách là trưởng nhóm kỹ thuật, tôi dẫn dắt đội ngũ duy trì quy trình phát triển hiệu quả, đồng thời tích cực áp dụng các công nghệ mới nhất để tập trung vào việc nâng cao chất lượng phần mềm và trải nghiệm người dùng.

Hiện tại, tôi đang dẫn dắt việc phát triển tích hợp giữa máy tính để bàn (desktop) và web, đồng thời chịu trách nhiệm đào tạo nhân viên trong công ty.

Ngoài ra, tôi còn đóng góp vào sự thành công chung của dự án thông qua việc phát triển các ứng dụng thân thiện với người dùng, tự động hóa triển khai và áp dụng DevOps.

Thông qua việc không ngừng phát triển bản thân, tôi luôn thích ứng linh hoạt với môi trường công nghệ thay đổi liên tục và sẵn sàng đón nhận những thử thách mới với niềm đam mê cháy bỏng.

Thêm

Chương trình giảng dạy

Tất cả

85 bài giảng ∙ (7giờ 30phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học khác của Kaburi

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Ưu đãi có thời hạn, kết thúc sau 8 ngày ngày

92.400 ₫

30%

2.744.336 ₫