Magic

Magic MCP Server lets you generate and integrate AI-powered UI components directly into your project using natural language descriptions. It brings a modern component library, real-time previews, and TypeScript support to streamline UI development across supported IDEs.

How to use

Describe the UI you want by using the /ui command in your AI Agent chat. For example, you can say "/ui create a modern navigation bar with responsive design" to generate a polished component. Your IDE will prompt you to use Magic, and the generated component(s) will be added to your project automatically. You can customize the resulting components just like any other React components in your codebase.

How to install

Prerequisites: install Node.js (Latest LTS recommended). Ensure you have a supported IDE installed, such as Cursor, Windsurf, or VSCode with Cline.

Step by step commands to set up MCP for your IDE.

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

Manual MCP configuration for local usage

If you prefer manual setup, you can configure an MCP server entry directly in your IDE’s MCP config. The following snippet shows a complete stdio-based server configuration for the Magic MCP.

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

VS Code manual setup

For one-time or manual configuration in VS Code, add the MCP settings to your User Settings (JSON). Copy the snippet below and replace placeholders with your API key or set it via an interactive prompt.

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

Configuration notes

If you use the manual JSON approach, you can also place the same settings into a workspace file at ".vscode/mcp.json" for project-wide usage.

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

Security and API keys

Keep your API key secret. Store it in a secure environment variable or a protected VS Code secret store. Do not commit the key to version control. The key is used to authenticate your access to the Magic MCP service.

Notes on usage and capabilities

You gain access to an AI-powered UI generation flow, a modern component library, real-time previews, and full TypeScript support. You can generate new components from natural language, preview them in real time, and customize styling and behavior like any React component.

Available tools

ui_generation

AI-powered generation of UI components from natural language descriptions via /ui command.

real_time_preview

Instant visual preview of components during creation.

typescript_support

Full TypeScript support for type-safe component development.

svg_integration

Access to SVGL assets and logos for branding.

library_integration

Access to a modern component library inspired by 21st.dev.

component_enhancement

Enhance existing components with advanced features and animations (Coming Soon).