home / mcp / magic mcp server

Magic MCP Server

bach-magic-mcp - 由 MCP工厂自动创建

Installation

Add the following to your MCP client configuration file.

Configuration

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

Magic Component Platform (MCP) empowers you to generate modern UI components from natural language descriptions. It accelerates UI development by enabling instant creation, real-time previews, and seamless IDE integration, so you can focus on design and functionality rather than boilerplate.

How to use

Describe the UI you want directly in your AI chat using the /ui command, for example: /ui create a modern navigation bar with responsive design. Your IDE will prompt you to use Magic, and the system will build a polished UI component that fits your project’s style. The new component is automatically added to your workspace and remains fully customizable.

How to install

Prerequisites you need to prepare before installing MCP:

- Node.js (Latest LTS version recommended)

- One of the supported IDEs: Cursor, Windsurf, or VSCode (with Cline extension)

Method 1: CLI Installation (Recommended) Use a single command to install and configure MCP for your IDE.

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

Supported clients: cursor, windsurf, cline, claude. Replace <client> with your target IDE and <key> with your API key.

Method 2: Manual Configuration If you prefer manual setup, add the MCP server configuration to your IDE config file as shown in the example blocks.

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

Note: Ensure your IDE’s MCP config location matches your environment. Example config locations include Cursor, Windsurf, and Cline paths shown in the setup guide.

Method 3: VS Code Installation For a streamlined experience, use the one-click install button in VS Code. This approach wires MCP directly into your editor and prompts for your API key.

{
  "mcp": {
    "command": "npx",
    "args": ["-y", "@21st-dev/magic@latest"],
    "env": {
      "API_KEY": "${input:apiKey}"
    }
  }
}

Additional setup notes

You can also add the configuration to a workspace file at .vscode/mcp.json to reuse across projects.

{
  "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}"
      }
    }
  }
}

Available tools

UI Generator

Generates UI components from natural language descriptions and integrates directly into your project.

IDE Integration

Supports Cursor, Windsurf, VSCode, and Cline to streamline component creation.

Real-time Preview

Shows live previews of generated components as you describe them.

TypeScript Support

Provides type-safe components with full TypeScript compatibility.

Asset Library

Access to SVGL assets and brand logos for professional references.