How To Upgrade OpenAI Widgets (steal my custom templates)
Let's learn how to use OpenAI Agent Builder📅 2025-10-19
Transcript
[00:00] Let's learn the most effective way we can start designing widgets for the OpenAI agent builder. So, not only in this video are you going to learn how to design these widgets, but as you can see with OpenAI's widgets here, there's not a lot. So, I went ahead and created 10 different custom widgets for y'all to automatically add to your project. Whether it's a stock market watch list, a task to-do list, a recipe card, don't worry, we're going to check these all out and see how we can leverage them. Welcome back. In today's video, I'm going to be giving you 10 free custom widgets. On top of that, you're going to learn fundamentally what all this even means when it comes to components,
[00:32] icons, everything. And as you know with these style videos, everything I reference will be in the description down below, very clearly labeled something along the lines of like steal my custom widgets. It should be fun. So, first let me show you how to use these templates that I built out for y'all. Once you go to that link in the description down below, something along the lines of OpenAI widget free templates. Go to the templates folder here. What you'll notice is that I categorized them for y'all. So, we got engagement, financial, lifestyle. Let's just say, for example, you like financial, you go to stock watch list, and this is how you use it. First off,
[01:03] in the data.json, this is going to be the data that shows up in the widget. This will make more sense. Don't worry. We're going to come back to our widget builder. I'm going to select start blank. And the data JSON goes here. So, I'll paste that. Nice. And then the widget structure. You simply copy or copy up here. Copy all the text right here. Paste. And boom. We have a custom widget I built out for y'all. And there's 10 of these. So that's just how you leverage the widgets that I provided you. Simple copy and paste. Pretty nice. I'm going to give you a prompt right now as well that you can leverage in order for you to build widgets that maybe don't show up in the different templates
[01:35] I made here. One thing I want to identify real quick is that sometimes you're going to get very annoying things in the widget builder where essentially it gives you this red squiggly line. We don't like that. What you need to know is that this widget builder, even though they don't have a clear beta sign, and when I say beta, I mean like this is not full-blown like bug proof, like there's going to be glitches. So, when you use the different templates I show you or when you build in the widget builder here, you may run into errors that is not your fault. This needs to be said within this community because a lot of
[02:06] the times people are under the preference that, oh, because OpenAI made it, it must be bulletproof. There's no way there's errors. Well, trust me, there's errors. If you run into errors, you can check out the school community here or just leave in the comment what kind of area you're running into. But no, there is errors that aren't really errors. It's actually OpenAI's fault. So, that's how you navigate the templates I provide. If you want to check out other stuff, I always leave a bunch of information in the readmes on how to use and leverage widgets. But obviously, you're watching this so you're more of a visual learner. So,
[02:37] you're like, Corbin, just show me. I have a nice little prompt I made, y'all. Widget builder prompt. Click this. What this allows you to do essentially is use this plug-and-play template here. What you want to note is that a widget itself, all it is is this is a front-end element. What I mean by that is that this will obviously show up in your chat. Nice, cool, sweet. But this can't do actions functionally. There's no button. There's no like Python associated, no script we can run here. This is purely for data to be shown in a nice way. That's why it's called a user
[03:08] interface element. Therefore, when building out your templates, all that's really needed to build out a good widget is what kind of user interface you want it to look like. Apple, Spotify, iTunes, and what kind of data you want shown in it. The song I'm currently playing, stuff of this nature. So, I come over here. That's why I made this prompt for y'all just specific like that. The data you want displayed and the UI style preference. All you do is copy this, come over to widget builder, and paste. Once you paste it here, and to be honest
[03:40] with you'all, you might want to paste this in notes and then come back over here because obviously it's not that big. But what you'll do here is simply put in your information with all these little brackets here and create your own. And for example, I created a user profile widget right here. So I can copy this, paste it, and notice I'm saying user profile information, email, profile picture. Like this is the data I want shown in the widget. And I simply hit enter, and this will generate our nice little UI element in our chat. As always, this is in the description down below. Make sure to give a nice little star. Helps me out here. Follow me on
[04:11] GitHub. Free source code. Who doesn't live free code? I love free code. Everyone gets free code for me. Free code Corbin. Freeode Corbin. Put in the comments. And if you love free code, make sure to follow me on X as they get it all first. I made a cla skill that allows you to copy all my code and make your own claw AI skill. X description down below. And there we go with that plugandplay prompt. We have dark UI, light UI, and it all works. So, we created a widget. It looks cool. I've done an entire series on the OpenAI agent builder. So, I'll go ahead and real quickly show you how to download this and add it. This is pretty
[04:42] self-explanatory up to this point, but let me show you real quick. So, once we get it done, it looks good. As I noted before, we're dealing with a beta product here. So, you might get those annoying little squiggly lines. I might be like, Corbin, you can't download this. Well, in reality, you can. Just reload the page. And to be honest, you all take it one step further. If you're utilizing one of my templates, you're running into issues, your first option is simply just put in that code here. like actually just paste it in the widget builder or alternatively use my pre-made prompt. Regardless, you download the widget. The widget's been downloaded. You simply just go to one of
[05:13] your workflows, go to an agent, and then be like, you know what? I don't want this in text. I don't want this in JSON. Give me that check kit UI. Click add widget. Click upload. The underlying file is going to be a widget. You're going to see it right there, and you're solid. Real quick, major warning though. When using a output format of a widget, you have to tell the underlying instructions exactly the data points to map to that underlying widget, eg the profile pick, the profile name, the profile email. If you want a more in-depth video on that, just check out my playlist here. It's like a 20-minute long video that I go over a very complex
[05:44] workflow. Don't worry, we're not just getting the weather now. We're actually doing a real workflow that I show you in another video on my channel here. So, there you go. Fundamentally, you get 10 free custom templates. Now, you know how to use a pre-made prompt. And on top of that, for troubleshooting errors, I would suggest you either reload the page. That's a nice little fast one. Or alternatively, just create the widget again and get it until those little red squiggly lines go away. This widget builder is not 100% foolproof. You will get errors that you don't actually deserve. Trust me. Last little note here for everyone that stayed for this long.
[06:15] I got something pretty interesting for y'all. Big secret here, and that is make sure to check out the free AI community in the description down below. Think of this as a Reddit community where we help each other out. We're building cool products. We do this because we build for fun type of community. So without further ado with these style of videos, I'll see you in the next. Why is it every single time I try to build out a custom widget, I get those little red squiggly lines causing an error, but I shouldn't get the error and it's kind of very annoying. Video widgets open eye. Nice. Cool. Sweet.