Getting Started with Vercel's Next.js AI Chatbot In 5 Minutes

--- type: transcript date: 2023-06-23 youtube_id: GC3YCvOSKQ4 --- # Transcript: Getting Started with Vercel's Next.js AI Chatbot In 5 Minutes in this video I'm going to be showing you how to get set up in just a few minutes with the new next JS AI chatbot that was recently Open Source by the team over at versaille so if I just go ahead and demonstrate what we're actually going to be setting up here is you'll see that you have a chat GPT like experience where you have this streaming back from the llm and then you also have your chat history which this will be using the versal KV database and then you also have the ability to share a conversation if you'd like so you can delete share and have a lot of nice features out of the gate if you are building a chat bot so the first thing that you're going to do is head over to the GitHub repository for this oversell Labs slash AI Dash chatbot you can go ahead click code pull this down and then you can get clone the repository so just get clone and paste that in so once you've done that make sure you're within the directory so I've already pulled this down but make sure you're within the directory and then you can go pnpm installed so once you've installed everything you can go ahead and open up the directory within your code editor and we'll go over to our.env.example so I've already removed the dot example but you'll just have to go ahead and remove that from your code so once you have that set up we're just going to go through these one by one so the first thing that you're going to need is an openai API key so if you go to platform.openingi.com account slash API key you can create a new secret and it's super simple so if you haven't set one up already you get some credits for free without tying in a credit card so go in create a secret and then paste it within your dot EnV now next you're just going to need to generate a random secret so they gave you an example within the boilerplate here where you can have a random secret so you can use this if you'd like or you can just generate your own next auth Secret so next we're going to have I'm just going to keep this as localhost 3000 feel free to change this if you'd like then once we have that set up we're going to go within our GitHub account here and then within GitHub if you simply go to settings and then you click oauth apps new oauth app and then you'll have your GitHub ID and GitHub secret that you'll paste here then finally once we have that set up we'll head over and log into our verscell account and so I'm just using a different KV database that I have on another project here but if you go within your account and within your project and you click storage you can create a database then once you're within the database you can go within here you can click your Dot env.local and then you can copy in all these values like you see and then you can paste them in here so that's pretty much it but the one notable thing with this uh repository that it makes it really easy to do is you can integrate with their new versal AI SDK so they have the npm i a i name space if we call it that where it gives you a really nice package to be able to interface with a number of the these models so the other thing that they recently released as well is this playground so say if you wanted to change out this example model within the project here so if we're within the directory of the project and we just head over to the app and we go to API and we go to chat and you can simply click the code that you need for the model so I won't go through uh putting this in one by one but pick the model that you like and then you'll be easily able to just swap out the configuration and the the code for this so you see there's the the post function here you can just replace that and include the other pieces that you might need so you'll also need to install the various API keys so say if you're using hugging phase you have to get an API key from them or anthropic a different API keys so just make sure you have those variables within the dot EnV but otherwise that's pretty much it to get up and running if you wanted to deploy this you could just you know run versus in the terminal here and deploy it to your versal account but a really great project to just have a sort of full featured uh chat interface similar to chatgpt where you can get off the ground up and running with being able to configure it and customize it as you see fit so hopefully you found this useful if you did please like comment share and subscribe and until the next one