21st.dev Magic

Official 🎨 Creative

AI-powered UI component generator that creates polished React components from natural language descriptions. Search a community library, get inspiration, and refine components iteratively — like v0 in your IDE.

Tools (4)

Client configuration

Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "21stdev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@0.2.2"
      ],
      "env": {
        "API_KEY": "your-api-key-here"
      }
    }
  }
}

VS Code (.vscode/mcp.json)

{
  "servers": {
    "21stdev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@0.2.2"
      ],
      "env": {
        "API_KEY": "your-api-key-here"
      },
      "type": "stdio"
    }
  }
}

Replace the placeholders before connecting. Authorize in your client when prompted.

The Cursor JSON also works in Claude Desktop's local MCP configuration. Install the required runtime and local software first.

Documentation →

Activate on Zubnet →

21st.dev Magic

Tags

Tools (4)

Client configuration

Cursor (.cursor/mcp.json)

VS Code (.vscode/mcp.json)

Related Servers