How To Use ChatKit UI with OpenAI Agent Builder

Let's learn how to use OpenAI Agent Builder📅 2025-10-18

Watch on YouTube ↗

Transcript

[00:00] Let's learn as simple as possible how we take our workflows from OpenAI agent builder and actually leverage the chat kit feature which allows us to take these workflows and put it to a live website. So that workflow you just saw works perfectly now. And I'm going to show you step by step how to do this as simple as possible as if you've never developed in your entire life. And look at that. It's already going. Welcome back y'all. This is another video in our longgoing series here where I'm showing you how to actually use this agent builder here. Make sure to check out the playlist below if you want more context how we even got to this point. But this lesson specifically, we're checking out

[00:31] everything we love about Chatkit. And I'm going to break it down fundamentally what ChatKit even is and the different little puzzle pieces we need to interconnect to actually leverage this. Whether this is going to be in a website, web app, or alternatively your software. And if you're brand new to this series on this playlist, we built out a YouTube bot where essentially we can put in any YouTube link and get information out of it. Now, this specific video was me developing on the back of a motorcycle in Changangu, Bali. This is no joke, y'all. We got our nice little widget here. Nice little thumbnail, nice little title. To see that video, just check out my channel

[01:01] here and watch me quite literally code an app on the back of a motorcycle. I went ahead and put on this nice little whiteboard here the relevant puzzle pieces that we need to care about to do this. So, the first one is the value, right? So, the OpenAI agent workflow. Chances are, if you're clicking on this video, you've already set this up. Now, you're like, Corbin, how the heck do I actually use this? So, we're good here. We've done videos on this. MCP, Zapier, everything we love. This gets to the next one. So, I have a React app here, but in reality, we're just going to use any type of app. The steps and workflows you're going to see here can work with any type of app. So, whatever your tech stack is, your next question might be,

[01:32] Corbin, what is React? What is a tech stack? Well, one just asked Chad GBT what it is. Essentially, it's the different frameworks we use when building out our application or software. It's like the puzzle pieces. So, for example, if you like making a chocolate cake, that's your chocolate cake. If you like making a vanilla cake, that's your vanilla cake. The ingredients are different, but in the end, it's both cake. If that didn't make that much sense, don't worry. it'll make more sense later on this tutorial. So, in addition to the app, we're going to connect it to GitHub here. The reason we use GitHub is a ton of different reasons, but this is what's going to integrate really nicely with other softwares that are going to be needed

[02:03] for this to work effectively. Nice little bonus point about GitHub here is that in this tutorial, I'm going to open source the repository you see me use so you can use it for free and you're going to know how to basically you can take my code. You can download my code for free. So, make sure to leave a like right off the bat. After we do that, once we set this up together, the last thing is going to be the product or deployment. So, I'm going to use Verscell in today's video just so it could be fast. But in reality, this doesn't have to be Verscell, this could be Firebase, this could be AWS, this could be whatever your cloud provider is because essentially what we need to do for these

[02:33] open AI agents to even work is we need to provide a valid.com or a valid website link. So, it doesn't necessarily have to be.com, but just a valid website link for this to work. And this will make more sense. And to be honest with you all, some of you might have gotten to the point where you have created the app or software in local host and it's like not working and you're confused. Well, don't worry. This is going to be the major unlock you're looking for. So, let's go and do this. We have our workflow. What is the next step? The next step here is going to be the chatkit openai documentation. I'm going to leave this in the description down below so you can follow step by step if

[03:05] needed cuz some of you all like Corbin, I just want to read it. I'm going leave it in the description down below. You can check it out. What this documentation provides is a starter app. So, I'm going to click this. You in theory could either use the starter app from OpenAI or you could use my specialized version of this starter app, which both will be in the description down below. Regardless, don't make it difficult. This is the repository. What a repository is is just basically where we store all of our code. And when you say store all of your code, it's quite literally just in folders. Think of it like dragging a PDF into a folder. Well, guess what? This is just a code file. Next, go to whatever IDE you like,

[03:35] integrated development environment. For me, I'm going to be using Cursor today. What we'll do from here is we're going to simply clone this repo. What you can do is that when I provide the repository we're creating together in today's video is you can simply clone my repo. So don't worry about it. That'll be a very obvious link like hey clone my app or something like that for your chat UI. What I'm going to do here is simply click this. I'm going do SSH and I'm going to copy. You may need to do HTTPS if you haven't set up SSH. And then your next question might be well Corbin what the heck is SSH? What the heck are you

[04:05] doing right now? You should check out my other series on this channel. That specific series shows you how to build out a software from complete scratch. I'll literally just title it like how to build a software playlist. Yash 3 hours long, but the episode you're looking for is episode two here of how to get your app ready for development, which goes over the implications of what GitHub is and how to connect GitHub. This is just fundamental stuff you need to learn and know for now. Assuming that you already have a connection to your local computer, I'm going to copy this and I'm going to simply clone repo and paste this URL. Once you do that, it wants to put the code somewhere. So, I'm going to hit new folder here. I'm going call it

[04:36] agent kit. Create. And I'm going to say select repository destination. It's going to quite literally download the code. Open a new window. Once we do that, we now have our nice little starter app. Now, the reason I'm doing this, and you're going to be downloading my code here from my starter app, is because get this to work in a nice little vanilla environment like this, so that when you take the steps and logic you're about to see right now to your real software or web app, or whatever you're creating, you at least have a working product that you can reference. I would not suggest you take the working software or web app that you currently

[05:06] have and trying to integrate checkit right away. Just get it working on a separate project. Once you get it working on a separate project, apply it. Okay, cool. So, what we're going to do here is very, very simple. Essentially, we have a couple files that we need to care about. The example, this is where we're going to put our OpenAI API key and then the chat kit workflow ID. OpenAI API key is pretty self-explanatory. To get your API key, simply come into the dev portal, go to API keys. Then you're going to go to the top right and hit create new secret key. Once you do that, simply name the key. I'm going to call mine burner because I'm deleting it. I'm going to say all

[05:37] create secret key. Once you create your secret key, it should start with sk. Copy it. Go ahead. Try to steal this key. I'm deleting it. Then we're simply going to come over here and paste. First step is done. Nice. Next, we need our workflow ID. How do we find that? Go to the relevant workflow that you want to integrate. So for me, it's going to be YouTube chatbot video. I'm going to come up here to code. Very important step before I dive to this is make sure to deploy it and have a published version. If you try to do this and it's not deployed, you won't have the ability to hit code. So there's going to be two things you notice here. One is going to be the workflow ID. So this is going to

[06:07] be the actual specific actions that you set up. So for us, it was getting that YouTube video, asking a question, and then having the widget show up in the UI UI user interface, essentially the front end. The next very important thing that is probably causing a lot of your errors and why you clicked on this video is allowing domains. And how do we do this? There's two things that is fundamentally frustrating about this part. The first thing that's frustrating about this part, if you're familiar with development workflow, you're familiar with local host. And if you're not, don't worry. We're going to get into that pretty soon here. You can't add a local host URL here. It just won't work. You're still going to get errors. So,

[06:37] I'm going to show you how to get around that. Second thing, when you add the URL here, this option is going to disappear for all workflows. This is annoying because if you want to provide a different link, how do we do it, Corbin? Well, I went ahead and took the extra 10 minutes just to find exactly where it's found in the settings. So, I'll show you how to add additional URLs once you add your initial URL. Lastly, what does this even mean? Why are we even adding a URL? Like, is Chad GBT like I just want to check out your website? No, no, no, no. This is for security reasons. This is so that when we provide this code, OpenAI servers is identifying, hey,

[07:08] w.corbin.com. This is a viable area where we can allow them to use this underlying users API key and workflow. If they didn't put this kind of security feature here, this would mean that anyone could use your workflow without the allowed domain. So, it's annoying, but it's a necessary step in software development. This nuance understanding this at a deeper level, which is fundamentally important. Check out that how to build software playlist description down below. First, let's just get our workflow ID here. So, we're going to copy this. We're going to paste it here. Nice. Next, we need the allowed

[07:38] domain. But first off, we need a domain. So, we're going to do that. In order to do the domain here, I'm just going to do a cursor chat to make this simple for everyone so you don't just see me doing a bunch of commands. You get lost and no one has fun. We're going to make it so we can just completely have AI set this up for us. In today's video, we're going to set it up with Versell. And essentially what Verscell allows us to do is get a really fast and easy domain link that anyone can access and therefore Chad GBT and OpenAI can access. In theory, if you were going to actually deploy to a real web app or software or whatever your backend infrastructure is, maybe you already

[08:08] have a domain that's available, so you're all good. But alternatively, if you haven't set that up yet, I would encourage Firebase, which parlays to that series again, which I show you how to set up Firebase. Regardless, here we go. So, I'm going to go ahead and turn on browser mode here, and I'm going to say, okay, here is the chatkit UI documentation semicolon. Go to the description down below. Grab the relevant link here, and I'm going paste it. Once you do that, we're going to say, set it up so we can deploy to Versell. And that's all I need to do. If you're following step by step along with me right now, some tests might feel a

[08:39] little skipped over because you may not have a Verscell account yet. So therefore, just create a Verscell account. Not that big of a deal. It's free. Free to deploy. If you already have a live website link and you're like Corbin, I don't need this part. Just skip back here and just add your domain. This is for everyone that just really wants to test this out and have a fast deployment method that is free. Set it up so we can deploy to Verscell. Call the app agent kit. Amazing. Enter. And we're going to let this proceed here. What it's going to do is simply go to that relevant API documentation to get context on chatkit and how to integrate it into the front end. In addition, what's incurring here is that it's going

[09:11] to create a connection between our local computer and versel. And in addition here, we'll create a connection to GitHub, which is another fancy way of me essentially saying that this local code found on our computer is going to be now in the cloud. What I mean by that is when I say local code, if your computer was going to burn in a fire, all your code's lost. then give it like a Microsoft Word doc. If you didn't have that in the cloud, that would mean that that computer that has that Microsoft Word doc, if your computer was destroyed, it would be deleted as well. I'm going to hit accept here for the get

[09:42] ignore confirm edits here. I'm assuming that it's going to be heading the env file here, which it should be pretty soon here. It might be renaming this too. Okay, so I'm going have to rename this as well. If you don't know what a get ignore is, this is going to be the files that are ignored when we push to GitHub here pretty soon. So, first off, I'm going to say keep all here. The next thing I'm going to do is I'm going to add, you know what? We need to add this as well. Although it might already do that with the asterisk, but just to be safe. You don't understand what I'm doing. Don't worry. It'll make sense pretty soon. Here, the app is fully configured and ready to deploy to Verscell. The check integration is

[10:13] already set up and will work once you provide the required environment variables. Now, you might be asking yourself, what is an environment variable? That is what we set up here. This is an environment variable. This is an environment variable. Why is it that for some reason, Corbin, when I try to deploy stuff, it always freaks out when I have these kind of high-risk variables? And why does it want it to set it up as an environment variable? Well, that's due to the fact that the way this actually reads it in the code is env.openAI API key. If I come up here to find it, go like this right here. You

[10:43] will notice it will render with this right here. That is why anytime you use AI in coding, it is always encouraged never to put the hard fixed text of your keys so that it isn't public facing when you deploy to the cloud. This is a long way of me saying that once this is a live website link, if you were to put this hard text into your code file, someone could essentially grab your key from the source code. Don't like that. Now, before we do this, we're going to actually connect this to GitHub. So, what I'm going to do here so you can watch and follow along. So, maybe you want to create your own little starter app repository once you download my code. Just come up here to repo and come

[11:15] over here to new and we're going to call it a repository name easy OpenAI check it app and then essentially I'll just grab the same description here. Description is not necessary just for how we identify it. And we're going to hit create repository. From here I'm simply going to do it the SSH method as I notated. Check out the playlist if you want to set up that way. But the SSH method even means is that I don't have to go through those annoying errors when you're dealing with code in AI where it says, "Hey, you don't have access to GitHub. Hey, you don't have access to this." No, no, no. the SSH key is on your computer, which means I can speak to the cloud in GitHub and never have an error. Basically, just download the code

[11:45] and connect your account. From here, I'm going to say, okay, connect this repository. Repository is another way of me saying all this code to this GitHub repo. Repo is a shorthand of how to say repository. If you've never coded before and you're watching this tutorial and it's either confusing or extremely frustrating, please take a note that what you're seeing right now is complex work. This isn't supposed to be like me just creating pottery and I just want to create a ball. This is software development. So a lot of this stuff is built off layers and layers of foundational knowledge. If you want

[12:17] encouragement of how do you approach this and not get frustrated, I would highly encourage you watch my videos on GitHub. GitHub is the missing puzzle piece that you probably need to learn more about so all this becomes extremely easy. I preface my videos a lot like that because trust me y'all in the comments a lot of people get frustrated. So, I'm really trying to help y'all, you know, start at the bare bones here, you know. So, once I do that, if I come over here and reload, we should see a repository connected. And there we go. With that push, you can see it right here. Now, one thing I want to note and why you probably want to download my repository comparative to OpenAI's is

[12:48] there's little things that their repository doesn't take into account. For example, the example, we want to call that.local. And that's because of the fact that you're going to get a bunch of errors that are extremely frustrating. essentially saying that we can't push this because secrets are exposed. You just got to name it correctly. So, I named it correctly for y'all. But to be clear, when you actually download my repository, this file won't show up. And the reason it won't show up is because of the fact that we're ignoring it in the git ignore. Therefore, in order to create it, rightclick new file. Simply do.local

[13:18] and you'll be good to go. So, now that we've created a repository and we've connected into the cloud, everything from here and out, I don't have to worry cuz I can always roll back to the safe checkpoint. So, what I'm going to do is this. We're going to say okay deploy app to versel. And what we're doing here is we're grabbing that relevant link that we need for the workflow. So once it pushes to versel prerequisite, you need a versell account free. You're going to simply go to where it creates. So I'm going click this. In addition, what's nice about using cursor AI here is that it will install the relevant dependencies for even to do Versell commands. On top of that, if you don't

[13:49] use cursor AI, you can use any chatbot for this. So that's just a caveat for this entire tutorial. You don't even need to use a chatbot within the IDE. You can use chat gbt cursor. You could use Claude, you could use Gemini, whatever it may be. Follow the same steps, follow the same lines. Over here, what you'll notice is that we have a successful deployment. What we need to add is our environment variables here. So, I'm going to go to settings. In settings, go to the tab that says environment variables. So, what you'll notice is that sometimes it'll say no environment variables added. Alternatively, sometimes the IDE is smart enough to push them for you, but in today's example, it wasn't. So, we're

[14:20] going to add them. In order to add them, I'm going to use OpenAI API key how it's named here. So, I'm going to copy that. You also notice is that essentially we're just grabbing them how they're named here as well in your env.local. I'm going to paste it here and then the value will be our API key which we've already identified here. So I'm going to copy this. I will paste add another and this will be the workflow ID. Copy this. Paste. The naming is fundamentally extremely important. If you do not name open AI API key exactly how it's named here here it's all going to break. So keep that in mind. So I'm going to go and copy this workflow ID here. Paste.

[14:51] Save. One thing I want to make sure is that I'm going to hit edit here and I'm going to do all environments. I could go on an absolute tangent right now about what is preview, what is production, what is development. We'll save that for another video or I encourage you again to check out that three-hour playlist showing you how to build a software from scratch to have the implications of what that even means. For now, let's just get this working. So, we're going to say all environments for this and all environments for this. What you'll notice is that when you update an environment variable, we're going to have to redeploy. So, I'm going redeploy here. Redeploy. The next thing we're going to do while it's deploying, and

[15:22] what deploying means essentially is that when all the code's good to go, it looks amazing. Deploying it is taking it to the actual live website link that anyone can access that fresh new code. So, for example, you have a landing page that just says apples on your local computer. You haven't deployed it yet. Therefore, if you go to that same landing page on the internet, it doesn't say apples yet. When you hit deploy, then apples will reflect in the live website link. So, while this is doing this, our live website link is this. OpenAI check it starter kit app for sale.app. Nice. I'm going to copy the link up here. So, go ahead and copy the link. I know this

[15:53] says an error. We're going to fix it. We're going to go to agent builder. We're going to say add domain. We're going to paste this domain. Generate key. Copy this key. Next, in your chat, this is what we're going to say. We're going to put the prompt. This is the domain key. Then, we're going to give the link. The link is up here again. So, same exact link. Paste. Deploy relevant information to Versell. Hit enter. So, while we let that generate, one thing that is extremely frustrating about the workflow is that if you hit code again and you're like, Corbin, I want to add another domain, this option disappears. So, let me show you how you find it. In order to find it, come up here to

[16:23] settings. You are then going to come down to security and then right here and then hit add domain. Follow the same steps. I don't know why this is hidden. I don't know why they don't give the option in the workflow again, but now you know how to add extra domains if necessary for whatever your workflow is. So, add domain and boom. So, with that done, I can keep reloading here. It's going to load the assistant. It should be working, but we'll find out pretty soon here. Let me show you some real quick debugging tips. First thing, notice because we're working in the front end. If you get errors or like you try to load this and you're like Corbin, like this is just cooked. Rightclick,

[16:54] inspect, come over here, hit console, and this is where relevant logs could show of like air blah blah blah blah blah. This is where you would copy those errors and paste it in your AI chat essentially to get the information that you would need. Now, to be clear, that is how you get access to console logs in Google Chrome. To get accessing console logs in all your other browsers, I would encourage you just to ask a chatbot, hey, how do I get console logs in Safari? Because Safari is definitely different comparative to Google Chrome when it comes to getting console logs. What a console log is, if you're wondering, console logs are ways for us

[17:25] to have the code communicate to us in just regular English. So essentially, if an error occurs, it'll be able to print it out and give us the ability to see that, hey, this isn't loading because of XYZ reason. To be honest with you, we've gotten to the point now with AI where you don't even need even know the reason or need even care. Simply just copy it, put it in AI chat, and it will know instantly what to do to fix your issue. But y'all, I think we've successfully created an embedded chat kit UI. Let's find out. So, I'm going to go ahead and say, give me the best part from this video, YouTube link. As you remember earlier in this series, you can check

[17:55] out that playlist. We created a YouTube bot. Therefore, we can ask anything we would ever want from a YouTube video. Provide the link and our entire workflow gets going. We get a custom response based off the data found in that video of what's the best part of that video. And then on top of that, we've created a custom widget together in an earlier video. I'm saying video a lot. Video video. But we created a custom widget that makes the underlying thumbnail, the title, and the duration reflect in a user interface that looks very pretty. So, let's see if this works. The end product here should be that same Changu

[18:26] Bali video where I develop an app on the back of a motorcycle. And when you look at that, the bot actually went the extra 10 yards here and gave us the exact moment on time stamp. And essentially the moment is the app finally renders at Fins and he celebrates. We've successfully created a 3D motorcycle game in Bali on a motorcycle. Okay, funny enough, I spoiled it for y'all, but that is really cool. And boom, it even popped up with the thumbnail, the title, and duration. I like it. Now, before you click off, let me show you the last couple things here that could be very useful in your journey and trying to build this. First one being check out the school community here.

[18:57] Completely free to join description down below. It's literally the one titled join free community. If you run into errors here, you need questions, throw it up here. This is essentially just a Reddit forum where I centralize a lot of my teachings over the past two and a half years. People ask questions, I answer, other people in the community answer. Super cool. Another series I wanted to shout out as well is my series on not necessarily building out a software, but building out a website and the implications of how to build out a website when it comes to security, good user interface, and best practices. So, I'll leave this in the description down

[19:27] below. Something along the lines of let's just build a website and the playlist. For anyone curious on the website we built in that series, it's this one right here. And you can find it at buildersconlock.com. And then for anyone curious on the software playlist, the software we created, it is tubestamp.com. Essentially, you provide a YouTube link here. You can choose the language and generate timestamps for any video found. That just about does it. We've successfully integrated Chatkit UI into your web app or software. Make sure to stay tuned and make sure you subscribe on this channel as I'm going to do more videos on Agent Builder. Specifically, I'm going to look at making a video that

[19:58] is going to be file search, PDFs, image analysis, automations. In addition, there's a bunch of other cool stuff I do on this channel here. One really [music] cool thing that maybe only some of you will care about is I am creating Minecraft from complete scratch. zero lines of code to straight up Minecraft. And I'm live streaming the entire thing. Right now, it's day three, so I don't know by the time you watch this video what day we're going to be on, but every single day, YouTube, Twitch, X, check me out. But as you already know with these style videos, I'll see you in the next Wow, you actually found an OpenAI agent builder video that actually shows you

[20:28] how to use it outside of the builder video. Nice.