Shadcn MCP + Cline + Cursor: BEST FREE UI Design WORKFLOW! Generate UI's EASILY!

We've all heard of Shad CNN. It's a component library where they have sets of beautifully designed accessible components and a code distributed platform. Works with your favorite frameworks and the best part is it's open- source and you can see why people use Shad CN for its elegant accessible components that are easy to customize and integrate into modern React projects. You can simply go over to the code section and you can replicate the design that is already generated with this component into your own workflow by copying the code. Now, another reason why people may use shaden packages is because to generate these components with the help of AI could be kind of expensive. For example, if you want to generate a dashboard or any sort of component over here, it would probably take approximately 100k to uh up to 500k tokens, which is kind of expensive if you're using something like claw 3. 7 sonnet or even openai. Instead of generating it from scratch, you can take these components and configure it best to your own needs, which would save you so much more. Currently, how you can install it is by simply deploying it into different frameworks like Nex. js and you can then run the initialization of the Shad CN package within that project. But what if I told you there's now an effortless way for your AI coding assistant, whether that's cursor, client, or windsurf to use shaden components and automates the entire setup for you. Well, this is where I'd like to introduce Shaden Registry MCP. The registry MCP is a new extension of the Shaden ecosystem that makes your design system AI ready with zero configurations. With a single command, you can make any component registry MCP compatible, unlocking seamless integration with AI tools like cursor or even client. Now, this is where this registry will include custom components, design tokens, fonts, and variables. and you just need to simply talk to the AI to select the component that you want to work with and it will fully initialize that component for you live in action. Now, personally, I'm going to be setting up this MCP with client cuz I believe it's easier to do so with it, but you can also do it with Windsurf or Cursor and it's super easy. So, what you'll need to do is install the client extension within your IDE. I'm going to be using VS Code. You can install it for whatever operating system completely for free. And you can then install this extension by going over to their website and then installing the client extension through the VS Code marketplace by clicking on install which will prompt open VS Code. And then you can go and install the extension. Go open up the client extension. And something I want you guys to do first is head over to the settings tab. And what you can actually do is use the API provider VS Code LM API which is where you can access the C-pilot API completely for free. There's a rate limit to it, but you can access these models completely for free. And once you have selected the model you want to use, you can click on save. So to set this up now, what you can do is head over to client and within the chat interface, simply type in, I want to install the chat CN MCP. Can you help me do this? And in this case, it's going to follow the step-by-step example as to how you can get started with the registry MCP. And once it has finished installing and initializing, you can then head over to the MCP servers tab. And you can see that the shad CN MCP is now uh installed. You can see that you can initialize the shaden UI in a project with the following parameters. And then you can add the shad CN components by using these different parameters. So that it is going to be easily able to then add the components quite readily whenever you're chatting with the AI. So to show the capabilities of the SHA CN MCP, I'm going to create a base template project with Nex. js and this is where I've used this command and I initialize SHAD CN within it. So I pasted it in within the terminal. But what you can do is just open up any sort of folder that you want to add the SHA CN packages or components to and then you can easily get started. But I'm creating a project from scratch to showcase what you can do with the MCP. So I've created a Shadzen demo project and I started the deployment server. But what we're going to do is go back into the documentations and this is where we want to then get a name of what we want to create. So for example, if you want to create a dashboard like this one over here, I can get the component name and then I can go back into client and I can say can you create a shaden dashboard one and make sure you use the MCP server and then I can simply paste this in. And now what it will do is it'll use the MCP server to extract the contents from the documentation to use the specific dashboard component and then add it to the deployment server. So you can see

right now it is going to find the correct card. So you can see right now it is working on adding that component on its own without me intervening. And this is probably the easiest way you can add various things with this MCP server. And there we go within our local host. We have this dashboard now fully opened up and you can see it was able to replicate exactly all the components that we had requested within this building block and that's how you can easily use this MCP to go ahead and design anything with the help of AI. Now another option is simply going into client rules and you can set a couple of rules to use these different components without you using any sort of MCP server. You can use the context 7 one which is an option note that you can set as a client rule but essentially a client rule is where it guides client to use certain things from a certain directory like the shad cnen package list and it will then implement it within your own framework. So in this case I have a client rule MD file. You can create a new one by giving it a name and once you do give it the client rules. md file name. You can edit it and then provide a list of couple things you want to work with. So in this case I'm telling it always use shad cnen components where applicable and I'm also going to say leverage the context 7 mcp tool as your primary discovery engine for UI primitives as well as tokens and unknown packages. So this way it will update client whenever it needs to with the latest packages to use these different UI components. And this way client will actually work through efficiently to finding the right components that's needed. And this is a way for you to not use the registry MCP. That was one option. This is another option to easily install any component completely for free with the free API. And you can do this quite easily by having AI guide through the steps or it guiding you through the steps and to autonomously set up anything. So for example, we have this calendar component that you might want to implement. So what you can do is you can copy the code for it. You have different component styles, but what we want to do is first click on save to save this uh client rule. And we can say I want to implement this calendar into my uh project. Set it up for me. And this will actually use the client rule that we had set to go through this component library within the chaten documentation to set this up with my framework which is going to be with next. So we can see that within a couple seconds it will then work on developing this for me and we can then open it up. And there we go. We now opened up this calendar demo. Obviously it's going to be added to the next uh project template but you can see it added the component over here to visualize what it was capable of doing. So this is exactly how you can add any sort of component easily with the help of client with the second option using client rules. And that's essentially how you can easily design any sort of front end using the chaten packages quite easily with the help of AI without you needing to intervene or setting up the configurations with the code. You can have client do it all on its own, especially with the MCP server. And you can see how easy it was. So I highly recommend that you take a look at all the links that I use in today's video in the description below. But that's basically it, guys. Make sure you join the newsletter, join our Discord, as well as follow me on Twitter, as well as subscribing to the YouTube channel. Make sure you guys turn on notification bell, like this video, and please take a look at our previous videos because there's a lot of content that you will truly benefit from. But with that thought, guys, have an amazing day, spread positivity, and I'll see you guys fairly shortly. Peace out. of us.