● MaintainedDesign

21st.dev Magic MCP Server

It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp

Install

npx -y @21st-dev/magic@latest API_KEY="..."

Example config (Cursor / Claude Desktop)

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

VS Code uses "servers" instead of "mcpServers" (why). On Windows, wrap npx with cmd /c (fix).

At a glance

Repository	21st-dev/magic-mcp
GitHub stars	6,026
Last commit	2026-09-09 (36 days ago)
Status	maintained
Clients mentioned in README	Claude Code, Cursor, VS Code, Windsurf, Codex
Auth	API key/token · `TWENTY_FIRST_API_KEY`
Language / License	TypeScript / ISC

Common problems

Windsurf: MCP server not loading in Cascade (mcp_config.json location)