## Intro [00:00] Your site's UI is everything. It's what users interact with and how they judge your entire project. And even with AI tools like Cursor, you still need to know how to build proper UI if you want something that looks professional. Shad CN components are some of the most popular React components out there and for good reason. But here's the thing, ## The Problem [00:17] you're probably using them wrong. I used to just tell Cursor, build this with Shad CN, and hope for the best. But Cursor consistently messes up the implementation, leaving you with broken components and styling issues. So today I'll show you how to implement these components properly and style them so your site actually looks unique instead of like every other Shadcen site out there. To get this right, you need the proper workflow. And I found something that's completely changed how I work with Shad CNN. This MCP server built specifically for Shad Cn UI. This MCP server has transformed my development process. It provides proper context and implementation patterns ensuring everything works correctly from the start. There's one tool in this MCP server that's been a total gamecher for me. Let me show you the GitHub repo and walk you through how this works. If you scroll down, there are basically two ways to use it. One is without your GitHub personal access token, and the second is with it. If you do use your personal access token, you'll get 5,000 requests per hour. So, I definitely recommend getting your token. I'll even show you how to install and set it up. But, if I go into cursor, I already have it set up. And you can see that I have the Shad CN UI MCP server right here. ## The Solution [01:27] Let me guide you through the workflow I've developed using the Shad CN UI MCP server and show you how this has completely transformed the way I approach building frontends. So, first let me show you this MCP store.md file. What you're looking at here is a complete UI UX implementation for a demo MCP store and it includes not just the structure but the entire user journey as well. The way this came about was pretty simple. I went to Claude, brainstormed my idea and asked it to generate the whole implementation plan for me and this is what it came up with. Now what's important to understand here is that this is purely the UI and UX implementation. It doesn't contain any code implementations or anything like that at this stage. So now let me take you back to the MCP tools and I'll show you the tool that I mentioned was the real gamecher. First there's the list components tool which returns all of the available components. We're talking about 46 total components. Then we have the get component tool which does exactly what you'd expect. It gets information about a single component. But then there's the get component demo tool. And this is the game changer I mentioned earlier. This tool has honestly been revolutionary for my workflow and has solved so many errors for me. So let me show you a demonstration of how this works. You can see right here that I asked it to use the demo tool for a component and explain how it was used simply because I was curious about it. and it went ahead and listed all the components for me. Then retrieved the component demos, which is where the magic happens. Take the button component. That one's pretty simple to implement. So you might not need the demo tool as much there. But then take the dialogue component, and this is where it really shines. You'll see there's a specific way it needs to be implemented. And here's what makes this so powerful. The component demos show you exactly how it's used in real code. So there's virtually no chance of making errors because you have the exact usage patterns right there. Coming back to the other tools, we also have something called blocks. Now blocks are quite different. They're combinations of components used together. So for example, a login block isn't just a single component. It's actually a mix of multiple components working together. The list blocks and get blocks tools are designed specifically to handle these more complex elements. So those were the main tools. Now, let me show you how I actually use the Shad CN UI MCP in my day-to-day workflow. The key is that I use rule files because they're essentially a way to program your AI agent, right? So, here was my first rule. Whenever it's asked to work with Shad CNUI components, the system should automatically use the MCP server. Then, whenever I'm planning anything related to Shad CN, and I'll show you what this looks like in a moment. During that planning phase, it should apply existing components wherever possible. And if blocks can be used instead, it should prioritize those because blocks are already pre-made and the MCP already has full context for them. The third rule covers implementation. When we're actually building the components, it should call the demo tool first. That's really important. It needs to check how the component is properly used and then use that information in the actual code. So that's the foundation I set up. And then I referenced this rule file. You can see it right there. And I asked Claude to look at the MCP store.md file. This is what it examined. This complete implementation plan you're seeing here that Claude generated for me. What I specifically asked it to do was create a UI implementation using shad CN UI that would tell us exactly what components will be used in the UI structure and precisely where they'll be placed. I wanted it to only mention the appropriate component names. No actual code at this stage because this part isn't about coding yet. In a way, we're returning to the concept of context engineering, but this time it's specifically optimized for front-end development. So, cursor went ahead and listed components, listed blocks, and retrieved all the different pieces we needed. Then, once all of that groundwork was complete, I asked it to compile everything into this implementation plan. Now, if we look at what's actually being built right now, you'll see that I referenced the rule file again and told cursor to implement this plan inside the Shad CN app. As the system works through the process, it's adding all the components step by step, building everything methodically. Here's what's fascinating. Once it finishes with a specific set of blocks and components, it calls the tools again. And this happens because that's exactly how it's programmed in the rule file. Because of that programming, it never strays from the process. It consistently fetches the context first. And this is the crucial part we've been exploring with context engineering. And this is what it came up with. You can see it looks really professional and all the components have been implemented perfectly. This was done in one single try. I just had to go back once because of some configuration issues. But if I had done this without the MCP server, there would have been so many component issues and responsive issues that I'd have to go back and deal with them again and again. Also, if I go back and show you the login page, you can see that this is a single block and the dashboard that you see here is also a single block that's been modified to add many more components. So using the MCP server and the workflow of already making a plan for how the implementation should be done with the shad C and UI components. This is what makes the whole process so effective. Oh, and if you're enjoying the content, please hit that subscribe button. We've also launched channel memberships. 97 people have already joined our first tier. Members get priority replies to comments. So if you need feedback or have questions, that's the best way to reach us. We're considering adding more tiers based on the incredible support so far. So, I just showed you how you can create a better structure for your sites using the MCP server. Now, let's talk about ## Tweak CN [07:01] how you can customize your site using the Shad CN UI components. For that, we're going to be using this site called Tweak CN. I've actually featured it in previous videos, and it's just a really amazing site. If I open it up, you'll see that it's essentially a customizer for the base Shad CN UI components. And if I go ahead and switch things up here, I can change the designs. And whichever one I like, I can go ahead and implement. And these aren't just pre-made designs. You can fully customize them however you want. All the settings are right here. So, just go ahead and tweak them however you like so that your site or web app gets a unified look that's truly your own. Because, you know, a lot of websites built with Shad CN tend to look really similar. There's not much visual customization out of the box. But with this, you can actually design something that feels unique. Once you land on something you really like, just go into the code option, copy the command, and give it to cursor to install the theme. Now, I've seen that sometimes cursor isn't able to fully install it automatically. If that happens, just copy the code shown below. These are all the small settings you'll need to change to match the theme you created. You can give this to cursor and it will modify the files directly and then you'll have the exact theme you customized. So, first you build your entire structure perfecting it using the MCP server and that part doesn't take much time. Then once that's done, you use tweak CN to make everything look ## Installation [08:22] great. So the installation is actually pretty easy. Back in the GitHub repository, if you scroll down, you'll find the MCP configuration. They have different ways of testing and also running the MCP server. But for running it with cloud code or cursor on Windinsurf, you're going to need to use the claw desktop configuration. So we're just going to go ahead and copy it. Then head back into cursor, open up the settings, and go inside tools and integrations here. When it's not added yet, you're going to go in and just add the MCP server. Now, as you can see, I've added the MCP server without the GitHub personal access token, but you definitely want the increased user limit. So, I highly recommend that you go ahead and get your personal access token. It's really easy to get. Once you get your token, make sure to copy it because you won't be able to see it again. Then, go back, paste it here, save your MCP file, and you're ready to ## Outro [09:11] go. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.