V0 by Vercel: Create UI Components from Text & Images!

--- type: transcript date: 2023-12-06 youtube_id: r8z0a3bPeuM --- # Transcript: V0 by Vercel: Create UI Components from Text & Images! in this video I'm going to be showing you vo by versell which is vel's new generative AI platform that allows you to with natural language or with an image generate a UI so if you go ahead to the v.d site now it is under a weight list so I did have to wait a handful of weeks to gain access to this so if you want to try this out you will have to sign up for a weit list it's sort of TBD how long that weight list is and how long you might have to wait but it isn't publicly released yet now you can look at a number of examples so there's new generations so one thing just to touch on as you're playing around with us if you're using the free tier any of the things that you generate will be public so the way to actually make private versions is you will have to subscribe to their tier it starts at $20 us a month so if I look at one of the examples here the way it will work is if you put in a piece of natural language like this so here we have a profile card for a user in the middle of the screen it will generate three different options for you so say you like that last option or the middle option what you can do from there you can share it now the nice thing with share is you can share it without someone else having to make an account or be logged in on versel so it's really nice if you think say you want to share something to a designer and they might not have a versell account you can just share that link and they'll be able to see what you have there you can also Fork other people so it has a very GitHub type of vibe you can star other people you can Fork your own so very flexible in terms of what you can do now in terms of the code itself so it generates react with shad C nuui and Tailwind components it also generates just plain HTML with Tailwind now over time it looks like they will be implementing More Design Frameworks so not just uh the Tailwind implementation maybe they'll use material or maybe Implement with bootstrap sort of TBD on that front but it does say that they will support other Design Systems in the future now in terms of other Frameworks that's also TBD I don't know maybe they will Implement uh being able to use use this in something like Vue potentially but remember this is the company behind nextjs so uh not sure on the supportability on other Frameworks necessarily but the fact that it gives you react and HTML and Tailwind I think is going to be very satisfying to a large portion of developers so if you're not familiar with Tailwind or Shad C nuui I'll put the links in the description of the video they're very easy to get up and running with so if you just had a basic create next app project you can go around and play around with both of these things very easily so I'm going to send in an example so I took a screenshot of this uh page here so I'm just going to go ahead and go back here and I'm going to pull over the screenshot here and click generate so what's really nice with this is you can send in pictures or natural language and it will start to generate three different examples for you so the thing with this it's a credit based system so if I just go to the pricing page you will get 200 credits for free now the way it works you get or it will take 30 credits to generate the first prompt where you have three examples and it will take 10 credits for each subsequent prompt now with each subsequent prompt once this has been generated you can pick which one you like now you have the option to select an element and change it from there or you can go ahead and just reprompt the whole canvas there so you see here it did a reasonable job uh of generating what I sent in now the other thing that I'm going to just show you here is let's just say make a landing page for a YouTuber so while this is loading I'm just going to head over here just for a moment now the nice thing with this is as you make uh different uis you'll be able to have them all within your profile here so here you see all the different examples that I passed in to vo to generate all these uh examples that you see on the screen here now one thing to note with vo so it's called vo for a reason so it's not V100 or v1000 it's not going to give you a production ready fully designed uh beautiful website off the bat but what it will do is it will save you all the time that it would take to code out all of this so I think you'd likely be familiar if you've worked with either of uh these things such as tailwind and react to actually scaffold out even like a little basic proof of concept it would take some time to write out all of this so to be able to just copy this code uh you can even edit it in here as a side note but to be able to copy this code or just run this command within your next or react project and be able to reference these components it's going going to save a ton of time and the other thing that's cool with this is even though I'm I sent in a screenshot just as an example you could imagine a scenario where maybe you want to pass in something that a designer gave you so it's like here's this whatever component or hero area or whatever you want to build pass that in it's not going to give you exactly what it looks like but it will probably give you a pretty close representation of what you're trying to accomplish and then you could just sort of make those subsequent uh tweaks and add the images and do everything you need from there so that's pretty much it for this one I just wanted to give you a quick look of what it looks like amazing implementation by the team over at versell I look forward to more people having access to this because I think it's an amazing platform it's going to certainly gain a lot of attention I think once it is publicly released it's going to save developers a ton of time and it's just generally a really cool tool at the intersection of AI and development so hopefully you found this video useful if you did please like comment share and subscribe and otherwise until the next one