ChatHN: Next.JS, OpenAI Functions, Vercel AI SDK

--- type: transcript date: 2023-06-27 youtube_id: hjjXQN30ff0 --- # Transcript: ChatHN: Next.JS, OpenAI Functions, Vercel AI SDK in this video I'm going to be showing you Chad hn which is a new open source AI chatbot template that is built in next.js that uses open AI functions as well as the new versel AI SDK so the nice thing with this boilerplate is there's a handful of things that are pre-baked into this template that you can get up and running really quickly with leveraging all these new features that just came out so if I just demonstrate here at the example that is set in the repository is what this is doing that's unique to llms right now is it's reaching out to an API and the way that it's doing that is with the open AI functions so this solves a lot of problems that llms have mainly being able to reach for recent data but also being able to handle computational logic that llms don't particularly handle well so as you can see here it reached out to Hacker News their API and it returned this response so behind the scenes what it's essentially doing is it's sending that first natural language question or query to open AI open AI is returning to your server an indication that a function needs to be invoked and with the parameters if there are any then with those parameters it's going to pass it within the function and then the function is going to return the result and then finally send that back to open Ai and then open AI is going to return with the response that you see here so that's sort of the first part and then finally as it's returned it's going to stream out the response within the UI here so that is built in with the new versal AI SDK so the first thing that we're going to do is we're going to head over to the repository for this so I'd encourage you give this a star give Steve and Tay a shout out I believe he's the developer Advocate ad for cell so really great work here by the versel team just across the board there's a ton of stuff coming out that makes building AI projects really easy for Developers so first we're going to just go over to the repository and then we're going to open up our vs code and we're going to just clone that down here so I just had a empty folder here to clone this out and then we're going to CD into the directory we're going to open up the directories here as well so just go to your.env.example and we're just going to remove dot example so once you're here you can go to the opening eye platform and get your API key super simple to set up an account you get some credits off the bat if you haven't used it where you don't need to tie in a credit card or anything like that so just head over to this link get an API key and then once you have that you can go ahead and save the file so I'm going to close that out and then I'm going to also just expand the app here which we'll get into in just a moment so I'm going to pnpm install and then just get all the dependencies installed while we well we go through this So within the app there's a few main places that we're going to be working out of so the functions so this is going to be where we can actually edit the functions and I'll go through these in just a moment and then this is going to be where the logic is handled for all the requests that are being sent and you sent to open Ai and then received and then also the streaming response for our UI and then finally our UI itself this are this is where you can edit the questions if you want those initial questions like you see within Chachi PT where you know you see those questions there where you can just sort of pre-fill that uh input if you'd like so those are sort of the main areas so once you've installed everything you can go ahead and run the script so if we just npm run Dev it will just take a moment to start up and then once it's start all started you'll have that initial application like you saw there so if everything installed correctly you put in your API key correctly that should all be working now thank you so once we have that I just wanted to go through the functions quickly so there are sort of two pieces to the function so there are the descriptions of both what the functions are but then also what the properties are so say like if there's parameters and arguments that are being passed within the function whether they're required and then also the description of those parameters that are being passed in so the type whether it's a number string Etc you'll have to sort of structure that out and the reason for that is this is sort of how the llm is going to be able to parse and send back the proper Json payload that we're going to handle within our function so that's the first part and then once you have that description you have the correlated function as well so as you see here so this was a Hacker News example but you could go in here you can add to this list if you'd like you can remove things you know I'd encourage you if you're brand new to the open AI functions just you even start with one so start with one have a simple description maybe have only a couple properties that you're passing in and try and get that working and then once you have that working you can sort of scaffold out and build out from there so these functions are going to be passed within the route as I showed here and then if you wanted to swap this out here so say you have you know you wanted to do this with the Reddit API or something you could go in here and I had some luck before this video is even if you just take this whole context here of this file put it in chat GPT and say I want this to be swapped out for you know a Reddit equivalent you could swap that out here put it in here and then go in and change the example questions if you'd like and it worked you know sort of first shot when I tried that so really play around with this leverage you know tools like chat gbt to help build out your functions it is a little bit of a new sort of coding uh Paradigm if you will where you do have to consider the descriptions of everything but it's sort of like almost like an extension of typescript right it's like we had JavaScript and then we had types we had to describe our types and now we have sort of like you know natural language script or parameters that we have to consider too so to be able to have our functions be useful within the context of llms we just have to have these descriptions and and all of this so I'd uh probably you know I wouldn't be surprised if if this is something that's a lot more common with in you know even like function libraries in sort of you know years to come where you'll have your description sort of like you know within a closure or something baked in with your functions so then they're sort of like inherently useful to llms out of the bat or out of the gate rather so that's pretty much it um if you found this video useful please like comment share and subscribe and as always if you have any questions just leave them in the comments below