OpenUI: Simply Imagine Your Interface, and See It Rendered in Real-Time

--- type: transcript date: 2024-05-11 youtube_id: tMWxJuV2BR0 --- # Transcript: OpenUI: Simply Imagine Your Interface, and See It Rendered in Real-Time in this video I'm going to be showing you open UI which is a really impressive open source project that allows you to essentially have something analogous to the vo product that the team over at versel put out if I just demonstrate vo for a moment here and I say a landing page for a s company and essentially what it's doing is we're asking for the llm to respond back with HTML elements that give us Tailwind classes as you can see here we have these nice different options here and you're able to take this you can look at the code it gives you a couple different options so say if you want to grab the uh jsx and the Styles you can see it all here and then the other nice thing with this is there is also the option where you can just add it to a project by running this npx command this is definitely more of a full featured version of what I'm about to show you but nevertheless this is incredibly impressive first I want to shout out the creator of the project which is Chris Van Pelt I encourage you to go over to the GitHub repository and start the repo and the nice thing with this project is there is also a demo where you can just go ahead and interact with this in this video I'm not going to be showing you how to set it up locally but it is incredibly straightforward you get clone the repository you go within the directory you install the packages that you need you add in an open AI key and then you go ahead and you run it and you'll be able to have this all locally on your machine to get started or to at least try this out you can go ahead and just check out the demo here so I'm going to be showing you a little bit what this does and what you can do with it off the bat we have history on the left hand side here if you want to look at a couple different examples here we just have a simple newsletter signup form as well as a contact form now the nice thing with this so let's just pick one of these examples if I go ahead and select an element and change something about it what this allows you to do is to select those Dom elements here you can click the button you can click the input here and if you set say I want the placeholder text to read hello what's happening here is it's going to rerender this essentially in an iframe and what it allows you to do is instead of having to write out all this HTML which can often take a little bit of time especially as you're adding in those Tailwind classes you can just do this with natural language all right so I just want to demonstrate a couple different features here which make this really neat and interesting to try out it gives you the ability where you put in the screenshot of a UI and then we can just go ahead and submit that I'm just going to send in that photo and hope it returns something akin to that Google page for us as we see here it's starting to load out all of those different pieces that I had within the picture it has some of the links that I use commonly like chat GPT and perplexity and it gives me all of the different HTML here so if I just go over to jsx we can see all of those Tailwind classes and whatnot to create the p page really nice it gives you the ability to see what it looks like on mobile so if I want more margin on mobile or the input area we can submit that and then as it starts to come in this is going to be from what I understand rendering an iframe and that's going to be how this is actually created so we're going to be able to see as it starts to generate all of that HTML out that it's streaming back that it's going to be hopefully adding that margin for us if we go back down to the mobile view there we go we have that margin now that input isn't touching the corners now one thing to note with this example that I'm showing you right now is this is using the GPD 4 model which is going to be considerably slower than the GPD 3.5 turbo model if you are using the vision capability just know that the inference is going to be a bit slower that's why you see in this example it took a little bit of time but if I just go back and I toggle this back to GPT 3.5 and I up updated and let's just start an example from scratch if I say generate me a SAS landing page and I submit that we can see it's generating that for our SAS company it's going ahead building out some examples for us and again it's we can see that there's some things that just don't look right we can go ahead and further edit that navigation right we could specify on mobile we want this whole area to give this hamburger menu on mobile we submit that and then as soon as that starts to stream out hopefully we'll get our hamburger menu and I don't see it coming back in this example let's try one more time and let's say give these more space mobile obviously this is something that's a work in progress you can't expect something like this to be perfect it's a an open source project from what I understand is one person that built this just think about that how impressive this is as a solo developer to be able to build something like this that is freely available to all of us there's a couple different examples here that you can trigger if we run some of these preset examples here see okay now we have an accordion section that's being built out here you can see the mobile view you can see the tablet View and the desktop view I can tell that this is a web developer that created this because this is something as web developers that we often do is we go back and forth across these different sizes and make sure that it works across all the different devices for something like this you can go ahead and toggle that on or off if you like now the other nice thing is you can actually share these as well if you want to share this to this instance of the demo here you can go ahead show someone an example of what you're working on you can also download the code here so it will give you all of that HTML for whatever you created and then you can also copy it so it's very straightforward to use right you can just click around here play around with it and it just more or less works so if you want to try out gp4 you can go ahead tockle that on and then the other nice thing is you have the option of both jsx or HTML it's nice you can just come in here if you're building a project within nextjs or react or whatever you can go ahead grab that here or alternatively do HTML if you also want to convert these to different languages there's even that ability here right you can go ahead do that if you'd like and then it will swap these out so if I just demonstrate that here and you want to generate a felt component it's going to make another API request to generate and convert what that had already made another nice feature there's definitely a lot to learn from this project if you're interested in building something like this out and it's just really well built I want to commend Chris on what he's built here it's a really impressive example on a different thing that we can build with these llm so we obviously see a lot of chat Bots and stuff like this but being able to have a tool like this that you can go ahead and just fork and create your own version of it or whatever you want to do it's really great it's a good open source resource I'd encourage you check this out maybe play around with it see if there's other features that you can play around with I'd be curious if you ahead and set this up with other models like maybe croc or if you set it up with something like Claud to see the different results like this but it's a really interesting idea here right because you can definitely imagine other applications that could benefit from something like this maybe something like a website builder or if there's something along those lines where you're actually able to maybe not just export these components that you're copy and pasting but maybe something that will actually build and refine things in a production system just a thought maybe maybe not but I just wanted to overall give you a quick overview of this new project it's a really great project go check it out that's it for this one I commend Chris for his amazing work on this it's definitely a tool that I'm going to be playing around with I'm going to take a look at how he set this up it's just a really fun great and impressive tool kudos to Chris and his work go ahead St the REO uh follow him on GitHub follow him on Twitter follow him on all the channels otherwise that's it for this video if you found this video useful please like comment share and subscribe and otherwise until the next one