FREE: Rapid Pages AI Open-Source UI Component Generator🤖 v0.dev & Open UI Alternative (Open AI)

What's going on guys Josh poock here and in today's video we're going to be looking at a free open-source alternative to tools like v0 by versel this tool is called rapid Pages build interfaces without coding AI assistant designer helps you build application interfaces using prompting you can build react components you can build landing pages whatever the case may be using open AI you could even probably hook up a local model if you change around a few things let's dive right into

[Music] it all right guys so I'm going to show you how you can self Host this very simple um GitHub will be in the link down below so you can go through check it out they have a Discord as well you can read the tutorial but I'm going to show you exactly how I did it um also too guys there is a uh a cloud version too you could check out and I believe it's free to use I think you there

May be a credit system just because it's based upon um Generations using their API keys so if you run out of credits it's about 20 bucks a month but you get 250 prompt credits for free three image prompts Etc so Tailwind CSS Shad CN uh UI support pretty cool you can check out their uh Cloud version 2 I'll leave a link down below if you want to test it out before you self host it now how do you go about self

Hosting it well first things first you're going to get clone this repo so get clone it into the folder of your choice all right so get clone and then you're going to want to CD so change directory into the rapid Pages folder okay next what you're going to do is let me just pull up my VSS code over here okay so you are going to um open this up in the editor of your choice for me I'm just using vs code

Um so if you are in the folder uh if you're in your terminal and you're in the folder that you just ceded into you could just use the command which is code space Dot and that's going to open vs code if you have that installed already now a few basic things just to quickly cover you'll need and uh nodejs installed um because yeah it's using node and then what you're going to do once you open up in vs code um first

Off it's pretty it's a pretty good built app um I haven't looked through it all but I believe it's using the T3 stack I can see Prisma here and and whatnot and this somewhat looks familiar but you're going to want to change your example in environment variable into just saying EnV okay and you're going to see that it has most of the environment variables filled out the ones that you're going to want to actually change okay so it looks like it's

Actually I thought it was claw too but um from what I see here it's mainly just open AI uh natively that they have now I believe if you really wanted to go in um and maybe do a search for the the base URL in here in the code base and change that you could probably get a local model or something like that working with it but um for purposes it's just I mean it's simple to just use open AI key if

You have that now the one thing that I I mean I'm not too crazy about is that you do need a GitHub client secret and client ID now don't worry if you never had done that before I'm going to show you to do it it's very simple but it's just kind of like a unnecessary step I guess if you want authentification but if you're just self-hosting it you really don't need authentification but um yeah that's just my opinion but yeah I

Guess you could like put it on your own um act like if you could self hos this on something like coolify if you wanted to or whatever the case may be but uh yeah in which case then you would want off now so once you put in your open AI API key you're going to want to do the following so you're going to want to run and okay so first things first So the instructions here at least for me maybe if

You followed these exactly it would work perfectly but for me I kind of had to do things a little bit differently to make it work so um it just didn't fully work out a box the way they described it so I'm going to tell you what exactly what I did so you don't encounter these issues now of course you're going to want to go to new terminal and get the terminal open here I mean you could do it in your the

Terminal the other terminal as well I just like doing it within the uh es code terminal and I had to do npm install again so I just did npm install which installed the all the dependencies because it when I tried to run uh DB push right here uh which is for Prisma um it didn't work it said Prisma wasn't there so I I had to do npm install and then then I did npm run DB push now um then this is

What I did um I did do npm run Dev after and it spun up the instance but um actually before you do that first off before you do mpm run Dev uh what you're going to want to do is you're going to want to do the GitHub client secret and GitHub client ID so to do that you just go right here to this link this link is right directly in the GitHub and you're going to register a new oo app so

You could call this whatever I just called it um rapid pages and you're going to want to put local Hol 3000 right here for the website homepage and then this call back URL right here that they give you for the authorized call back and then you're going to register the app now I'm not going to do that I already registered mine here's mine right here I just change this is not the client ID I just changed it for the sake of

This you copy and paste the client ID and you would uh generate a new client secret right here and then you would just copy and paste that client secret right over in your not here you paste that right here in the uh GitHub client secret and then the GitHub client ID you would save that and then you could um this now they say mpm runev here you could do that I believe but so you could try that out but one thing

That I had to do was I had to Docker compose up- D so make sure you have Docker installed all right so go to doer. install it make sure it's running and then Docker compose Das up- D you could technically probably just Docker compose this whole thing and I and you actually may not need to do the node I mean you technically probably wouldn't need to do the node version if you did do that I guess the way I just did

It was I'm basically using node for the front end and then Docker compos for the database um so yeah so basically I just found that uh the docker at least from what I see the docker compos is really the only way that the database the postgress database is going to get um spun up in a container as you can see right here rapid Pages this is the postgress database right here right here as you can see and then the the rapid

Pages app isn't being run that's the front end you could technically probably just use the whole entire Docker compose and do the front end and back end but um yeah so that's just and it didn't end up how I did it so you could do it either way um if if you're doing it the way I did it honestly this way is probably easier but you know some there's some downsides with the AER takes up a lot of memory sometimes if

It's constantly running so anyways I just have the postest database spun up here and then I did npm run Dev to uh get that going on Local Host 3 okay so I hope that kind of makes sense um so npm run DB push this is going to uh use the um Prisma to push the uh schema to the database and then mpm run Dev uh Docker compose up- D is going to spin up the containers if you already have it this

Running on Port 3000 then it's not going to spin up Port 3000 for the front end of the docker you could really just I mean you could just do the docker version either way um if you don't have the npm Run Dev already running here on 4 3000 then when if you do run Docker compose it's going to spin up the whole app which is fine and then either way you can do Docker compose exec rapid Pages npm run DB push

Which I I mean I don't even really know if you need to do if you um did it up here but yeah that's just kind of I hope that somewhat makes sense here in the the instructions it's not at least for me it wasn't 100% clear so I just wanted to kind of go through explain every situation that you may encounter so if you do encounter something an issue you kind of may have an idea of how to fix it okay

And if you do encounter any issues or if that's unclear um let me know in the comments down below and I'll do my best to help you okay anyways once you do that you if you go to Local Host uh 3000 you will have a rapid Pages spun up okay okay then you're going to want to um me just go to 3000 and it's going to look like this once you uh type something in here and click Send it's going to

Bring you to the login page then you're going to want to log in through your GitHub once you log in through the GitHub then you can actually send you see how I'm logged in up here then I can go ahead and send something build me a modern UI component of a form that is hting name email and phone number for opt and make it very professional okay so as you can see we're getting the generating page so please wait while things

Are being generated and uh as you guys oh so if you don't know too this is like there are have been a few other um z uh vzer Alternatives kind of like this that are open source we've covered open UI before on this channel as well and it it's pretty good um this rapid Pages I'd say it's pretty good um as you can see here we got an optin form it looks it looks pretty decent um we can see the canvas

Here we can see the code here so as you can see it's using react um yeah it's just a basic form it's really just importing this and then I'm returning the form right here and that's about it so um what you could do is you could Fork this I don't really know what that does I guess yeah just kind of like makes a new uh chat with it I believe that if you want to talk to it and change it so

If you wanted to keep this version and then like update it and have both you could Fork it and then whatnot share uh copies the URL to your clipboard and that's pretty much it you could say like make it dark mode Let's see how it does with iterations okay so definitely not perfect here the it literally made the text dark mode too um you know I think it's pretty good for open source honestly guys like just to be 100% honest vzer

Is definitely a lot better just like V I think definitely even got a big uh kind of upgrade lately so maybe I'll do a video on that as well um there is a paid version of that but there's also a free version that's pretty good um to use and honestly just from seeing this I'd almost maybe even say like I haven't fully tested the two between each other but if you haven't seen my open UI video maybe check that out cuz

You know I I'd say maybe it's a little bit better uh out of box than this in terms of output but I do think this is still a useful tool to have you can maybe use it test things out let me know if you what your thoughts are on this if you um like this tool maybe you have a better alternative tool let me know in the comments down below if you want me to do a a review on a different

Tool or whatnot but other than that guys I will see you in tomorrow's video if you're new to the channel we upload videos every single day on AI automation business growth open source coding all this good stuff so anytime I uh find the tool or you know try to stay up to date on The Cutting Edge technology I'm going to share it with you guys and uh yeah if you haven't already joined our free community Strat community.com link for that will

Be in the description down below our free Facebook group and Discord Channel and I will see you in tomorrow's video guys keep hustling keep grinding and of course guys accelerate your stride take care