How to Launch Your own GPT-4 Chatbot UI | No Coding Required | OpenAI Chatbot Tutorial

hi everyone welcome to Star morph where we talk about artificial intelligence and web development today we are going to go into how you can really quickly in just a few minutes deploy your own chatbot UI that looks like chat GPT and this is using an amazing repo that's been open sourced by McKay Wrigley I definitely recommend checking out his work he's absolutely crushing it making updates every day every week uh working with a lot of Open Source tools that are are playing with a lot of the new capabilities of large language models so definitely someone to check out in this space that's really pushing it Forward shout out to him and now he has partnered with versel and they have this repo available as a template so it doesn't take any coding to launch your own version of this repo so I'm going to quickly go over some of the features that we have available in this repo and then I'll show you how to deploy it with no coding in just a few minutes on your own and get it on your website as you can see I have a version of it here on the star Murph website so a little overview on what we can do here as you can see the UI is similar to chat GPT we have multiple chat windows we can make folders We can edit the names we also can choose which model we want to use and we can also Define a system prompt to provide certain instructions to the bot so I could say you know you are a developer give me code only answers and comment the code and now when I chat with this window it's going to follow that instruction we can also export conversations to a Json file and then import them later so we can make use of the content that we're creating and we can supply enable AI an open AI key dynamically down here as well as baking one into the app by default so this is an amazing UI it has a lot of functionality of like I said he's updating it all the time so you know it takes five minutes to get this set up on your own website why not and um you know great to play around with how some of this stuff works behind the hood because the code is open source as well so now let's get into how do we do this and we're going to do this through launching a burst cell template if you're not familiar with versel it's an amazing platform that gives you a ton of functionality you can do with web applications including deploying GitHub repositories to a website really quickly kind of like GitHub pages and they also have a fantastic library of templates that if you're a web developer and you want to learn more you know front-end development techniques and serverless techniques this is a huge resource because there's so much cool stuff in here working with AI tools so definitely check that out and we're going to check it out today by launching the chatbot UI so basically all you need to do is just go to versel's website I'll put this link in the description and you can log into versl with GitHub so I'm gonna I'm gonna log back in here with GitHub and since they have this as a template that's ready to go they can immediately create a GitHub repository for you with this code base so we can make a private GitHub repo here chatbot UI and it's going to create that GitHub repo for us and the next thing we need to do is we need to get our open AI API key and we I believe we actually don't need to do this because we also have the option of putting it in down here but I'll show you how to do this because it does have an error message if you don't put one in um so we might as well avoid that so let's go over to open AI and as you can see I have my open AI usage here which I think I'm grateful that start morph has been getting a lot of usage um unfortunately my API costs are becoming a new mortgage but we're working on that and it's great to have people using the tools um but this is the page where you want to go to uh the plot actually on the platform part of their website and you can see here we can go to our API keys and I'll create a new key that I'll just delete after this video okay we got our API key here and now we're going to paste this into our Purcell repo and hit deploy and now we've created this GitHub repo and now versel is going to automatically run all the processes to build this website and deploy this website to a URL that they're going to give us and then we can very easily add in our own custom domain to point this UI to wherever we want to go so pretty amazing that one um this open source this repo is open source and it's just an amazing toolkit and two that Versa makes it this easy to launch a website especially one that is so new and you know so current with the technology coming out and depending on the web app you know it will take 20 seconds to a few minutes to deploy um your repo and another thing that versell offers is if we update this GitHub repo it will automatically redeploy or attempt to redeploy the website and if it works then it will it will update the website too so really nice continuous development capabilities using versa so I imagine we're pretty close here to getting this all set up looks like the build just completed and we're deploying the site and deployment completed takes us to this page where we can click into our new app foreign okay there you go as you can see we have a new verse cell URL here with the chatbot deployed let's just test it out and see if it's working and because we put our API key in we're able to already talk to the openai API so that's really all you have to do to get one of these for yourself and I know you know the open AI is getting absolutely slammed so sometimes I find that using the API instead of using the openai website directly gives me a nice ux and it's nice to have this on my own hosting where I can I can analyze things and look at the code and configure it how I want um if you have any issues with the environment variables you can go into your settings and play around with that here you can see this is the one that we already added and the last thing I'll do in this video you know we could we could go into the code and we could start editing this bot look at how it works but I'm going to keep this one simple for you know non-developers or new developers that just want to launch their own chat GPT ask website so the last thing I'll show is how we create a new domain to point to this UI so I could go and I could say new chatbot Dot starmorph.com and then it's going to give us the DNS record that we need to go we need to update in order to point this domain new chatbot.starmorph.com to this new for cell project that we just made so you would go in where I'm not going to do this because it's going to show a lot of private information about my DNS records but um you go in where you la where you created your domain where you bought your domain such as GoDaddy or namecheap or your domain registrar and then you go into your domain manage and your DNS settings and you add a new cname record with the name of whatever you want the subdomain URL to be and then this as the value and then once you do that it will generate a new SSL certificate to give you the https and make your website secure and then it will Deploy on this URL and you'll be able to access the UI through there as well so I hope this is helpful I know a lot of people are trying to set up their own GPT bot and this is a great uh a great way to do it so super easy and you get a lot of functionality okay guys so I'll keep this one short and I hope this video was helpful thank you very much for watching please like And subscribe if you like this video to see new artificial intelligence and web development tutorials and I will see you in the next video

Channel: StarMorph AI

Views: 9,277

Keywords: gpt 4, chatbot, chatgpt, openai api tutorial, vercel tutorial, ai tutorial, chatbot ui design, create gpt chatbot, gpt chatbot, openai, ai tutorial for beginners, front-end developer, vercel, mckaywrigley chatbot ui, gpt website, system prompt, save gpt chat, gpt json, prompt engineering

Id: yzZ904v4AR4

Length: 8min 20sec (500 seconds)

Published: Tue Apr 11 2023