Build ENTIRE Frontends With ONE Prompt - OpenUI Tutorial

build me a signup form name email password sign up all within less than 8 seconds very impressive this is a new project called open UI where you could just describe the front end that you want and it builds it automatically it is completely open source really really impressive check this out so build me a signup form and it starts building dynamically there it goes name email password sign up all within less than 8 seconds very impressive but that's not it let's say we want something else I'm going to go ahead and click this button I'm going to hover over this and I'm going to say split this into separate first name and last name fields and there we go we have first name now last name email and password it is that simple I'm going to show you how to install this then I'm going to show you how to use it because it has a ton of awesome features so let's get into it all right this is the project open UI and I'll drop a link to the repository in the description below it has 65,000 stars on GitHub so a couple cool things about this one it is very easy to install I did not run into a single issue while installing it two it's completely open source and not only that but you can power it with local open source models with OA so very easy to use completely open source and free if you're using olama it also has a Docker image which makes it even easier but to be honest I didn't even need it all right the first thing we're going to do is clone the repository and to get this URL which you can just see right here I'll also drop it in the description below but go to the repository page click this green code button here's the URL click copy right there so now we just clone the repository just like so next we're going to CD into open ui/ backend and then we're going to spin up a new cond environment so condac create dnop UI python equal 3.10 and since I already have an environment it's going to ask me if I want to remove the existing one sure you won't see that though continue let it install everything it needs and then we're going to grab this little code right here so cond to activate open UI hit enter and now this environment is active cuz you can see it right there next we want to install all of the requirements so pip install dot that easy hit enter this just takes about a minute all right that's done next we're going to export our open AI API key and like I mentioned you can do this completely locally but I'll show you that after so we're going to do export open AI API key equals and then drop your open AI API key right there hit enter and at this point we're really done it's that easy so the last thing you're going to do is actually spin up the server so we're going to do python dmop UI hit enter and that'll spin up a URL that we can go to and actually play around with the project and it's done it worked perfectly so we're going to grab this URL right here copy it and then open it up in a new window and interestingly it saved the history of my previous Creations right here somehow so not sure how it did that it's probably just being cached somewhere but that's it so we have a lot of different options that we can go through now so first let me just create a very simple front-end application and this is all for front end it doesn't build the back end for you but there are plenty of projects that can do that so I'm going to say build me a login form I hit enter and it starts to build the code which you could see right there and you can actually see the front end being built in real time right there so there it is very simple but that's all we need so we have username password sign in now if you click this little button right here we can select any element on the page and specifically comment on it for changes that we want so for example I'll click this area and I'll say change this to be email instead of username and then hit enter and then it's going to rebuild it with that change all right and there we go and now I'm realizing one thing we're missing is if somebody needs to sign up if they don't already have an account so let's do that add a sign up button for people who don't already have an account okay and it's rebuilding once again sign in forgot password and there's the sign up button how easy is this this is so cool all right so we also have the ability to see it in different views so we have the desktop view we also have the iPad View and then we have the mobile view now this is obviously not very responsive and I haven't tested this so let's see if it works I'll just say make this responsive okay so it's definitely looking different maybe it's taking up the size of the window now so beautiful form then I click the tablet view it did seem to change size and there's the mobile view and again it changed size so all I said was make this responsive and it worked perfectly now it does have a toggle light mode dark mode which is nice I'm not going to click it though cuz I don't want to shine the bright light on your screen right now you can also view the chat history and all the changes step by step which is so cool then we also have different options we have HTML and jsx but you can also convert it to anything else you want such as react so let's just convert it to react and there it is now the code's in react and so you can actually convert it to all of these different front end Frameworks and I'm sure they'll be adding more soon they have a share button right here they have a download button so you can download the file and then you can also copy it right there now if we click into the settings right here we can see a few settings by the way everything I've been doing is GPT 3.5 turbo not even GPT 4 so it is really efficient and really high quality even without the most Cutting Edge model so if you click that you have two options GPT 3.5 and GPT 4 as well as as olama so all I had to do was have olama up and running it'll read which models we have available and then you could simply click it and that's it now it's running completely locally and for those of you who aren't familiar with olama I've done a bunch of tutorials on it I'll drop that in the description below and what's really cool is you can actually just drag a screenshot of a UI for it to recreate so I took a picture of the Google homepage I'm going to drag it onto here and let's see it also allows me to describe the screenshot you upload it but we don't need to do that so I'm just going to hit enter and hopefully it just recreates it like that so this is a little slower cuz it actually has to read the image okay there's the Google logo now one thing to keep in mind while this is loading up is the only open-source model that it currently supports that actually has image recognition is lava so if you want to do something like this you need to use lava all right there we go uh almost got it so let's change this so I'm going to click this little button right here click over here so change this to a microphone icon and a camera icon so it got that part wrong but that's okay let's just see all right so that time it did not actually change it interestingly enough so I'm going to try one thing I'm going to switch it over to GPT 4 update and now let's try it again so I'm going to select this whole little area once again I'm going to say change these buttons to a microphone icon and a camera icon and let's see if gp4 can do this better all right so it didn't work again it seems like maybe the image recognition part is working but not as well as just using the text generation let me show you some of the other things that I've created so here's a to-do list here's a user profile card and here we can see like social apps right there I have a date picker calculator and so on so it works incredibly well like surprisingly well and you can choose any element from a website or the entire website itself so let's try one more thing so I'm simply going to say a SAS pricing page let's see how it does and the cool thing is you can see it being built in real time which I really like like so gp4 is definitely a lot slower than GPT 3.5 turbo obviously so I switch it over to desktop mode and there we go so this is the basic plan let's see if it adds other plans and if it doesn't I can just tell it to looks like it's doing it already I didn't even need to prompt it to do so so if you're a non-developer and you want to build code now it is so easy you can build the front end as easily as I'm showing you here you can use projects like Devon pythagora and a bunch of other projects to build the back end I mean there is really no excuse if you wanted to build something to actually go and build it it's so easy now so I can see that the basic and Pro Plan and the Enterprise plan are all different sizes so I'm going to say make sure that the three plans are equal size and I also switched back to GPT 3.5 turbo for the sake of speed and I can already see it's much faster so I'm going to say make the width of each plan equal in size I'm trying to get each three of these plans to be equal WID let's see if this works all right there we go now they are all equal in size so I still see a little issue the get started button is not equal in all three so let's go ahead and try to fix that so I'm going to say make sure the get started buttons in each plan are aligned vertically all right and it worked I mean how incredible is this I am so excited about this project I'll drop all the links in the description below hopefully you play around with it and enjoy it and get some value out of it if you enjoyed this video please consider giving a like And subscribe and I'll see you in the next one

Channel: Matthew Berman

Views: 48,670

Keywords: ai coding, ai, coding assistant, openui, openai, chatgpt, llm, large language model, coding

Id: zzw2OSFw9xI

Length: 8min 59sec (539 seconds)

Published: Sat May 04 2024