21st.dev Magic

Name: 21st.dev Magic
Author: 21st.dev

21st.devOfficial

Search 10,000+ React and Tailwind components, generate new UI with AI and publish your own from Cursor, Claude Code or Windsurf.

Setup

Choose your client, copy the config, then fill in any required environment variables.

Add to Cursor Add to VS Code

claude mcp add 21st-dev-magic --env API_KEY='<API_KEY>' --env TWENTY_FIRST_API_KEY='<TWENTY_FIRST_API_KEY>' -- npx -y @21st-dev/magic@latest 'API_KEY={{config.API_KEY}}'

~/.codex/config.toml

[mcp_servers.21st-dev-magic]
command = "npx"
args = ["-y", "@21st-dev/magic@latest", "API_KEY={{config.API_KEY}}"]
env = { API_KEY = "<API_KEY>", TWENTY_FIRST_API_KEY = "<TWENTY_FIRST_API_KEY>" }

# codex mcp add 21st-dev-magic --env API_KEY='<API_KEY>' --env TWENTY_FIRST_API_KEY='<TWENTY_FIRST_API_KEY>' -- npx -y @21st-dev/magic@latest 'API_KEY={{config.API_KEY}}'

~/.cursor/mcp.json

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY={{config.API_KEY}}"
      ],
      "env": {
        "API_KEY": "<API_KEY>",
        "TWENTY_FIRST_API_KEY": "<TWENTY_FIRST_API_KEY>"
      }
    }
  }
}

.vscode/mcp.json

{
  "servers": {
    "21st-dev-magic": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY={{config.API_KEY}}"
      ],
      "env": {
        "API_KEY": "<API_KEY>",
        "TWENTY_FIRST_API_KEY": "<TWENTY_FIRST_API_KEY>"
      }
    }
  }
}

~/.gemini/settings.json

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY={{config.API_KEY}}"
      ],
      "env": {
        "API_KEY": "<API_KEY>",
        "TWENTY_FIRST_API_KEY": "<TWENTY_FIRST_API_KEY>"
      }
    }
  }
}

claude_desktop_config.json

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY={{config.API_KEY}}"
      ],
      "env": {
        "API_KEY": "<API_KEY>",
        "TWENTY_FIRST_API_KEY": "<TWENTY_FIRST_API_KEY>"
      }
    }
  }
}

.trae/mcp.json

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY={{config.API_KEY}}"
      ],
      "env": {
        "API_KEY": "<API_KEY>",
        "TWENTY_FIRST_API_KEY": "<TWENTY_FIRST_API_KEY>"
      }
    }
  }
}

Environment variables

API_KEY
TWENTY_FIRST_API_KEY

Replace the placeholders with your own credentials and keep them out of version control.

Setup

Environment variables

Related