Overview

Magic MCP is a powerful AI assistant that helps you create modern UI components by simply describing what you need in natural language. This tool is designed to accelerate frontend development by generating high-quality, customizable components that integrate seamlessly with your existing codebase.

Installation

Prerequisites

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

Setup Instructions

Step 1: 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 for Magic MCP

Step 2: Install Magic MCP

Option 1: CLI Installation (Recommended)

Run the following command in your terminal:

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

Replace <client> with your IDE of choice (cursor, windsurf, cline, or claude) and <your-api-key> with the API key you generated.

Option 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

Usage

1. Invoke Magic MCP

   • In your AI Agent's chat, type /ui followed by a description of the component you want to create
   • 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 the component based on your description
   • Review the generated code and preview

3. Integrate and Customize

   • The component will be automatically added to your project
   • All components are fully customizable and follow modern best practices
   • Modify the styling, functionality, and behavior as needed

Features

• AI-Powered UI Generation: Create components through natural language descriptions
• Multi-IDE Support: Works with Cursor, Windsurf, and VSCode (with Cline)
• Modern Component Library: Access to components inspired by 21st.dev
• Real-time Preview: Instantly see your components as you create them
• TypeScript Support: Full TypeScript support for type-safe development
• SVGL Integration: Access to professional brand assets and logos
• Component Enhancement: Improve existing components with advanced features

Troubleshooting

API Key Issues

• Ensure your API key is correctly entered in the configuration
• Check that your API key is active in the 21st.dev console

Component Generation Problems

• Try to be more specific in your component description
• Break down complex UI requests into smaller, more manageable components

IDE Integration Issues

• Make sure you're using a supported IDE version
• Restart your IDE after installation
• Check the MCP configuration file for any syntax errors

Support and Community

• Join the Discord community for help and discussions
• Follow 21st.dev on Twitter for updates
• Visit 21st.dev/magic for more information

Limitations

• Magic MCP is currently in beta, and some features may be experimental
• Very complex UI components might need to be broken down into smaller parts
• Generated components are inspired by 21st.dev's library and may require customization for specific design systems