arlee

API 한 번 호출하고 끝나는 AI 토이 프로젝트는 이제 그만!
풀스택 AI 챗봇을 실제로 설계하고 배포까지 고려한 구조로 만들어 본 경험을 바탕으로, 스트리밍·Tool 호출·메모리·멀티모달·Human in the Loop까지 '서비스로 동작하는' AI 챗봇을 만드는 전 과정을 모두 알려드립니다.

Kaburi

풀스택 AI ChatBot 만들기(React 19, NestJS, LangChain.Graph v1.+)

LangChain

langchain

fullstack

human-in-the-loop

llm-streaming

ai-chatbot

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.

입문

초급

중급이상

리액트

React

포스트그레SQL

PostgreSQL

네스트JS

NestJS

랭체인

랭그래프

LangGraph

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

Intro

Frontend Project Initial Setup

Creating a chatbot UI screen

Backend (NestJS) Project Initial Setup

LangChain Integration and Chat Streaming

Frontend Refactoring

LangChain(v1.0) Agent — Tool Calling and Streaming

Displaying the tool execution process through the UI

Multimodal — Image and PDF Processing

Remembering Conversations — LangGraph Short-term Memory

Human in the Loop — Users determine the actions of the AI

Separate Chat Rooms — Independent Memory by Chat ID

Build a PostgreSQL database

Chat Data Persistence — Prisma + PostgreSQL