AI Personal Learning
and practical guidance
CyberKnife Drawing Mirror

Magic MCP: MCP service for generating modernized UI components

General Introduction

Magic MCP is an AI-driven tool developed by the 21st.dev team and designed for front-end developers. It generates modern UI components on-the-fly from natural language descriptions and integrates with development environments such as Cursor, WindSurf and VS Code (Cline plugin). Users enter simple requirements, such as "Create a modern navigation bar", and Magic MCP generates a modern UI component based on the React component code with Tailwind CSS styles and TypeScript support. The tool is completely open source, hosted on GitHub, and free for developers to use. It offers live previews and a rich component library for rapid prototyping or team development.

Magic MCP: MCP service for generating modernized front-end UI components-1


 

Function List

  • natural language generation component: Describe the requirements in text and automatically generate the React component code.
  • Multiple IDE support: Seamless integration with Cursor, WindSurf and VS Code (Cline Beta).
  • Modern Component Library: offers a large number of customizable components inspired by 21st.dev.
  • Real-time preview: Instantly view the effect when generating components for easy debugging.
  • TypeScript Support: Ensure that the generated code is type-safe and reduces errors.
  • SVGL Integration: Built-in professional branding icons and logos, embedded directly into the component.
  • Component enhancements (coming soon): Add advanced features and animations to existing components.

 

Using Help

Installation process

Magic MCP needs to be installed in one of the supported IDEs, as follows Cursor For example, other IDEs (e.g. WindSurf (or VS Code + Cline) installs similarly:

  1. Preparing the environment
    Ensure that your computer has Node.js (the latest LTS version is recommended, e.g. v22) and npm installed; this is the basis for running Magic MCP.
  2. Getting the API key
    Visit the 21st.dev website, log in and go to the "API" page and generate a new TWENTY_FIRST_API_KEY. You can try it without a key, but the functionality is limited.
  3. Installing Magic MCP
    Open a terminal and run the following command:
npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

commander-in-chief (military) 你的API密钥 Replace the key with the one obtained from the official website.

  1. Configuring the Cursor IDE
    Open Settings in Cursor, find the Model Context Protocol (MCP) option and add the following configuration:
{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Save and restart the IDE.

  1. Verify Installation
    In the Cursor chat window type /uiIf you are prompted with "Creating Components with Magic MCP", the installation was successful.

WindSurf Configuration

exist ~/.codeium/windsurf/mcp_config.json Add in:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS Code + Cline Configuration (Beta)

exist Cline is added to the MCP configuration of the

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

How to use the main features

Generating UI Components

  • procedure::
    1. In the IDE chat window type /ui, followed by a requirement, such as /ui 创建一个带搜索功能的导航栏The
    2. Magic MCP generates a React component code that is displayed directly in the window.
    3. Click "Insert Code" and the code is automatically added to the project file.
  • Detailed description::
    The component uses Tailwind CSS styles and TypeScript by default, and the code can be adjusted manually. The more specific the input description, the more relevant the result will be.
  • typical example::
    Input:/ui 一个蓝色按钮
    Output:

    const BlueButton = () => {
    return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
    点击我
    </button>
    );
    };
    export default BlueButton;
    

Real-time preview

  • procedure::
    1. After generating the component, the IDE displays a preview window showing the effect of the component.
    2. After modifying the code, the preview is automatically updated.
  • Detailed description::
    If the local project is not running, the preview relies on Magic MCP's built-in rendering, which may differ slightly from the actual result.

Using SVGL Icons

  • procedure::
    1. importation /logo 品牌名e.g. /logo TwitterThe
    2. The tool returns the icon code in SVG or JSX format.
    3. Copied for use in a component.
  • typical example::
    Input:/logo GitHub
    Output:

    const GitHubIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24">
    <!-- GitHub SVG 路径 -->
    </svg>
    );
    

Operation process details

  1. Initiation of projects
    Ensure that the front-end project has been created (e.g. with Create React App).Magic MCP generates code based on the project structure.
  2. input requirement
    Use natural language descriptions in the IDE, such as "a responsive card list". Clearer descriptions lead to more accurate results.
  3. Adjustment code
    Check the code after generation and modify the style or logic to meet the requirements.
  4. operational test
    Save the code and run the project (e.g. npm start), confirming the effect.

caveat

  • Limited number of generation per month, after exceeding the limit, you need to upgrade the paid plan.
  • Complex components are recommended to be split into multiple simple requirements generation.
  • Join the Discord community to ask questions.

 

application scenario

  1. Rapid Prototyping
    When developers need to show UI effects, Magic MCP saves time by generating components quickly.
  2. Team Code Reuse
    Teams share components through 21st.dev to standardize style and improve efficiency.
  3. Learn front-end technologies
    Beginners use it to generate standard code, learn as they change, and get started with React quickly.

 

QA

  1. Is Magic MCP free?
    Yes, it's open source on GitHub, free for basic features and requires API keys and paid plans for advanced features.
  2. Is the generated code commercially available?
    Yes, the code is owned by the user and can be used for any project.
  3. What IDEs are supported?
    Currently supports Cursor, WindSurf and VS Code (Cline Beta), may be extended in the future.
May not be reproduced without permission:Chief AI Sharing Circle " Magic MCP: MCP service for generating modernized UI components
en_USEnglish