21st-dev Magic MCP Server

What does “21st-dev Magic” MCP Server do?

The 21st-dev Magic MCP Server is an AI-driven platform designed to help developers create beautiful, modern UI components instantly through natural language descriptions. Acting as a bridge between AI assistants and your development environment, it enables seamless UI generation, real-time previews, and integration of professional brand assets and logos. With support for popular IDEs like Cursor, Windsurf, VSCode, and Cline, it streamlines frontend workflows by letting users describe the UI they want, and the Magic MCP Server generates and inserts polished, customizable components directly into the project. Its goal is to enhance developer productivity by automating repetitive UI tasks and integrating AI-powered creativity into the daily development process.

List of Prompts

No explicit prompt templates are listed in the provided repository documentation.

List of Resources

No explicit resources are listed in the provided repository documentation.

List of Tools

No explicit tools are listed in the provided repository documentation or in server.py (or equivalent).

Use Cases of this MCP Server

• AI-powered UI Generation: Instantly create modern UI components by describing them in natural language, saving significant time on boilerplate and design.
• Component Enhancement: Upgrade existing UI components with advanced features and animations (feature coming soon), streamlining iterative development.
• Brand Asset Integration: Easily access and integrate professional brand assets and logos into your frontend, maintaining design consistency and professionalism.
• Real-time Preview: See components as they are created, enabling rapid prototyping and feedback loops.
• Multi-IDE Support: Use the same AI UI generation workflow across Cursor, Windsurf, VSCode, and Cline, ensuring consistent development experiences.

How to set it up

Windsurf

1. Prerequisite: Install Node.js (latest LTS).
2. Get your API key: Generate from 21st.dev Magic Console.
3. Open config file: Edit ~/.codeium/windsurf/mcp_config.json.
4. Add Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Save and restart Windsurf to apply changes.

Securing API Keys: Use environment variables in your configuration:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Prerequisite: Install Node.js (latest LTS).
2. Get your API key: Generate from 21st.dev Magic Console.
3. Open config file: Edit ~/.claude/mcp_config.json.
4. Add Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Save and restart Claude to apply changes.

Securing API Keys:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Prerequisite: Install Node.js (latest LTS).
2. Get your API key: Generate from 21st.dev Magic Console.
3. Open config file: Edit ~/.cursor/mcp.json.
4. Add Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Save and restart Cursor to apply changes.

Securing API Keys:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Prerequisite: Install Node.js (latest LTS).
2. Get your API key: Generate from 21st.dev Magic Console.
3. Open config file: Edit ~/.cline/mcp_config.json.
4. Add Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Save and restart Cline to apply changes.

Securing API Keys:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

How to use this MCP inside flows

Using MCP in FlowHunt

To integrate MCP servers into your FlowHunt workflow, start by adding the MCP component to your flow and connecting it to your AI agent:

Click on the MCP component to open the configuration panel. In the system MCP configuration section, insert your MCP server details using this JSON format:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Once configured, the AI agent is now able to use this MCP as a tool with access to all its functions and capabilities. Remember to change "magic-mcp" to whatever the actual name of your MCP server is and replace the URL with your own MCP server URL.

Overview

Roots support not specified in the repository.

Our opinion

The 21st-dev Magic MCP Server has excellent documentation for installation and setup across multiple platforms, with clear real-world use cases and a large, active user base. However, the lack of explicit documentation for MCP prompts, resources, tools, and advanced MCP concepts like Roots and Sampling limits its transparency for advanced users and integrators.

MCP Score

Rating: 6/10

The 21st-dev Magic MCP Server scores highly for usability, activity, and clarity of setup but loses points for lack of advanced technical detail and explicit MCP primitives in public documentation.