Magic (21st.dev UI Generator) MCP server

Magic Component Platform (MCP) is a powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions. It integrates seamlessly with popular IDEs like Cursor, Windsurf, and VSCode, providing a streamlined workflow for UI development through AI-powered UI generation based on simple text prompts.

Features

• AI-Powered UI Generation from natural language descriptions
• Multi-IDE Support for Cursor, Windsurf, and VSCode (with Cline)
• Modern Component Library with pre-built, customizable components
• Real-time Preview of components as you create them
• TypeScript Support for type-safe development
• SVGL Integration for professional brand assets and logos

How It Works

1. Tell Agent What You Need

   • In your AI Agent's chat, type /ui followed by your component description
   • Example: /ui create a modern navigation bar with responsive design

2. Let Magic Create It

   • Your IDE prompts you to use Magic
   • Magic builds a polished UI component instantly
   • Components are inspired by 21st.dev's library

3. Seamless Integration

   • Components are automatically added to your project
   • Start using your new UI components right away
   • All components are fully customizable

Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• One of the supported IDEs:
  • Cursor
  • Windsurf
  • VSCode (with Cline extension)

Installation

Generate API Key

• Visit your Magic dashboard
• Navigate to the API section
• Generate a new API key

IDE Setup

Cursor IDE

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

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

Add to Cline's MCP configuration:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Frequently Asked Questions

How does Magic AI Agent handle my codebase?

Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure, integrating seamlessly with your existing codebase without affecting other parts of your application.

Can I customize the generated components?

Yes! All generated components are fully editable and come with well-structured code. You can modify the styling, functionality, and behavior just like any other React component in your codebase.

What happens if I run out of generations?

If you exceed your monthly generation limit, you'll be prompted to upgrade your plan. You can upgrade at any time to continue generating components. Your existing components will remain fully functional.

Is there a limit to component complexity?

Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. For best results, it's recommended to break down very complex UIs into smaller, manageable components.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.