Build an AI RAG Application with LangChain & Next.js

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to build an AI RAG application with LangChain & Next.js. This tutorial introduces LangChain and shows how to use the framework to enhance your chatbots and build RAG (retrieval augmented generation) applications with Next.js.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Starter Source Code Example: github.com/gitdagray/nextjs-a...
🔗 Completed Source Code Example: github.com/gitdagray/nextjs-r...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Build an AI RAG Application with LangChain & Next.js
(00:00) Intro
(00:12) Welcome
(00:34) Lesson Goal
(01:03) What is RAG?
(02:17) What is LangChain?
(03:39) Source Code
(04:14) OpenAI API Key
(05:04) Dependencies
(06:35) Frontend Chat Component
(07:24) Simple Chat Example
(09:29) Ex. 1: LangChain Chat
(14:51) Ex. 2: Chat with History
(21:06) Ex. 3: Chat with Personality
(22:37) Ex. 4a: RAG Pattern Chat with JSON Object
(29:58) Ex. 4b: RAG Pattern Chat with JSON file
(32:11) Wrap-up
📚 Tutorial References:
🔗 LangChain: js.langchain.com/docs/get_sta...
🔗 Next.js: nextjs.org
🔗 Vercel AI SDK: sdk.vercel.ai/docs
🔗 OpenAI: openai.com/
🔗 shadcn/ui: ui.shadcn.com/
🔗 Next.js Light & Dark Modes: www.davegray.codes/posts/ligh...
Was this tutorial about building a RAG application with LangChain & Next.js helpful? If so, please share. Let me know your thoughts in the comments.
#rag #app #langchain

[@youneverknow7096]

Please do more AI based projects Dave, love your work !

[@HavoJavo]

Thanks for this ! More LangChain please ! More people seem to be warming up to it recently and I bet it will be a good marketable skill to have in the near future if not already.

[@namaefumei]

Soooo helpful and easy to understand. Made this with Vue and Nuxt and it worked nicely. Thanks a lot.

[@Amy-gr3xc]

Thank you so much for this and the explanations. I'm surprised how fast the docs were out of date between the video and today. It was frustrating.

[@user-cn5cl6un1q]

so great to see this type of topics from you. i learn next js from you now langchain 😊. this is such a huge topic with lang chain lang graph that make my day Dave. thank you so much

[@DaveGrayTeachesCode]

Glad it was helpful!

[@omarelhassani8452]

that's what am exactly looking for .. thank you so much Dave

[@DaveGrayTeachesCode]

You're welcome!

[@jefrycayo4582]

@@DaveGrayTeachesCode hello my friend

[@truth8690]

super cool dave

[@dheerajs2838]

fantastic video .. thanks ..

[@DaveGrayTeachesCode]

Glad you liked it!

[@aymenbachiri-yh2hd]

Awesome videos, thank you

[@DaveGrayTeachesCode]

You're welcome!

[@JomarAmomas]

Thanks for the video. Any plans in the future to create a DenoJS learning videos/course? More power to you.

[@Dvir1225]

Is there a way to implement custom logic so that the chain doesn't stop at the "?" itself, rather after it? Returning a question to the user without a question mark is rather meh 😅

[@biniyamfikru4464]

Thank you, Dave. in an unrelated topics are there any workarounds to implement fullscreen on ios as fullscreen API is not working on iPhones

[@TomAsh519]

awesome job! could you make now ex5 and load the states to a vector database? and later a file?

[@fscubetech7219]

Best content.

[@mutasimahmed8975]

More such apps with AI and next js please

[@DaveGrayTeachesCode]

Yes, enjoy!

[@ahmad-murery]

Interesting, I started a simple app in the past to answer student questions based on provided PDF/Word/Text documents and then to say it out loud using a TTS API. I was very motivated until I realized that sometimes it's hard to get access to these things if you're located in the wonderland🤦‍♂🤔 Thanks Dave!

[@DaveGrayTeachesCode]

You're welcome, Ahmad - I hope you find this one interesting!

[@ahmad-murery]

@@DaveGrayTeachesCode Yes, it really is

[@en_kratia]

Hello Dave, do you know how to get "cookies" in server component and preserve SSG at the same time? Looks like method "getSession" in "next-auth" can do this, but i don't know how to replicate this. Thank you

[@REINOSO195]

Thanks for the video, i have a question, to adapt this project to use a free model in Hugging Face what should i consider to do this? I mean i dont have a credit card to use, so i would like to use a free alternative.

[@DaveGrayTeachesCode]

Look at the Vercel AI SDK docs. They do offer integrations with other models.

[@sebastianeden]

Thank you for great content! I implemented this to chat with a pdf document that is quite big (170 pages). I then reach the token limit of 60k tokens/minute (I generate about 70k-80k). Is there any workaround for this? I want to use the whole document as context to answer the question.

[@namaefumei]

How does thos handle big data? Like say 5GBs lf data? Is it possible to do chunking? Even if it could handle, do we have to give it data every time we initiate a chat?

[@DaveGrayTeachesCode]

You would want that in a vector db. It will need data access to process each new addition to the chat.

[@rezashah22]

Hi Dave, Can we use LangChain to conditionally load data, based on the first user question? For example, user asks I need to know about US States (load state data), or I need to know about cars (then load car data)

[@DaveGrayTeachesCode]

Yes, there are many patterns. I was thinking about covering conditionals and database queries.

[@nikoscuatro7251]

Is this going to work with books in pdf files? there is change to make the gpt keep memory of that topic?

[@DaveGrayTeachesCode]

Yes, if you look at the loaders in the docs, there is a PDF loader. In this example, the route handler loads the data. The chat history context is maintained.

[@nikoscuatro7251]

@@DaveGrayTeachesCode I will come back to try it.Thanks!

[@prashlovessamosa]

Please use Cloudflare workers for the next project.

[@kumargupta7149]

On current trend ❤

[@DaveGrayTeachesCode]

Thank you!

[@StephenRayner]

Update for new Vercel AI changes?

[@DaveGrayTeachesCode]

Might be worth another video.

[@StephenRayner]

​@@DaveGrayTeachesCode If so, please please also add in a sprinkle of LangGraph. I'm running through your tutorial now with the newer approaches. The extra code for handling the stream can just be dropped works nicely without ``` import { LangChainAdapter, type Message, StreamingTextResponse } from "ai"; ... const prompt = PromptTemplate.fromTemplate(TEMPLATE); const chain = prompt.pipe(model.bind({ stop: ["?"] })); const stream = await chain.stream({ chat_history: formattedPreviousMessages.join(" "), input: message, }); return new StreamingTextResponse(LangChainAdapter.toAIStream(stream)); ``` See docs for the LangChainAdapter

[@StephenRayner]

Also for the next video, here's an example. You can run through using LangGraph or just LangChain. 1. User inputs text to translate. 2. LLM translates it and saves the source / target translation in vector db (pgvector) 3. User inputs SAME text to translate, RAG (or RAT translation) retrieve existing translations instead of always using the LLM. 4. Agent prompt template is told to re-use existing translations if identical 5. Since the translation is a vector, include the matching score too, and now tell the prompt to create a new translation if the score is .70 or higher. 6. This above can all but done using LangChain, but you can use LangGraph and have it decide to do a google search if it doesn't have any translations. Then use those to make up a better informed one. 7. You can also add in another workflow which has it reflect on the source text and the translation and if it still holds the original meaning e.t.c.

[@StephenRayner]

Oh! Streaming UI! Maybe have it show a user to collect a selection from the user. Like feedback on changing the translation. Like the translation I have is... and you can edit it and save it back.

[@subhash5122]

this guy is married

[@techrandm]

Tech aside, please reveal your skincare routine.

[@DaveGrayTeachesCode]

Ha! I don't have one. Good genetics?

[@Neunzahn]

I wish more tutorials would use free models like llama. Everyone is just using openAI.

[@subhash5122]

bro help me to get married