How to develop front-end components more efficiently in the AI ​​era? 21st.dev provides an answer

I would like to recommend a good thing to you: 21st.dev  . You can roughly understand it as a very avant-garde component hosting market. The special thing is:

1. It refers to shadcn/ui The design concept provides an atomic, Code Out dependency installation and management mode;
2. What's more inspiring is that it provides a set of prompts for generating component codes for each component, which users can use to generate more adaptable component effects in a specific project context.

With the help of 21st.dev and cursor, I made a demo like this:

All of this was achieved within 5 minutes without writing a single line of code! What’s more, 21st.dev’s functional design is truly AI- friendly and can be well applied to various AI tools (cursor, v0.dev, bolt.new, cline, etc.), and this design logic is also very suitable for reuse in various TO-D scenarios.  

What is 21st.dev

21st.dev is an open source React UI component market that provides high-quality UI components for design engineers and front-end developers. It is inspired by shadcn/ui and aims to help developers quickly build beautiful user interfaces, especially for the development of AI products. 21st.dev currently hosts a large number of open source components, including various highly designed (official review) avatars, dialogs, buttons, calendars, and even complete pages. These components have all been officially reviewed by 21st.dev, so the quality is relatively guaranteed.    

The main differences from traditional markets such as npm:

1. 21st.dev prefers one-time delivery. After installation, the code will be cloned locally, and then it will be decoupled from the market itself. The disadvantage of this method is that it cannot continuously follow up the iteration of the component itself; but the advantage is that this will greatly reduce the complexity brought by the concept of version (" The Complexity of NPM Dependency Management "), and after the code is copied, it can be adjusted according to the specific context of the project, which is more suitable for some code reuse scenarios with low complexity;
2. 21st.dev provides some AI-friendly interactions. First, a prompt for generating component code is set for each shared component. Users can directly copy and paste it into the LLM tool (Cursor is recommended) to generate the corresponding component code. Second, it also provides MCP implementation, which users can connect to various tools that support the MCP protocol.

Relatively speaking, 21st.dev's model is more in line with user habits in the AI ​​era: Codeout, customizable, and AI understandable, so it quickly became popular overseas and has a very high Producthub score.

How to use

Before using it, it is recommended to go to the market (https://21st.dev/) to see what components are available. The overall quality is very good.

21st.dev is essentially a component market that provides multiple ways to consume components:

1. use dlx Tools : Go to 21st.dev, select a component, and then go to the component details page and copy the install component Command, then execute it in the project directory to generate the corresponding code;

1. Use Prompt : Similarly, after entering the component details page, click copy prompt button, and then use tools such as cursor and cline to generate component code:

1. Use 21st.dev MCP service : Refer to: https://github.com/21st-dev/magic-mcp document, configure the MCP service interface, and then use it in the prompt /ui The instructions explicitly require calling 21st.dev to generate the component (specific usage is described in detail below);

The third one is strongly recommended:MCP This approach is equivalent to plugging 21st.dev's component knowledge into IDEs such as cursor. After that, such IDEs can plan the implementation path according to the context in the actual scenario, and decide how to implement user needs based on the component design knowledge provided by 21st.dev (note that this is design knowledge, not the code itself).

If you don't know MCP yet, you can read the popular science document: Using MCP to extend Cursor capabilities: https://ecn5ehmm9iou.feishu.cn/wiki/EyrOwRg5Cit5e8kKKjpcRe4cnuh

Highlights: One-click copy component prompt

The most surprising thing is that the component details page provides Copy Prompt Buttons:

Click to copy the prompt used to implement the component. Users can paste it into tools such as Curosr to help LLM generate the code for the component, such as the component used to implement the AI ​​Chat dialog box:

In the past, we have seen some amazing components in the open source market, which require at least learning, demo, coding, and debugging before they can be reused. However, the prompt provided by 21st.dev can really achieve one-click replication. Even if you don’t read the component code at all, it will not hinder your use and fine-tuning, which is much more efficient.

Highlight: MCP Services

Secondly, 21st.dev officially provides a set of  MCP services  (https://github.com/21st-dev/magic-mcp), which can be directly configured to various tools that support MCP:

Take Cursor as an example:

1. Register for 21st.dev service and get the API key
2. Configure the MCP service in the cursor:

Note a few points:

1. Type is set to command
   

2. The following command needs to be entered in Command:
   

   npx -y @smithery/cli@latest run @ 21 st-dev/magic-mcp --config  "{" TWENTY_FIRST_API_KEY ":" your-api-key "}"
   

3. After the configuration is complete and the MCP service status is confirmed to be normal and available, use /ui The prompt at the beginning generates the component, for example:

Corresponding implementation effect:

Although the colors are a bit ugly, it really takes only a few minutes to complete the first version of the content. The interactive process is much smoother than tools such as v0.dev and bolt.new, and all the codes are strictly set according to my warehouse. .cursorrules Rules are generated with almost no adjustment cost.

Some inspiration

Ideas for reusing private component libraries

After trying it, I think the popularity of 21st.dev is not accidental. It is really suitable for the AI ​​era. In the past, component sharing was based on package granularity. Consumers needed to read and understand component documents before embedding them into business systems for use. This would cause several problems:

• The learning cost is relatively high. Developers need to spend time and energy to understand these components and analyze component quality (through unit testing, source code, etc.);
• Component code is tied to the version number. Once released, consumers can hardly modify it. You basically have to use whatever the author gives you.
• The interdependencies between packages and subpackages are very complex, and version management problems are prone to occur ;

The source code sharing method of 21st.dev, combined with the ability of AI to automatically understand, generate, and modify code, has effectively solved the problems of learning cost, versioning, and flexibility of the above-mentioned traditional component reuse methods. It not only greatly reduces the cost of code reuse, but also can automatically adjust and adapt to specific scenarios (technology stack, requirements, etc.). To some extent, this is already a new paradigm: not code reuse, but design logic reuse.

Following this solution idea, assuming that 21st.dev is deployed to a private domain and a private component library is hosted, then we only need to focus on maintaining the quality, performance, and documentation of the core components. Then, with the help of 21st.dev + cursor, we can easily complete the tasks of business component reuse, replication, assembly, and function development in private domain scenarios , thereby improving development efficiency. This is a direction that is worth exploring.

Prompts are better than code

If 21st.dev only provided traditional component hosting and distribution capabilities, it would just be another clichéd npm. But it innovatively provides a set of targeted prompts for each component, and further provides integrated MCP services, which changes the nature. With the help of AI tools, the code of specific components (rigid, unadjustable knowledge) is no longer very important. Instead, it is replaced by ideas that guide AI to achieve similar effects (flexible, adjustable knowledge). AI can more flexibly adjust more suitable specific codes based on implementation ideas and specific context constraints, which is a transition from fish to fishing.

Following this line of thought, assuming that you are developing some TO-D products, you can actually consider providing customized prompts, functional descriptions, and integrated MCP services for each specific interface, and providing a set of knowledge panels optimized for AI. In this way, the original interaction for human intelligence can be converted into interaction for AI. The learning cost and usage cost for humans will be drastically reduced, and it will be easier to promote.

Therefore, it is highly recommended that students who are working on TO-D tools think in the direction of AI friendliness , including but not limited to: open source products, Open API platforms, private component libraries, private code libraries, etc.  

Practice based on antd

This is just an example, but this model can actually be reused in various md-based information scenarios, such as private component libraries. I have organized the code: https://github.com/Tecvan-fe/vercel-ai-demo/blob/main/packages/mdc-mcp/package.json

Based on the above inspiration, is it possible to achieve automatic code generation based on antd with Cursor and MCP protocol? The answer is yes, and the cost is not high. You need to do several things:

1. Organize and improve the usage documentation for basic components, preferably in MDX format to facilitate LLM understanding;

2. Develop MCP service to give LLM the opportunity to understand the details of the capabilities provided by antd. Although we can also achieve this through docs, we use MCP here for scalability and maintainability.

1. List of available components
2. How to use each component

3. Configure the MCP service in Cursor (same as other tools);

4. Write well .cursorrules , let Cursor know our coding standards and generate code according to the correct rules;

These actions are essentially to feed the correct and sufficient information to LLM, so that it can understand private domain knowledge and meet the development needs in a specific context (thanks to MCP). Based on this set of MCP, I tried to make a simple page:

• Original page effect:

• Initial implementation effect:

• Generate code for the first time:

From the results, the restoration is relatively high, and various antd components are used correctly. Although the style details are not consistent, we can continue to ask LLM to continuously optimize the code and keep approaching the final requirements; secondly, although the code structure generated for the first time is relatively rough, we can also ask LLM to continue to optimize until it meets the technical specifications.

The key point is that this is a process of sustainable iterative optimization . Although the results can only be infinitely close to the ideal state, it is much more efficient than relying solely on manpower to develop and tune from scratch. In addition, if we further organize more reusable basic business components in the future, the component generation capability of AI can be further expanded, and the development cost of business functions can be further reduced.

Next, we will demonstrate the specific usage, taking Cursor as an example:

1. Configure the MCP service, the type is Command, the command is npx @tecvan-fe/mdc-mcp@alpha start,For example:

1. Enter keywords in Composer /ui Also, if you want to achieve the effect, it is recommended to paste a screenshot, for example:

1. We will continue to propose optimization requirements for style effects and code structure, for example:

However, the actual development scenario is very complex, and this set of logic can only generate static code. In the future, we still need to continue to develop data interaction, user interaction, debugging, testing, online, monitoring and other aspects. In the future, I will continue to output more content on how to use Cursor for efficient coding.

question

After talking about the advantages, I can’t help but talk about the problems of 21st.dev. What I have seen so far:

• The underlying implementation is based on shadcn, and it cannot be separated from the react technology stack for the time being. From the component code, it is also deeply bound to nextjs, which is a bit like bundled sales. The good news is that it generates prompts for each component, which can be easily copied to the project, and then deeply optimized with the help of tools such as cursor.
• It does not support private hosting, so although it can quickly prototype various small products, it is not friendly to large projects;
• 21st.dev currently only provides pure front-end components, and does not connect the entire front-end and back-end mechanisms well;

However, even so, the Cursor + 21st.dev combination is still much more efficient than traditional development methods, and it is highly recommended that you study it in depth.