NEW: Cursor Composer + v0 = BEST AI Coding Setup?! 🤖 UI Components w/ Claude Sonnet 3.5 (Vercel)

What's going on everybody Josh pook here and in today's video I'm going to show you exactly how you can use cursor composer with verel v0 AI component generator now this will work for the free version of both tools I'm personally using the paid version of cursor but I'm using the free version of vzer I'm going to show you how you can build beautiful components which is based on the Shad CN UI Library let's dive right into it [Music] all right so

If you're not familiar with vzer then I'll go over briefly in this video I've covered it before so I'll leave links to my vzero video down below too if you want to see more in- depth on that as well as I covered cursor in many other videos I'll leave a couple links to some of those videos down below as well now um if you're not familiar with cursor I don't know if you know maybe I've been living under a rock but

Everyone in the AI space and the coding space have been talking about it every other uh YouTube video or Twitter uh tweet on X is about cursor and building cool things with it essentially just to sum it up real quick as of now you can pretty much code uh to some extent with natural language you can build things 100% without knowing how uh that much about coding and development um if you're building like production scill apps or like full scale end

To endend apps it can be a little bit more complicated it's good if you do have some sort of uh you know knowledge in terms of coding and and whatnot but uh first things first let's just dive right into it so go to cursor if you haven't already download it um make an account and if you want you can buy it for 20 bucks a month um the reason I'm using the paid version is simply just because the cursor compos feature

Is in my opinion it is unlike anything else when it comes to coding the dev experience is just amazing in my opinion and I'll show you that in just a second I did a whole video on cursor composer and versus cell v0 um it is topnotch when it comes to building out components it is insane and you can actually just use the free version pay version may give you it says it gives you higher rate limits I never even uh hit

A rate limit yet to this day and I've used it quite extensively so there is that and then I always sometimes you know just I mean we are going to be using cursor but sometimes I will use Claude son it within the clad panel if I do need to do some adjustments but we can actually just do that all with cursor so I'm just letting you know on our setup and as a side note guys if you are looking for a

Free open source alternative for cursor I did a video the other day and a couple days ago on Z aai so there is a free alternative there now quickly before we get into building out the components um as you can see cursor v0 there is so many people talking about it on Twitter uh cursor just in general and then v0 as well too people are building out really cool things some people are building out endtoend applications and now is the easiest

Time to actually build things and it's going to get easier and easier like this is really just a start so um yeah I've been learning a lot of different stuff off of uh you know some things people are on posting on Twitter some things on YouTube so I'll be continuously sharing that with you guys um here so if you're new to the channel make sure to smash that like button smash that subscribe button to stay up to date with the daily

Uploads so first things first we're going to open up a new cursor project okay so here is our cursor project and I mentioned in one of my videos before um I got um basically from someone on Twitter I saw him and I've been using this for a while too but in terms of just using it within cursor um uh basically it's a good idea to create a promps folder now within the promps folder you can do different things you can have

Like your docks um for different tools you're using whether that's um you know super base whether that's authentification docks whether that is drizzle whether that is um trpc whatever different tools you're using within your application it is a smart idea to include some sort of documentation within there okay you can literally just copy and paste itk put it in a markdown from their specific site what for the main docs that pertain to your app um also too in future once you

Kind of get a good standard operating procedure you could create your own um sort of standard operating procedure for how you like to set up your app how you like to set up your back end and then put those in specific markdown files and then when you're in the cursor composer which is right here just to access it you're going to click control I it's going to open up the small version but to access the big one you could either um

Hit this button here to open the control panel or you could click control shift I to open the big uh comp uh composer control panel okay now I'm not going to cover every nitty-gritty thing within composer you can create projects or sing Single composers but uh what you're going to do is as you can see I'm already referencing the v0 uh markdown file and I'll leave a link in the description below so you can get this this is basically just a

V0 instructions prompt so follow these instructions to use v0 then carefully about the component generate a prompt then write the prompt create a clickable link using component name right here for the prompt and it's creating a link so I'll show you this in just a second in action and make sure the prompt is URL encoded okay so um you could technically use this within without uh composer you could go contrl L and you could do the same thing right here on

The right hand side in cursor chat um now just a side not guys I always recommend using CLA Sonet 3.5 at the time of recording this video this is the most up-to-date uh topnotch coding model in the that we have access to publicly as of now so let's go ahead and just say um open up curs cursor composer and say I want oops Yeah so I want a component for a very modern dashboard time tracking app it should have multiple modules

Tracking different time tracking metrics okay we'll just keep it basic for now even though that is somewhat more of a a little bit more of a complex thing so here I'm not going to read through the whole prompt but we'll kind of skim through here's a modern dashboard tracking component with multiple modules uh so one we want a circular progress chart showing today's Track Time versus goal um all this good stuff so we can see this prompt right here and then

It's going to give us a clickable link so let's go ahead and click this link we're going to open and it is going to bring us directly into a vzero chat with this specific prompt typed out and already sent really cool guys right so this is going to if you're not familiar with vzo it's doing its magic right now it's essentially uh this is by versel so like basically one of the biggest um hosting platforms uh biggest for nextjs they created

Nextjs and as you can see here guys this is building out the time TR app uh dashboard and we got today's progress weekly project breakdown monthly activity and guys this is a lot better than doing it with um something like Claude Sonet uh artifacts because in vzero artifacts it actually will basically within the code as you can see we're doing Imports like react use State um recharts Imports like all these different Imports are actually being rendered if I was to try

To put this code into a uh CLA artifacts um artifact it wouldn't render properly it said it would would say it wouldn't have access to those um specific libraries or those specific Imports as you can see there's a few issues here like we don't like this big text and these blocks here you can see a start timer function a projects thing so we're going to say um we could actually go ahead and start improving upon this and say okay so I

Said the monthly activity has uh a huge may text make it legible and uh add some something be uh beside today's progress like maybe a team over view of the company staff time make it more modern and look like a Fortune 500 company app make the colors sty and styling really pop and make it so that I can add some time slots to track activity or for activities to track also make it in all in dark mode and as you can

See guys it actually completely messed it up and typically what my workflow would look like is I will usually get a base with v0 and then what I will do is inter I I personally find that uh iterating with nvz can work sometimes so I would try sometimes but if you're not getting the right results with it then I would iterate it within either CLA or within um within cursor right because cursor of course you can access claw but I just

Said hey revert back to um make it look uh light mode actually and we have only a couple colors and remove all the weird cuddling out so we're just going to get a basic scheme right here for what we want okay so at least the monthly activity has been fixed and you can see the recent entries right here all right guys so I'm actually a lot more uh content with this this a lot looks a lot more uh a lot better

For sure I like the colors I like scheme Etc um now we're just going to actually grab this so you could download it you could Fork it you could publish it so um I believe yeah if you publish it actually no it's going to just oh so you could actually install this so This is actually really cool guys so you could just copy this over into a component file so I'm just for the sake of this video just dashboard. TXS but

Um what you would want to do of course is install nextjs or whatever react uh you know library or react framework you're using um and then you could actually just go to Shad CN and go to installation nextjs and follow this as well as you could also just go over here to uh vzer go to install and you can install the component directly with this command as well as it would also install the shadan AKA nexi s NEX s app for

You so pretty simple guys then when I would do is I would um npm runev to launch your um you know local version of the app and to pull it up and then when you're looking at the app uh the components that you rendered into your app um what I would do is start making edits within cursor so I could go here uh I could add the dashboard file file like so to context I could either do it here or do

It within our um within our composer over here go to to a new composer add dashboard and say please make this more blank blank blank make those iterations allow for composer to make those changes approve them and then you would be able to see on the your you know other side of your screen or wherever you have your Local Host 3000 you could see those changes being made for that component you could start iterating it that way as well as like

I said before you could do it in CLA but you could also use uh Sonic um CLA or cursor as well so that's how I would do it I would use those to if it's like a small change you want to save some credits not use API you could do it with incloud son it but then if you want that nice Dev experience using CLA uh using cursor composer do the changes within uh cursor and then make those changes there so

That's how you can use cursor uh composer with v zero and you're going to get a really nice um Dev experience for creating these nice UI components on the Fly very quickly so if you want me to make more videos showing you how to maybe build out a sample project or certain things like this let me know in the comments Down Below guys let me know if there's any other topics you want me to cover or videos tools whatever the case

May be other than that guys if you're new to the channel make sure to smash that like button smash that subscribe button we upload videos every single day on AI automation coding business growth development all that good stuff so um yeah also too guys if you haven't already joined our free community St community.com uh it's our free Facebook group free Discord Channel you can check that out network with likeminded individuals as well as myself as well as there'll be extra free

Resources in those channels as well other than that guys I will will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride also we just hit 5,000 subscribers so thank you for all the recent support guys I will see you in tomorrow's video take care