21st.dev Magic is an AI-powered UI component generator that brings v0-like capabilities directly into your IDE. It creates modern, beautiful React components from natural language descriptions and integrates seamlessly with Cursor, Windsurf, VSCode, and Cline. Key features: - Natural language to UI component generation using AI - Access to 21st.dev's component library with pre-built, customizable modern designs - Multi-IDE support including Cursor, Windsurf, VSCode, and Cline - SVGL integration for professional brand assets and logos - Full TypeScript support for type-safe component development - Real-time preview of generated components - Component enhancement with advanced features and animations

21st.dev Magic AI Agent

Magic Component Platform (MCP) is a powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions. It integrates seamlessly with popular IDEs and provides a streamlined workflow for UI development.

🌟 Features

🎯 How It Works

1. Tell Agent What You Need

- In your AI Agent's chat, just type /ui and describe the component you're looking for - Example: /ui create a modern navigation bar with responsive design

2. Let Magic Create It

- Your IDE prompts you to use Magic - Magic instantly builds a polished UI component - Components are inspired by 21st.dev's library

3. Seamless Integration - Components are automatically added to your project - Start using your new UI components right away - All components are fully customizable

🚀 Getting Started

Prerequisites

Installation

1. Generate API Key

- Visit 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:

npx @21st-dev/cli@latest install  --api-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:

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

Config file locations:

#### Method 3: VS Code Installation

For one-click installation, click one of the install buttons below:

[](https://insiders.vscode.dev/redirect/mcp/install?name=%4021st-dev%2Fmagic&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%4021st-dev%2Fmagic%40latest%22%5D%2C%22env%22%3A%7B%22API_KEY%22%3A%22%24%7Binput%3AapiKey%7D%22%7D%7D&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22apiKey%22%2C%22description%22%3A%2221st.dev+Magic+API+Key%22%2C%22password%22%3Atrue%7D%5D) [](https://insiders.vscode.dev/redirect/mcp/install?name=%4021st-dev%2Fmagic&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%4021st-dev%2Fmagic%40latest%22%5D%2C%22env%22%3A%7B%22API_KEY%22%3A%22%24%7Binput%3AapiKey%7D%22%7D%7D&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22apiKey%22%2C%22description%22%3A%2221st.dev+Magic+API+Key%22%2C%22password%22%3Atrue%7D%5D&quality=insiders)

##### Manual VS Code Setup

First, check the install buttons above for one-click installation. For manual setup:

Add the following JSON block to your User Settings (JSON) file in VS Code. You can do this by pressing Ctrl + Shift + P and typing Preferences: Open 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}"
        }
      }
    }
  }
}

Optionally, you can add it to a file called .vscode/mcp.json in your workspace:

```json { "inputs": [ { "type": "promptString", "id": "apiKey", "description": "21st.dev Magic API Key", "password": true } ], "servers": { "@21st-dev/magic": { "command": "npx",