I Built 5 Websites Without Touching HTML: Here's How (Kibo UI)

One of the biggest advantages of AI is how fast you can build beautiful UIs with it. But for that, simple prompting isn't enough. There are these things called shad CN components, and with them, you can build really clean websites. Well, they just got a massive upgrade. KBO UI launched their patterns with over 1,000 Shad CNbased components, and they're pretty solid. But how do you actually use them with your AI agents to build better websites? And this isn't the only thing. Another site, Tweak CN, which we've featured multiple times on the channel, has launched something that's going to make designing your websites with AI a lot easier. And that's what we're going to show you in this video. What these components are, how to set them up, and then use them to build better websites with AI. But first, a word from our sponsor, Outskill, the world's first AI focused education platform. This weekend, they're hosting a free 2-day AI mastermind workshop running Saturday and Sunday from 10:00 a.m. to 7:00 p.m. Normally priced at $395. It's completely free for our audience as part of their Halloween sale. With a 4.9 star Trust Pilot rating, Outskill is trusted by learners across the globe. Join over 10 million learners worldwide who are mastering the future with Outskll. Across two immersive days, you'll train directly with experts from Microsoft and Nvidia, learning how to build AI agents, automate workflows, use AI in Excel sheets and presentations, and leverage 10 plus powerful AI tools you can apply right away. You'll also get access to outskills learning dashboard where you can connect with like-minded builders and track your progress. And that's not all. You'll receive $5,000 worth of exclusive bonuses including prompt bible roadmap to monetize AI and personalized AI toolkit builder available only to attendees who complete both days. Seats are limited, so if you're serious about upskilling, join the WhatsApp community to stay updated before the big blast. Click the link in the description or scan the QR code to grab your spot today. KBO UI, a library built on Shad CN components, announced that they're releasing over,00 components that we can use completely free. Just like Shad CN, this is a component library with different elements you can copy and use in your project. The patterns tab at the top contains the 1,100 components. The structure follows three levels. Level one is the main component, like an accordion or alert. Level two includes functional variations. For example, the accordion has a form version, a multi-level form, and several others. Level 3 offers design customizations for each variation. In the alert section, if we look at the error variant, you can see how they differ slightly in design at level three. This one is an info notification while that one is an error notification. Here are variations for every single use case you can imagine. Now, the question is, how do you use them with your AI agent? For this, you'll need the official Shad CN MCP server. All Shad CNN components have an install command and corresponding code. The Shad CN MCP puts all of it on a registry that your AI agent can access through the MCP server. It doesn't need to perform a web search and you don't have to copy and paste the code. It handles everything automatically. To use the MCP server, I'll be leaving all the links down below. First, you need to install a Nex.js or React app, whichever you prefer. Once that's installed, initialize shad CN. This creates a components.json file, which is really important. After that, initialize the shad CN MCP using the command listed here. Run that command in your terminal to set up all the dependencies. You'll get a MCP.json file which allows you to use the SHAD CN components. By default, this MCP server includes all the context for the SHAD CN registry, and you don't need to add anything. Component authors add their components to a registry. This allows us to install them using the Shad CN CLI. If components can be installed through the Shad CN CLI, they're included in the registry. The problem I faced was that these patterns weren't actually available in a registry. Only 41 components were present in the KBO UI registry. I added KBO UI to the registry section in the components.json file. This is where you add all the registries that you want your agent to have access to. The MCP then uses this information to automatically fetch all the details. I tried adding the patterns, but they weren't there. You can build your own registry and host it locally or deploy it online. Since these patterns weren't in any registry, I built my own. Shad CNN provides a registry template on GitHub. Using that template, I built a registry that contains all 1100 components. This is the patterns registry. It's available for you to use. I'll have it linked in the description if you want to try it out. Copy this entire block and run it in the same directory where you installed your Nex.js app. This will clone the registry, install the necessary dependencies, build it, and start the development server. The development server will start at port 3000. For the MCP to work properly, it needs to stay running continuously. Once everything is installed, add this registry entry to your components.json file, as I've done here. All 1100 components will now be available for you to use. As we can see, while the app is being built, it uses the Shad CN CLI to pull components from the patterns registry based on a workflow I'll show you later in the video. There was one big problem here. Because of the sheer number of components, I created a patterns guide which is included inside the GitHub repository. The workflow is aware that this guide exists within the repo. The workflow tells the system not to list all components at once since there are too many. Instead, it organizes them into categories. There are 51 tople categories at level one and each of those categories contains subcategories at level two. Inside these subcategories, there are different variations based on functionality. The agent searches through these level two variations to find exactly what's needed. At first, the idea was to build a preview feature so the agent could show every single component visually, but that turned out to be redundant. Instead, you can visit the main site where all those components are already displayed in preview mode. When the agent suggests using a component, for example, a button, it will ask what kind of button you want. You can visit the site to preview the buttons. Then select something like this rounded button. Because the registry is already connected, the agent will automatically search for it, fetch the command, install it, and pull the code examples behind that component. This way, it can easily integrate the component without any issues. Moving on to the actual workflow, I've added the shad CN MCP server and the registry is running on local host in another tab. I'll explain how the workflow with this setup actually works. I've built two /comands. You can get both of the commands in the resource section of our Discord community. The first one is the initialize command which you only need to run once per project. It's mainly used to create the design document which is organized by pages. There's also a shared components directory. Whatever you want to build, these commands analyze it and break it down into smaller parts. If I go into the dashboard overview, the system decides which components it wants to use. This is determined up to level two. What I have to do is go to the site, open the pattern section, and if I want any component to be changed, I simply tell it which one to use instead. It will automatically swap that component since it already has all the necessary context through the MCP. Coming back to the commands, you only need to run the initialize command once. After that, whenever you want to build something using this workflow, you just run the build page command. You only need to run it once per context session. With Clawude Code or any coding tool, you'll eventually have to use the compact command once the context fills up. That command clears out messages and summarizes them as the model's context window gets full. This is why you might need to run it again. Now, let me show you what I built to test it out. I gave it a simple prompt with three pages. A basic admin dashboard, a settings page, and a user profile management page. Here's what it built. These are all simple components. Down here, we have the profile page. All built with KBO UI components. This is the settings page. In the prompt, I mentioned that I just wanted to show off the components. So, I told it to use as many as it could. That's why it looks a little bit bloated. Now, what you can do is simply go back. Whenever you want to replace a component, you can just ask it to replace it using the MCP. It'll automatically handle that and make the change for you. As you saw on that site, the theme we used looked pretty plain. This is where I recommend the tweak CN site again and again on this channel. It's a customizer for Shad CN components that offers pre-built themes and designs you can use for your websites. They also provide live previews so you can see how everything looks on your components. They've done something truly amazing that takes the design process to the next level. In this new custom section, you can preview your website live directly inside Tweak CN. Give your AI agent the configuration they've outlined here. First, select the configuration based on your app. I'm using a Nex.js app. I'll select this one. Copy it, paste it inside your agent and tell it to implement it. This will embed it directly into your Nex.js app. I have this demo right here. I took a component and it can be easily applied to any component built on top of Shad CN, including the KBO UI components. This one's a login form. Copy the address, which already includes the embedded script inside the code, and paste it here. We now have our page right in front of us, fully interactive. If I change themes, I can instantly see how everything looks with my own site. The best part is you no longer have to copy and paste the code manually. Before you had to copy this code, give it back to Claude or cursor and then check how it looked. You don't have to do that anymore. There's another cool part. It also has an MCP server which works similarly to the shad CNMCP. Copy it, go back into your MCP.json file and paste it there. This allows it to get the full context of different themes. This feature is great because you get pre-made templates and full customization control over everything from fonts to colors, including light and dark modes. It's completely free and if you're developing websites, you should definitely use it. 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