# magic-mcp

> MCP Server

This repository hosts the Magic Component Platform (MCP), an AI-driven tool that generates modern UI components from natural language descriptions, integrating with popular IDEs like Cursor and VSCode for streamlined UI development.

## Overview

- **Category:** Developer Tools
- **Language:** HTML
- **Stars:** 5661
- **Forks:** 55
- **Owner:** 21st-dev
- **GitHub:** https://github.com/21st-dev/magic-mcp
- **Homepage:** https://21st.dev/magic
- **Created:** 2025-02-19T13:17:50+00:00
- **Updated:** 2025-03-29T00:00:37+00:00
- **Source:** https://model-context-protocol.com/servers/magic-ai-driven-ui-component-platform

## Setup

## Setup

### Prerequisites

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

### Installation

1. **Generate API Key**

   - Visit [21st.dev Magic Console](https://21st.dev/magic/console)
   - Generate a new API key

2. **Choose Installation Method**

#### Method 1: CLI Installation (Recommended)

One command to install and configure MCP for your IDE:

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

Supported clients: cursor, windsurf, cline, claude

#### Method 2: Manual Configuration

If you prefer manual setup, add this to your IDE's MCP config file:

```json
{
  "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`

## Tools

## Available Tools

1. AI-Powered UI Generation (Create UI components by describing them in natural language)
2. Multi-IDE Support (Integration with Cursor, Windsurf, and VSCode + Cline)
3. Modern Component Library (Access to a vast collection of pre-built, customizable components inspired by 21st.dev)
4. Real-time Preview (Instantly see your components as you create them)
5. TypeScript Support (Full TypeScript support for type-safe development)
6. SVGL Integration (Access to a vast collection of professional brand assets and logos)
7. Component Enhancement (Improve existing components with advanced features and animations)