Build A Next.JS Chatbot with Langchain and Upstash Redis

--- type: transcript date: 2023-09-09 youtube_id: gpXXIvfSCto --- # Transcript: Build A Next.JS Chatbot with Langchain and Upstash Redis in this video I'm going to be showing you how to set up a chat bot UI in index.js we're going to be using a length chain for all the natural language processing tasks we're going to be using a versal AIS SDK for the communication between the front end and back end of our application as well as the streaming that you see on screen here we're going to be using upstash redis that's going to be responsible for storing all of our chat history as well as the different threads that we're going to be setting up here and then finally for the front end we're going to be using Shad CN UI alongside with Tailwind for all of our styling so the first thing that we're going to do is I'm going to point you over to the Shad cnui so you can actually start straight from this to start the whole project if you'd like so you can run through and create a next app by yourself or you can just grab what they have here to create a project here so if you just copy this and change out the app name maybe if you'd like you can take that command pop over to vs code and run that within your terminal now once that's set up while we're on the Shad cnui page here you can just go ahead and initialize it from the CLI and you can just run through these steps here I'm not actually going to run through this step by step but very self-explanatory so do you want to use typescript in this video I'm I am going to be using it and the one thing I will note is if you do want to pull the repo for this video you can do that as well and just as we follow along the video alongside the repo or however you see fit however you will best learn so the thing with this is once this is all set up and wired the really neat thing with this library or framework or whatever we want to call it is you'll be able to just add in the components by running this command so if you run MPX Shad cnui add a button that will be how you add a button component within a UI folder in your project so I'll just show you that quickly so I have a components folder within my project here like you see so as soon as you go ahead and run a command like add the button it will go ahead and populate the components that you want to install directly in in this folder and then when you go ahead and you want to link it you'll see how I do that once I go into the other components so once you have that all set up it also shows you here as well how you can import them so import button from add components UI slash button Etc so we're going to be leveraging just a few of these in this example we're going to be using the button and text area but we're also going to be using one of the examples that they show here so I just grab this sidebar from their front page there and you can go within the components here and just grab this sidebar knob so I just copied this over I didn't make any tweaks and I just put that within the UI folder as well so you can go ahead and try that out just install those buttons if you'd like and you once you have those that's pretty much it for for styling that's all we're going to be leveraging directly from uh shad cnui and the rest is going to be implemented with just Tailwind classes throughout our front end so once we have all that set up we can go ahead and make a DOT e and v file so as you see on screen here you see the three things that we're going to be looking out for so we're gonna have to hunt down our openai API key and a couple up stash redis variables so open AI a very easy one to go ahead and grab if you have an openai account just go to the API Keys page you can just click the top right hand corner here where your name is and then view API Keys create a new key copy it over just make sure that it's open AI underscore API underscore key pasted it then for redis so once you've made your database you can go ahead within it so again I'll show you so you go redis and you can click the instance of your database here you see that you have 10 000 free commands per day and I found the easiest way to grab the variables that you need is just go to upstash redis here and you're going to have your URL and your token so if you just show those I'm not going to be showing mine here but you can just put them in just as you see here so upstash underscore redis underscore rest underscore URL put them in one by one once you've done that you can go ahead and close out and save your dot EnV all right so once we're within our package Json I'm just going to show you the few things that we're going to install so we're going to npmi at upstash slash redis we're going to install AI dot EnV and line chain so I'm not going to run those but you can go ahead and get those installed so next I'm just going to show you a little bit of the structure that we're going to be setting up here so we have our app itself and then adjacent to it we have our components we have within our components our Shad UI components like I showed you we're going to have two components so I want to keep this simple you could break this up further maybe if you wanted that text area to be a separate component as well you could do that but we have our chat area and our sidebar so you can sort of think of it as the left side and the right side of our app and from there we have our app itself and then within the app we have two routes within our API so we have chat to handle all of the chat logic and then we have the retrieve history which you can sort of think of it as the back end that's more or less bound to that sidebar so to show all our our history and threads that are within the database then in terms of pages themselves so we have one main page that does basically all of the primary logic there and then we have a home page here which is just going to be very simple just a click here to start a conversation but you can tweak this as you see fit so once we have our structure set up just like I I showed you so you could just pause the video if you're going through this bit by bit or if you're following along with repo just so you sort of have an understanding here you can sort of look through it and listen to me explain however you see you like to do it so once you have the directories all set up I'm just going to fold some of these I have everything opened here and the way that I'm going to be going through this is I'm going to be showing you block by block all of the different portions of the code that we're going to be writing out so I'm going to be showing you the back end I'm going to work myself to the front end and then that's going to be it so it's not going to take too too long to get this all set up and feel free to revisit this video if you know if I run through something relatively fast or always just really look for that repo if you want something that's you know easy to copy and paste or you know you need a little sample of trying to do something feel free to do that as well so what we're going to do first I'm just going to expand the sidebar a little bit just so we can see what we are working in and the first thing that that we're going to do is we're going to work on our chat route so this is going to be the sort of the the biggest part arguably of our back end but still relatively straightforward so the first thing we're going to do is we're going to import a handful of modules so we're going to import redis we're going to import upstash redis chat message history so that's the wrapper that's within Lang chain that the team at upstash has implemented we're going to be using the chat open AI model from line chain we're going to be using buffer memory from Lang chain the conversation chain and then finally we're going to be using streaming text response and the Lang chain stream from the versaille AI SDK so first we're just going to initialize our redis client here so if you use the environment variable Keys like I had shown you you can just go redis a DOT from EnV here to load that all up and then from here you can specify the runtime if you'd like so if you want to deploy this to something like the versel edge functions you can go ahead and specify like I have here if you want to implement this on something else like AWS Lambda there there's going to be a little bit of a different setup for the runtime but that's what that is and then from there we're going to be setting up the post function itself in next.js what we're going to be doing is we're going to do structure a couple things from our line chain stream here so the stream and the Handler and you'll see how we use these so we're going to parse the response that we get from the front end so we're going to be taking in the messages the user ID and load messages here now the user ID is one that I'm going to show you from the front end there's a particular way on how you pass additional payloads outside of the ones that are built in to the versaillai SDK so I'm going to touch on that it is super useful if you're trying to pass in other things as well so here we're just going to load the chat if it's requested so if by a request we're going to have if there's the user ID and load messages it's going to reach into the database directly and it's going to um get those all for us now the thing with this is I also see a little mistake here but we'll just get rid of that in just a moment now the thing with this is you'll be able to use their Lang chain client or you can use the core redis client as well so you sort of have the option so with Lang chain stuff like you can use it the quote-unquote Lang chain way I would encourage you if you're running into issues with a wrapper don't hesitate to reach for the actual client themselves just remember you're within node or next you know within the environment if you can install these things and have libraries to use just do what works best for you so we're going to load and pre-populate the messages I'm loading it directly from the redis client here then from here we're going to initialize the memory buffer and chat history here so this is going to to be where we actually set up the upstash redis chat message history but we're going to pass in the session ID which is going to be the user ID and the timestamp which I'll be showing you a little bit more as we go through this and we're going to be passing in the client itself so from there we're going to be initializing our chat model so in this one I'm using chat or GPD 3.5 turbo you can use gpt4 if you want specified that streaming's true and now in this if we want those fast responses and we don't want like a synthetic output of this stream from the back end make sure you enable streaming because that's one of the big pluses and advantages of using something like the Purcell AI SDK so we're going to initialize the conversation chain this is going to be where we put in the memory that we previously initialized and the model now we're going to get the last message from the conversation and that's what we're going to pass with in the uh our conversation conversation chain and because we're specifying the memory above here we don't need to pass in like a message array like you might have seen in other open AI API examples and then this is going to be how we trigger the callback for the Lang chain stream here so that's what that Handler says and then finally this is going to be how we output our streaming response to the front end so that's it for the chat component so even though it's sort of the the larger piece of the back end still not that many lines of code right less than 50 lines of code with comments so next we're going to just pop over while we're on the chat functionality of the app we're going to hop over to our chat area component for the front end so we're going to import some of the necessary components here so you have The Usual Suspects use effect use layout effect form event use ref and we're going to be using refs so it Scrolls continues to scroll as the messages come up so so that chat doesn't get hidden behind the input that's going to be how we handle that and then from there I'm going to be setting up our chat area component you're going to see some of the typescript interfaces and whatnot as I set up I'm not going to focus on those you can just see them here and copy them over into your app but I'm not going to sort of dwell on those too long so here we're going to get the parameters so the parameters are going to be the latter portion of the um input within our URL and then we're going to be using all of these different pieces from the vercell aisdk so this use chat function is has all of these different custom chat hooks available to us so in this we have our handle load chat function and basically what we're going to be doing here is we're going to be passing in the user ID I also showed you how you can pass in additional options here so here I'm passing in testing you can pass in a whole bunch of other Keys here but the portions that are back end actually functions on is the user ID and load messages so from there once it's returned we're going to make sure that there's actually a length and then we're just going to do a little bit of filtering so on the front end we're going to filter through we're going to specify whether it's human or a user and then these are going to be what dictate whether it's on the left hand side or right hand side whether it's a blue bubble or a gray bubble all of that stuff you can also use these roles as the keys within the UI so if you actually want to show someone's name or icon Associated or whatever you can leverage these for that and then we're just going to set the messages and that's going to be how our app chat area will ultimately uh map these out so we're going to handle our submits so we're going to listen for the enter key on our text area and then if it's um has that Enter key we're going to trigger that core handle submit so our handle submits wrapped in a handle all submits because we're listening for that Enter key and then we're also passing in some additional options so next we're going to specify the ref for our message container and like I mentioned this is what what we're going to use to make sure that our chat doesn't fall behind our text area and it Scrolls up naturally as you'd expect as the messages come through so this is essentially going to be how we do that we're going to be using the layout effect as well so it's going to be listening for when the message is change to trigger this so then we're just going to be rendering out our component here so I'll just word wrap this here so essentially the main part of this is going to be if there are messages it's going to Loop through them it's going to give a class name whether it's a user or not so depending on the role it will position them differently and then from there you can specify the colors of your Bubbles and then finally the content of the message itself after that we just have a simple text area for our form itself and that's the text area that we're incorporating from the Shad UI so you see here our components so we have components UI text area components button that's pretty much it for our chat area so that wraps up the chat portion and then from here it's going to be pretty smooth sailing so for our back end of the retrieve chat history so just our sidebar there similar setup for our redis so we're just going to import redis we're going to initialize our environment variables we're going to specify our runtime set up our interface for typescript then we're going to be getting a couple different things from the front end here so we're going to have our user ID and the chat history action now I put this in in case you wanted to scale this out so say if you wanted to add in the functionality to delete a particular chat history you could set up some logic here within this depending on the action so just showed you a little bit about how you could potentially think about a route like this and then from there we're going to just go and query for the user ID and then we have this wild card here so anything with that user ID so in this case that uuid ABC c123 that you see within the URLs here so you see uuid abc123 that front portion is going to be the user ID and then it's going to get all of the timestamps and that's going to be how it gets this sidebar here and then it's just going to return those and if there's an error it's going to return that and then similar as you might expect for the front end we're just going to do a lot of the same things that we just did incorporate a handful of things a button with a sidebar knob that we got from Shad CNY and then what we're going to do is we're going to set up the interface for typescript here I'm going to set up a couple of them and then we're going to start defining our component so we're going to get the parameters from the URL like we have in the others we're going to specify the router here we're going to handle the retrieve sidebar so this is going to be where we actually go and make a request for that back-end logic that we just set up if the response is okay we're simply going to go ahead we're going to reverse that chat history and then we're going to map through this and we're going to set it so we have the href to be a slash chat history and the title is going to be a nice parse version instead of that Unix time like you see in the URL so instead of Unix time that you see here it's going to parse it just to be a more friendly readable format for us so next we're going to check and see if a specific chat ID is provided within the URL params then from there we're going to parse out the Unix time and we're going to put that title just like you see here again set it within the um within the top of our list here and now the thing with this portion here is the way that it's set up is if you click new chat but you don't actually submit something it's not going to log it within this sidebar so this sidebar is only going to have conversations that have actively been stored within the redis instance so that's a bit of that conditional logic that's happening so if you just keep clicking new chat new chat new chat if you go and refresh the page it's not going to have a number of new chats here it's only going to keep the chat histories that have messages within them so that's just a feature so it doesn't clutter it up with a bunch of empty uh chat history boxes but sort of optional you could remove that if you maybe there's a use case where that could be what you're looking to do but that's a bit of this conditional logic here then we're just going to handle out any errors if they come up then next we're going to set up a function to actually create that new chat so if we click that button and then we're going to set up the use effect for when the component initially mounts to this screen and then our render function here is pretty straightforward so we have our button with our new chat where we have bind our handle update sidebar and then we have our Shad cnui example of a sidebar that accepts the props of items so pretty straightforward for that component and that pretty much wraps the two main components that we're going to be running out from scratch that wraps the two endpoints that we're going to be setting up and then finally it's just setting up the pages so if I just collapse out our components I Collapse out our API we're almost there we just have two more things that we're going to be going through and one is super fast and simple So within the root of our directory all that we're going to have for the home page of this kept it simple you just click for your first chat it's going to start this out and it's going to put and push this to the router here with a new time stamp and we're just going to specify we're going to say this is a we're using the client in this and then our home page is simply going to be the user ID so this is going to be where say if you were using an authentication Service you could use something that's unique to the user and then from there we're going to have our handle click so on click of the button we're going to Simply push and Route our user to what that user ID is and the timestamp so this could be a potential entry point for your authentication if you want to layer that into your application so then next within our application we have the page of chat history and because it's Dynamic we have the brackets around our ID here and then we have our page so this one's also very simple so we're going to incorporate a couple things here so here we're going to be requiring the components that we just wrote so our sidebar and our chat area and then we're going to specify our user ID once again and then all that we're going to do is simply wrap our two components here we're going to pass in the props of our user ID and then we're going to pass in the chat ID as well and our chat ID just so it's able to to communicate amongst them so that's pretty much it um I know this was a little bit of a longer video but I wanted to cover as much as I could from scratch like I mentioned there's going to be a repo for all of this so I know even though it was a little bit longer than some of my other videos I probably went through some portions relatively fast so use the repo ask questions in the comments if you have any I'm pretty responsive to my comments I'll try and help out where I can and yeah I want to thank upstash for sponsoring this video if you found this video useful please like comment share and subscribe I also recently set up a patreon which I'll link in the description if you're interested you can subscribe to that if you'd like but otherwise just like the video that's more than enough but otherwise I hope you enjoyed this one I hope you found it useful and otherwise until the next one