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-sourced by the team over at Versel. So if I just go ahead and demonstrate what we're actually going to be setting up here, 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 chatbot. So the first thing that you're going to do is head over to the GitHub repository for this Versel Labs/AI-Chatbot. You can go ahead, click code, pull this down, and then you can git clone the repository. So just git 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 install`. 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/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 `.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 Vercel 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 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 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, you can simply click the code that you need for the model. So I won't go through 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 code for this. So you see there's 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 Face, 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 .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 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.

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

Welcome to Developer's Digest: Unleashing the World of AI and Tech!

Join me on this personal journey through the fascinating realm of AI applications and technology. I'll be sharing my insights, experiences, and discoveries in the world of AI.

Developer's Digest is a channel where we'll explore the latest trends, tools, and techniques in AI. From practical tutorials to thought-provoking discussions, I'll provide engaging content that inspires developers like you to push the boundaries of their skills.

Together, we'll dive into the depths of AI applications, celebrate victories, tackle challenges, and build a community of like-minded individuals passionate about AI and technology.

So, buckle up and join me on this exciting adventure through Developer's Digest. Let's unlock the potential of AI and make waves in the world of development!


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

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

Scripts