inflearn logo
inflearn logo

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

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.

4 learners are taking this course

Level Basic

Course period Unlimited

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

What you will gain after the course

  • You can build a real-time streaming AI chatbot similar to ChatGPT from scratch.

  • You will gain the ability to apply LangChain/LangGraph's agents, tool calling, parallel processing, and memory management in real-world projects.

  • By implementing the Human-in-the-Loop pattern, you can design a secure agent system where users can approve, reject, or modify the AI's tool usage.

  • You can implement a multimodal AI chatbot that processes images and PDFs.

  • You can build a backend system that persistently stores and retrieves chat history using NestJS, Prisma, and PostgreSQL.

  • In React, you can implement a ChatGPT-level UX, including token-by-token real-time rendering, auto-scrolling, and Markdown rendering, by parsing HTTP streams.

  • Learn practical ways to use the modern React ecosystem, including Zustand, TanStack Query, and Shadcn UI.

Main Screen

MultiModal

Human in the loop

Tool use

Real-time Streaming
Build Your Own AI Chatbot

Implement services beyond simple API calls!


Go beyond simple API calls and experience designing and deploying your own AI chatbot.
Develop the skills to build production-level chatbots and grow into a next-generation AI technology expert.


Building a Full-Stack AI Chatbot
Gain hands-on experience in building production-level AI chatbots.

React 19, NestJS, LangChain, and LangGraph are utilized to implement features such as
real-time streaming, tool calling, multimodal capabilities, and Human-in-the-Loop functionality.

Beyond simple API calls, you will directly design and implement all the features required for an actual service, such as conversation history management, file processing, and user approval.

We will build a full-stack chatbot based on React, NestJS, and PostgreSQL from start to finish together, and all source code will be provided.

Complete Practical AI Chatbot
Development Experience

Section 1 - Course Introduction and Development Environment Setup

This lecture introduces the objectives of the course and covers the initial environment setup for a React 19-based frontend project, as well as configuring the VS Code debugging environment.

Section 2 - Chatbot UI Design and Implementation

Design the basic layout, chat area, and input field of the chatbot using Shadcn UI, and implement message transmission event handling and loading states.

Section 3 - Backend (NestJS) Project Setup

Set up the initial NestJS project and configure environment variables, logging, DTO validation, and Swagger documentation generation. It also covers the creation of Chat API resources.

Section 4 - LangChain Integration and Real-time Streaming

Install LangChain and integrate it with the OpenAI API to make your first LLM call. Learn how to implement API calls using TanStack Query and real-time response streaming via backend HTTP Streams.

Section 5 - Frontend State Management and Refactoring

We will implement global state management by introducing the Zustand library and efficiently refactor the chat logic through custom hooks and component separation.

Section 6 - Utilizing LangChain Agents and Tools

Grant the AI Agent the ability to use tools, and implement parallel tool processing, custom logging middleware, and HTTP-Stream communication using streamMode.

Section 7 - Visualizing Tool Execution and Improving UX

Visually display the tool execution stream on the chatbot screen and improve the user experience by implementing Accordion UI, real-time Markdown rendering, and auto-scroll features.

Section 8 - Multimodal AI Chatbot (Image/PDF Processing)

Develop the file upload API and implement multimodal features for processing image and PDF files on both the backend and frontend.

Section 9 - Short-term Memory and LangGraph Utilization

Use LangGraph's MemorySaver and summarizationMiddleware to remember conversation history, and track the execution flow with LangSmith.

Section 10 - Implementing Human in the Loop

Implement the Human in the Loop pattern, which allows users to approve, reject, or modify the AI's tool usage, and develop features for interrupting and resuming streams.

Section 11 - Separating Chat Rooms and Applying Independent Memory

Apply independent short-term memory for each Chat ID to separate chat rooms, and implement HomePage and ChatPage for creating new chats.

Section 12 - PostgreSQL Database Setup

Run a PostgreSQL container using Docker and set up an environment for database connection and management through DBeaver.

Section 13 - Data Persistence using Prisma ORM

Set up Prisma ORM and integrate it with PostgreSQL to implement features for persistently storing and retrieving conversation data, such as chat threads, messages, and tool results.

Don't just stop at simple API calls.
Grow into an expert with the skills to develop full-stack AI chatbots that function as real-world services.

Notes before taking the course


Practice Environment

  • Operating System: Windows, macOS, and Linux are all supported.

  • Development Tools: Node.js (v18 or higher recommended), pnpm, Docker Desktop, and VS Code are required.

  • PC Specifications: At least 8GB of RAM is recommended for a smooth development environment.

Prerequisites and Important Notes

  • A basic understanding of React and TypeScript syntax is required.

  • It is helpful if you have experience with Node.js-based backend frameworks such as NestJS or Express.js.

  • Experience with API calls will be a great help for the hands-on practice.

  • It is okay if you do not have prior knowledge of LangChain or LangGraph.

Learning Materials

  • Full source code is provided for every lecture.

  • You will learn how to utilize the latest libraries required for actual service development.


Recommended for
these people

Who is this course right for?

  • Backend developers who want to apply LangChain/LangGraph to real-world services

  • A frontend developer who wants to build their own AI chatbot service like ChatGPT.

  • Developers who have used LLM APIs but have no experience with full-stack chatbot projects.

  • Developers who want to learn advanced patterns for AI agents, such as Human-in-the-Loop, memory, and streaming.

  • Job seekers or junior developers who want to build a practical full-stack project portfolio based on React + NestJS.

  • Practitioners who need to quickly build AI chatbot PoCs or prototypes within their company.

Need to know before starting?

  • JavaScript / TypeScript Basics — You must have an understanding of basic syntax, including variables, functions, async/await, and module systems.

  • React Basics — Experience with basic hooks such as components, props, useState, and useEffect is preferred.

  • Node.js basics — it is helpful to be familiar with installing npm/pnpm packages and using the terminal.

  • REST API concepts — You can follow along smoothly if you understand HTTP methods (GET, POST, etc.) and the request/response structure.

  • Experience with NestJS or Express — Not required as the course covers initial setup, but it will make things easier if you have it.

Hello
This is Kaburi

766

Learners

62

Reviews

28

Answers

5.0

Rating

4

Courses

Clinic & Hospital Software Development Company | 2015 ~ Present

Operating a YouTube channel for C# lectures: Kaburi Coder (https://www.youtube.com/@kaburi-coder) 2022 ~

 

The main technology stack currently in use is as follows.

  • Programming Languages: C#, TypeScript, Dart, Python, VB.NET

  • Desktop Applications: WinForms, WPF

  • Mobile App Development: Flutter

  • Web Development: React, Next.js, Express, NestJS

  • Gen AI: LangChain, LangGraph

  • Containers and Orchestration: Docker, Kubernetes, Helm, ArgoCD ..

  • CI/CD: GitHub Actions

  • Database: MySQL, PostgreSQL, MongoDB, SQLite, etc.

Since 2015, I have gained extensive experience successfully leading various projects in the field of software development.

As a technical leader, I lead the team to maintain efficient development processes and focus on enhancing software quality and user experience by actively adopting the latest technology stacks.

Currently, I am leading the integrated development of desktop and web applications while also taking responsibility for internal employee training.

Furthermore, I am contributing to the overall success of projects by developing user-friendly applications, automating deployments, and implementing DevOps practices.

Through continuous self-development, I flexibly adapt to the changing technological landscape and approach new challenges with great passion.

More

Curriculum

All

85 lectures ∙ (7hr 30min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Kaburi's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal ends in 8 days

$92,400.00

30%

$102.30