Setup guide

Set up magic-mcp in Cursor

communitystdiohealthy

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

01Configuration

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  }
}

Add this to .cursor/mcp.json. Generated from the captured install method (npx); the mcpServers shape is shared across Claude Desktop, Cursor, Windsurf, Cline, and VS Code.

02Steps

Make sure Cursor is installed and up to date.
Open .cursor/mcp.json and add the block above (merge into any existing mcpServers).
Provide any required API keys/credentials as environment variables.
Restart Cursor and confirm magic-mcp’s tools appear.

03Other runtimes

Claude Desktop Windsurf Cline Continue Goose VS Code OpenAI Agents SDK LangGraph CrewAI

04Provenance

config_sourcegenerated from captured install method

last_checked2026-08-16 21:33Z

sourcesGitHub repo search [p4] · Awesome MCP Servers (wong2) [p6]

Next step

Want agents that act within guardrails? Apex is the live governed-agent product — paced, capped, and fully-logged actions with approvals before anything runs.

Explore Apex →

See also: server page · is it safe? · alternatives