FREE: Open UI AI Component Generator Open Source🤖👨‍💻 v0.dev Alternative (OpenAI, Anthropic, Ollama)

What's going on everybody Josh pook here and in today's video we're going to be looking at open UI this is an AI tool that allows you to build UI components right in the interface you can prompt it you can chat with it sort of like artifacts that Claude has except it's a little bit different I'm going to show you to self-host this and use it with uh open AI you can use it with AMA you can use it with Gro go

Here mistol anthropic whatever the case may be let's dive right into it [Music] all right guys so links for all this will be in the description as always but we have open UI here so basically um it just says opening UI aims to make the process fun fast and flexible for building UI components and um yeah so open AI lets you describe UI with using your imagination then see it rendered live you can ask for changes and convert HTML to react

Felt uh web components Etc like v v z but oh like um so we check out this so this is a tool v0 it's a closed source and it's similar kind of but it actually is has pricing to it so and they limit you with only 200 credits a month for the free version $5,000 for the $20 a month version version so this is essentially kind of an alternative to V zero which is buy verell so pretty cool um and we'll

Get into showing you how to set it up in just a second but I really like the UI of it I like the interface um and even if before you want to install it you want to test it out you can actually go to a live demo on their website so if we go open that up you'll see uh this is it right here now you will have to log in with your GitHub account so just log in to that's to

Enforce usage quotas an account is required so you just log in and then you actually be able to use it so I'm going to show you a self host it and there's different configurations you can do and you can use the different API keys and the docs will be here if you have any questions let me know but um we're going to install it using the docker method this is their preferred method this is a pretty easy method to do and

Um you also could do it with python from The Source or from Source python all right and yeah you can see uh different um things here basically going over different uh different models and different install methods Etc but to get started we're just going to for one if you're on Mac or Linux you can export your a anthropic or open AI API key all right um so you would just run this command with your API key here now for Windows it's

A bit different it's um set X so I'll just show you I'll show you what that looks like all right so there's like a couple different ways you could do it but essentially what you would do is just go to your command prompt or command line and just run set X open AI uh and then in quotation marks your API key here this for Windows all right that will set up permanently as an environment variable all right um You could also

Just go search up environment variables um environment variables and and change that there add it as a path or as as a environment variable okay so you can do that for both of those keys and then simply put you're just going to run this Docker Command right here open UI putting it to Port 7878 you need to change that if you need to forward it to a different port you could just change the one on the left to whatever Port you

Want and then you can see right here this is yeah this is the command so you would just copy this and then you would go and go to your command line and run this now I'm not going to run it because as you can see I'm running it right here okay so once you actually run it you will have it set up like this so as you can see it's uh it's a nice interface I like it it's you know dark

Mode which we always want um and yeah you can see the settings here you can change it right now I just have the open AI but we can do GPT 40 you can see the different settings here so supports Vision so we attempt to detect detect if the model has Vision capabilities you can override this if you're uh you're sure it does and then greetings so this is the uh system prompt so you could change this this is their default one

You could improve upon this if you think you actually if you could but let's just I'm not going to read the whole thing but greetings Tailwind you've mastered the art of front end design using Tailwind Etc desktop mobile design guidelines use placeholder.png [Music] CN or whatever you can do that um and yeah I mean s CN inspired stuff to in the in this design prompt uh implementation rules HTML Etc and then temperature so you could go ahead play with that if

Needed uh UI of course we're keeping that dark mode and then language there so once you do that um you can you have a new UI button up here and that's pretty much it you have your chats here which is similar to like how um like kind of design how open AI looks like or really any like chat model basically any gooey we usually always see like the chats here uh the search bar here can upload photos um that's something I

Haven't actually tried yet like it's actually maybe a good idea let's just um maybe get like a go trello.com we get a photo from there save image yeah I guess this is more of a calendar one we're just going to grab please create a calendar UI like this this is my first time trying the image one wow okay this is pretty good like pretty decent I mean it's definitely not perfect um can see here I could just say make sure you

Have all the correct dates slash number of days for for each month okay so as you can see we can actually talk to it and tell it to improve so we got that now it's adding more days and it's probably not going to be perfect but this is like pretty cool starting point so now March has more days and okay so um let's do make add a toggle for light mode and dark mode in the top right okay so now we

Have this toggle even with a cool little image here so that's actually really awesome wow so dark mode now we could say like make sure the the text is white there for the numbers when we toggle dark mode obviously I'm not making this perfect here let's say add a button with a pop up form on click to add events to the calendar okay so I mean you could really go ahead and push the limits on some of these things and test

It out um so now it's generating and it's really nice that you can actually see it and chat to it um um and it's what's even cool too is you can actually filter on uh you can do tablet mode um mobile mode so it's like responsive so that's actually really cool out of box so here we have sync to personal calendar I don't know oh here add event wow look at that we can add an event test this is actually pretty

Awesome like this actually really cool because it like already has like the icons and everything like um I don't know I'm from my knowledge from like at least me playing around like I I think this has some stuff that Claud Sonic can't do or like the the uh artifacts just can't do natively but I could maybe be a bit wrong maybe maybe if you give it specific prompts like system prompt I don't know but um either way for UI components this

Is a spefic specific dedicated tool that you can run locally and you can even run with open models like oama um you can use this with pretty much any model right um You just have to you know change up the config but um yeah I think this is really cool like look like look how quickly I just put this together I took a screenshot not perfect by any means but that's what we can chat continue on for and um and then

Over here like I was yeah so here you can get like the HTML right here you can see the source code right here and um can see HTML jsx okay I think I just messed something up I think I move some code around by accident but you get the point you could also just download the HTML uh what's this share this version toggle version history oh my gosh this is really cool that you can toggle version history of the chat so

All in all I think this is a really really cool tool I'm actually really excited to use this more I mean it's not perfect by any means but I mean if you up right now this is GPT 40 I mean if we put CLA Sonet 3.5 of course we're using API tokens but um I think you can get some very powerful stuff and uh mobile responsive already at a box and um I mean yeah you could customize the the system prom

Play around with it and even make it more custom for the specific app You're Building whether it's xjs whether it's um whatever the case may be felt whatever right so other than that guys hope you got some value from this video that is open UI um yeah if you're new to the channel and you got some value here make sure to smash that subscribe button smash that like button we just actually surpassed uh yesterday 4,000 subscribers so that's a pretty big

Milestone on road to 10K I guess road to 5K first so let's um you know get there but uh right now we're at like 4,068 whatever so appreciate all the new uh support you know I'm glad that you know a lot of you are getting some value here from the channel we upload videos every single day on AI automation business growth uh coding development um really any like the newest Cutting Edge technology when it comes to Ai and business growth and

Marketing and sales and anything to even like make money stuff make money online all that stuff we're covering it we're going to cover more CRM stuff go high level um business strategies Etc you can expect a diverse amount of different content types and and videos coming soon so uh yeah so other than that guys um yeah thanks for the support if you're new here smash that like button smash that subscribe button let me know in your comments in the comments down

Below if you have any questions or if you have any suggestions of future videos and then also too guys if you haven't already joined our free community stri community.com it's 100% free you just should click the link below join our free Facebook group free Discord Channel you can get a bunch of value in there network with likeminded individuals as well as myself and also check out my book client acquisition code Link in the description down below if you want to get

Clients for your business using AI using uh prospecting methods paid ads Etc and then other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care