AI Chatbots with LangChain.js, Next.js and Supabase
AI Chatbots with LangChain.js, Next.js and Supabase is a hands-on workshop in building a chatbot that answers from company documents with RAG, using Next.js for the chat interface and API, LangChain.js for the agent and Supabase for login and pgvector search. It suits web and TypeScript developers and tech leads, and you leave with a chatbot deployed on Vercel or Docker.
Many organisations keep their knowledge in hundreds of manuals, policies, product specifications and internal documents, and staff waste time searching for answers or asking the same questions again and again. An AI chatbot that answers accurately from these documents, cites its sources and knows what each user is allowed to see has become something many organisations want, but making it work in practice takes AI, web and database skills together.
This course takes learners through building an AI chatbot for an organisation in TypeScript, from an empty project to a live system. Next.js 16 provides both the chat interface and the API in one project, and LangChain.js 1.x connects models from several providers, streams replies and builds agents with createAgent. Supabase handles sign-up and login, stores chat history protected by Row Level Security and keeps documents as vectors with pgvector. Learners then build RAG that shows its sources, improve retrieval quality, evaluate answers, add tool calling and MCP, apply guardrails and deploy on Vercel or Docker. The course closes with a capstone that builds a complete chatbot for an organisation. (4 days, 6 hours per day, 24 hours in total, Intermediate level.)
What you’ll gain
Build a full-stack Next.js 16 app with the chat interface and AI API in one project
Use LangChain.js 1.x to connect models from several providers with streaming replies
Add sign-up and login with Supabase Auth and store chat history protected by Row Level Security
Build a pipeline that loads company documents into Supabase as vectors with pgvector
Develop agentic RAG that answers from documents with citations, and improve retrieval accuracy
Add tool calling and connect MCP servers so the agent can work with other systems
Apply security and personal data guardrails, and evaluate answer quality before go-live
Deploy the system to Vercel or Docker with environments configured securely
Who this course is for
Frontend and full-stack web developers who want to add AI and LLM skills
JavaScript and TypeScript developers who want to build AI applications that work in practice
Solution architects and tech leads who need to design an AI chatbot for their organisation
Internal teams who want a bot that answers from manuals, specifications or policies
Lecturers, trainers and consultants who want a RAG reference project to teach or adapt
Prerequisites
JavaScript or TypeScript, with some experience of React or Next.js
An understanding of REST, HTTP and .env files, and basic Git
Basic SQL, such as tables, keys and relationships, will help a great deal
A laptop that can run Node.js, VS Code and Docker Desktop, with permission to install software
Curriculum
Course Details
This is the 2026 edition of the AI Chatbots for Organisations with LangChain.js, Next.js and Supabase course, rewritten for LangChain.js 1.x and Next.js 16. It runs for 4 days, 6 hours per day (24 hours in total, 09:00-16:00), as a workshop that grows a single project throughout the course on a set of fictional Thai company manuals and policies. Intermediate level. Compared with the previous edition it replaces
LLMChain and the agent executor with createAgent and middleware, uses the Next.js 16 proxy.ts convention and @supabase/ssr with Supabase's new API keys, and adds agentic RAG, hybrid search, answer evaluation, MCP and guardrails. The frameworks are open source and Supabase and Vercel offer free plans, while LLM provider API calls use the learner's own account. Learners take home a lab guide, source code for every lab and SQL scripts for Supabase.
Day 1Next.js and LangChain.js Foundations
Section 1: Lab: AI Chatbot Overview and Project Setup
Generative AI, LLMs and what an organisational chatbot needs beyond question answering
The course architecture: Next.js, LangChain.js, Supabase and Vercel
Choosing a model provider and estimating the cost of usage
Install Node.js and pnpm and create a TypeScript project with create-next-app
Lab: organise the project, configure ESLint and keep the code in Git
Section 2: Lab: An AI API with Route Handlers in Next.js 16
The App Router, Server Components and Client Components from an AI app's point of view
Create a route handler in app/api/chat/route.ts that takes a Request and returns a Response
Validate input with Zod and handle errors consistently
Keep API keys in .env.local and never expose them to the client
Lab: test the endpoint with Thunder Client or Postman
Section 3: Lab: Connecting Language Models with LangChain.js 1.x
How LangChain.js 1.x packages are organised and what moved to @langchain/classic
Connect chat models from several providers and switch models without touching the rest of the code
Messages, system prompts and prompt templates for controlling answers
Structured output with Zod so the code can use the result directly
Lab: connect the model to the route handler built earlier
Section 4: Lab: Streaming Replies
Why a chatbot should stream its replies and how that affects the user experience
Stream output from models and agents in LangChain.js
Return a ReadableStream from a route handler and support cancelling a request midway
Handle timeouts, rate limits and errors during a stream
Lab: an API that sends the answer to the page in real time
Section 5: Lab: A Chat Interface with shadcn/ui
Install shadcn/ui with Tailwind CSS and choose the components you need
Build the chat page from Card, Input, Button, Avatar and Scroll Area
Manage message state on the client and receive streamed messages
Render Markdown and code in answers, with loading and error states
Lab: a chat page that talks to the AI API end to end
Day 2Users, Chat History and Memory
Section 6: Lab: Getting Started with Supabase
What Supabase is: Postgres, Auth, Storage and APIs in one service
Create a project in the dashboard and understand publishable and secret keys
Use the Supabase CLI to run the stack locally with Docker and manage migrations
Generate TypeScript types from the schema for typed database calls
Lab: connect Next.js to Supabase on both the browser and the server
Section 7: Lab: Sign-up and Login with Supabase Auth
Use @supabase/ssr to create clients for Server Components and route handlers
Refresh the session in the Next.js 16 proxy.ts and protect pages that need a login
Sign up and log in with email, and with a Google account through OAuth
Verify the user on the server every time before calling the AI API
Lab: working login, register and logout pages
Section 8: Lab: Chat History and Row Level Security
Design conversations and messages tables linked to each user
Enable Row Level Security and write policies so users see only their own data
Save every question and answer along with the model used and token counts
List past conversations and give each one an AI-generated title
Lab: test that one user cannot reach another user's chats
Section 9: Lab: Giving the AI a Memory
Pass conversation history into the prompt so the chat can continue naturally
Limit context size by trimming old messages and summarising the conversation
Short-term memory with a checkpointer and a thread_id in LangChain
Choosing between storing memory in the app's own tables or in a Postgres checkpointer
Lab: a chatbot that keeps context across questions and can reopen old chats
Day 3RAG over Company Documents
Section 10: RAG and Embedding Concepts
How RAG works and how it differs from fine-tuning a model
What embeddings are and how to choose an embedding model that handles Thai
Chunking: size, overlap and their effect on answer accuracy
pgvector on Supabase: vector columns, distance operators and HNSW indexes
The cost and time of processing large document sets
Section 11: Lab: A Document Ingestion Pipeline
Upload PDF, DOCX and text files to Supabase Storage
Document loaders and the RecursiveCharacterTextSplitter in LangChain.js
Create the documents table, the match_documents function and an index
Store chunks with metadata such as file name, page and department through SupabaseVectorStore
Lab: a repeatable ingestion script that updates edited documents
Section 12: Lab: Agentic RAG with createAgent
Turn the retriever into a tool so the agent decides when to search the documents
Build an agent with createAgent and a system prompt that keeps answers to the documents
Make the AI say it does not know when the documents lack the answer, instead of guessing
Show sources, file names and the passages used on the chat page
Lab: a chatbot that answers from company manuals with links back to the original documents
Section 13: Lab: More Accurate Retrieval
Filter results by metadata such as department, document type and date
Hybrid search that combines Postgres full-text search with vector search
Rewrite questions before searching and rerank the results
Restrict which documents each user or team can see with Row Level Security
Lab: compare results before and after tuning with the same question set
Section 14: Lab: Evaluating Answer Quality
Build a test set of questions with expected answers from real documents
Measure correctness, faithful citation and answers that stray outside the documents
Use an LLM to help score answers, and the caveats of doing so
Trace agent runs with LangSmith or the system's own logs
Lab: run the test set every time the prompt or retrieval method changes
Day 4Tools, Security and Deployment
Section 15: Lab: Tool Calling and MCP
What tool calling is and which tasks an organisational chatbot should handle through tools
Define tools with the tool() function and a Zod schema
Use middleware to handle tool errors and require approval before important actions
Connect MCP servers to the agent through @langchain/mcp-adapters
Lab: an agent that searches documents, calls internal APIs and files requests for the user
Section 16: Security and Guardrails
Prompt injection from users and from document content, and how to defend against it
Redact personal data with middleware, with PDPA considerations
Rate-limit each user and keep model costs under control
Manage secrets, Supabase key permissions and logs that leave out sensitive data
Lab: attack your own system and close the gaps
Section 17: Lab: Deploying to Production
Prepare a production Supabase project and apply the migrations
Deploy on Vercel with environment variables and a GitHub connection
Alternative deployment with Docker using standalone output
Read logs, fix common problems and monitor usage after launch
Choose a brief, such as an HR policy bot, a product specification bot or an IT helpdesk bot
Load the documents, set access by team and add the tools you need
Evaluate answers with a test set and tune until they meet the target
Present the work, review it together and wrap up with a pre-launch checklist
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
How does RAG work, and why does it let a chatbot answer from company documents?
RAG first loads documents such as PDFs or DOCX files, splits them into chunks, converts each chunk into an embedding (a numeric vector) and stores it in a database such as pgvector on Supabase. When a user asks a question, the system finds the chunks closest in meaning and passes them to the LLM, which answers from that content and cites its sources. In agentic RAG the agent itself decides when to search. The chatbot can then answer from your real manuals and policies without retraining the model.
How do you create an API with route handlers in Next.js 16?
Create a route.ts file in the folder matching the path you want, such as app/api/chat/route.ts, and export a function named after the HTTP method, such as an async POST function that takes a Request. Read the body with await request.json(), validate it with Zod, and reply with JSON or a streaming Response for AI output. Keep your LLM provider's secret key in .env.local and use it only on the server. For refreshing the session before each page, Next.js 16 uses a proxy.ts file in place of the old middleware.ts.
What is row-level security in Supabase and what is it used for?
Row-level security (RLS) is a PostgreSQL feature that Supabase uses to control which rows each user can read or change. You enable RLS on a table and create a policy, for example allowing reads on a messages table only where user_id matches auth.uid() for the signed-in user. Even if the client queries the database directly, each user sees only their own chat history, and the same idea limits which documents each team can see in the RAG system.
Who is the AI Chatbots with LangChain.js, Next.js and Supabase course for, and what should I know beforehand?
It suits frontend and full-stack web developers, JavaScript or TypeScript developers, solution architects and tech leads, as well as internal teams who want a bot that answers from manuals or policies. You should know JavaScript or TypeScript and have some experience of React or Next.js, understand REST, HTTP, .env files and Git, and basic SQL will help a great deal.
What will I be able to do after the AI Chatbots with LangChain.js, Next.js and Supabase course?
You will be able to build a full-stack Next.js 16 app with a shadcn/ui chat interface and an AI API, use LangChain.js 1.x to connect models from several providers with streaming replies, add sign-up and login with Supabase Auth, store chat history protected by RLS, answer from company documents with agentic RAG that cites its sources, evaluate answers, add tools and MCP, apply guardrails and deploy on Vercel or Docker. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
What do I need to prepare for the AI Chatbots with LangChain.js course?
You need your own laptop running Windows, macOS or Linux that can run Node.js, VS Code and Docker Desktop. During the course you create a Supabase project and a Vercel account on their free plans, so you should have an email or GitHub account for signing up to online services, plus an account with at least one LLM provider such as OpenAI, Anthropic, Google or Groq, which may charge according to usage.
Machine learning is still at the heart of AI work in organisations, from sales forecasting and customer screening to document categorisation and anomaly detection, and a great deal of tabular data work is still handled better and more cheaply by classic…
Deep learning is the engine behind the AI systems people use every day, from image classification and object detection on camera feeds to sentiment analysis of text and large language models. But the tools move fast: the TensorFlow 1 and Keras 2 style code…
Many organisations already hold plenty of data but cannot turn it into forecasting models or customer segments because their teams are not comfortable writing code. KNIME Analytics Platform is an open source tool that builds analytics by connecting nodes into…
18 hours3 days
12,150THB13,500 THB
View details
AI Chatbots with LangChain.js, Next.js and Supabase24 hrs · 4 days
