Magic UI Generator MCP Server

Overview

Magic UI Generator transforms the way developers create UI components by leveraging AI to generate high-quality, customizable components from natural language descriptions. This tool is designed to integrate with your development workflow, making UI creation faster and more intuitive.

Installation

There are several ways to install and configure Magic UI Generator:

Prerequisites

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

Step 1: Generate API Key

Before installation, you'll need to generate an API key:

1. Visit 21st.dev Magic Console
2. Create an account if you don't have one
3. Generate a new API key

Step 2: Choose an Installation Method

Method 1: CLI Installation (Recommended)

The simplest way to install is using the CLI:

npx @21st-dev/cli@latest install <client> --api-key <your-api-key>

Replace <client> with your IDE of choice: cursor, windsurf, cline, or claude.

Method 2: Manual Configuration

Add the following configuration to your IDE's MCP config file:

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

Config file locations:

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

Method 3: VS Code Installation

For VS Code users, you can add the following to your User Settings (JSON):

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

Alternatively, you can create a .vscode/mcp.json file in your workspace with similar configuration.

Usage

Using Magic UI Generator is straightforward:

1. Initiate Component Creation

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

2. Review and Accept

   • Your IDE will prompt you to use Magic
   • Magic will generate a polished UI component based on your description
   • Review the component in the real-time preview

3. Integration

   • The component will be automatically added to your project
   • You can immediately start using and customizing the component

Component Customization

All generated components are fully customizable:

• Modify styling to match your project's design system
• Adjust functionality and behavior
• Add or remove features as needed
• Components follow modern React patterns and best practices

Tips for Effective Component Generation

• Be Specific: The more detailed your description, the better the result
• Mention Technologies: Specify frameworks or libraries you're using (React, Next.js, etc.)
• Include Design Requirements: Mention color schemes, responsive behavior, or accessibility needs
• Reference Existing Components: You can ask Magic to create components similar to ones in your project

Troubleshooting

If you encounter issues:

1. Check API Key: Ensure your API key is valid and correctly configured
2. Update Package: Run npx @21st-dev/magic@latest to ensure you have the latest version
3. Check IDE Integration: Make sure your IDE's MCP configuration is correct
4. Generation Limits: If you've reached your generation limit, you may need to upgrade your plan

For additional support, visit 21st.dev/magic/support.