Transcription
One of the coolest and most proven ways to assemble beautiful interfaces using neural networks is to use the SHCN ready-made component library. And you, as a web coder, are simply obliged to know about it. But that's not what we're talking about now. We're talking about their official MCP, which will seriously boost your web-coding process and allow you to create much more beautiful and high-quality interfaces. And now, in this video, I will show you my complete workflow and give away my prompts and rules that I use myself for free. The installation is as simple as possible. I currently have the instructions open, I will leave a link to them in the description. And here you will find commands for installation in Cursor, CloudCode, and VSCode. Here. Also, down here there is a config for manual installation. I will show the installation in Cursor. Let's choose it. And here I need to select my package manager. Most likely, you will use npm. Let's copy this command and paste it into our terminal in an empty project. Yes, it can also be in a non-empty project, in principle. We type Y, agree, and press Enter. That's it, the installation has started. This command will set up the MCP for you, install dependencies, and write the config here in mcp.json. Let's go to the Cursor settings. Go to MCP Integrations and enable the SHCN checkbox here so that our MCP server loads. Here are all the tools it uses. If you have previously used third-party MCP servers for SHCN, then you surely know that the agent only had access to the official component registry. But in reality, there are other public registries of ready-made components compatible with SHCN, and there are quite a lot of them. And what's the trick of this MCP? It allows you to search, install, and get information about components from other public registries. In short, your AI agent will always be aware of what ready-made components are available to it, how to install them, and where to use them. And thanks to this new MCP, the components in your arsenal will become many times larger. In the description under the video, on my Telegram channel, I will leave a link to a config with a large list of libraries that you can use. Download it, install it, put it in the root directory of your project, and use it. I recommend looking at each library and choosing the one that you like the most visually or that best suits your project. For example, if I need cool animations, I often resort to this library, React Bits. Let me copy it, type this name into Google, and let's see what components this library offers us. Yes, there is a large number of such cool animations. Let's find something more interesting. Well, for example, a component that allows you to create this side menu. I also often have to create CRMs and various dashboards. And for this, I like to use Ray UI. I suggest we take RayUI as a basis this time as well. And for this, let's go to our Cursor and type the following prompt. Let's ask the neural network to get a list of all components from Ray UI. Let's ask it to use SHCN MCP. If you like the video, subscribe and give it a like. Your activity will greatly help my channel, and I will continue to release great content. Well, and here, pay attention, it received information about all Ray UI components. There are 542 of them. Quite a lot. Here are the main UI components, various forms, navigation, and so on and so forth. And all this we can use in our own project. Well, let's practice a bit. I will try to build a simple CRM system for project management. I want there to be a dashboard with analytics of earned and spent funds. I want there to be important information about projects there. Here. I want there to be a page with projects, a table with the ability to create new projects, edit, delete, and so on. Each project can have some tasks. Tasks can have statuses, like the task is open, it's in progress, or it's already completed. Right now, on your screen, you see the requirements that Claude generated for me based on my project description. I have placed these requirements in my directory and intend to use them in Cursor. Now, as the next step, let's ask the neural network to analyze these requirements and create a list of components that it should use during development. And for this, I use the following project rule. It has appeared several times on my channel and on Telegram. In this rule, you just need to specify the name of the library you are going to use. I chose Ray UI. Additionally, I specified that I want SHC CNMCP to be used. Here. And thanks to this rule, instead of developing components from scratch on its own, the neural network will try to use ready-made ones. So, I will type the following prompt. Analyze the requirements in requirements.md and create a list of components according to the rule Components library rule, which we just edited. Let's click the send button and wait for the neural network. Here you go. The neural network started looking for ready-made blocks and examples related to the dashboard and CRM. As you can see, the neural network analyzed the project requirements, got a list of components, found the necessary ones, and, pay attention, created a file for us called componentsresearch.md. Here we now have a list of all the necessary components, examples of their use, and so on. I noticed that for some blocks, it uses not only Ray UI but also the original SHCN, which, in principle, is not forbidden. And now nothing prevents us from implementing this project. I wrote the following prompt. Use components research, that is, the document that the neural network generated for us. Implement the project from requirements.md, that is, our project description, our requirements. And to get information about components, use SHC CN MCP. Of course, a real project needs to be divided into subtasks so that the neural network doesn't hallucinate. But since this is a demonstration for us now, I will try to assemble the entire application from one prompt. It will be interesting to see what comes out of it. But about how to master website and web application creation from scratch, I talk about in my most comprehensive web-coding course. The course is suitable even for beginners because we go from simple to complex. First, we study the basics of web-coding, create a simple but stylish landing page. And after that, I give you and thoroughly explain all the necessary theory on backend, API design, and frontend. And it all ends with a course project. And as a course project, we will step by step implement an analog of an application that raised over $35 million in investments this year. A food tracker with neural network integration for recognizing the calorie content of dishes from a photograph. Over 70 lessons and a lot of practice await you. Sounds delicious, right? At the same time, I'm giving this material away for pennies, and you get a billion times more benefit. See for yourself, go to the landing page via the link in the description. There you will find the program, there you will find real reviews from students from the private student chat. Soon we will add curators and allow you to create your own web application under their supervision instead of a course project, and we will start raising prices. But if you want to get the maximum benefit, go to the link in the description. When paying, enter the promo code VIPCODING and get a 40% discount. This is a lot, so the number of uses is limited. During the development process, I noticed that neural networks prefer to use native SHCEN components instead of the Ray UI library. They find them more suitable. Therefore, I wrote the following prompt and slightly modified Components Research. I wrote that I don't want to use components from SHCN, only my chosen library RUI. Most likely, you won't have the same problem because I also edited the rules we used for component research. I wrote: "Use CNN components only if there are no suitable components in the specified library." Here. And approximately this is the project I got. I'll show you now. In principle, it was possible to develop something digestible from one prompt. I had to make a few more edits. I decided to make the creation of projects and tasks in the Drawer component from Ray UI, so that we clearly see how it works. And let's take a look. Here we have analytics. This is how it looks. Completion rate, ROI, average time per task, overdue tasks. How many we have, yes, breakdown by status. A little lower, we have these components. Yes, these blocks require further work, these cards don't look very good. For some reason, the neural network created parent cards with borders. Let's see how our projects look. Here is our cool table of all projects. Number of active, number of completed, budget, spent funds. Here a project can be created. Let's click the create button. This is how our drawer component pops up. I know that the component at the bottom looks quite unusual. I just wanted to show you how this component from the RUI library will actually look. Although, in principle, it also looks interesting. Let's try to create a new task. Let's choose some project. As you can see, all projects entered into the system have been loaded. Let's choose a status, for example, in progress. Priority, let it be critical. Executor name Stanislav. Time spent. Well, let's say, let it be, 20 hours. Create task. And here you go, a new task in progress with critical priority. Let's see what we have in projects. Search is working, filtering by status, by priority, and by projects is working. We have pagination and we even have a Kanban board. Let me show you how it works. Tasks can be in table form, or they can be in the form of this Kanban board. And this is another component from Ray UI. This is how it looks in the original. Of course, each task can be edited and each task can be deleted. This is roughly how it works. Well, the video has come to an end. Support the channel with your activity. Apply the knowledge gained in practice, and everything will work out for you. Take it and do it.