magic-mcp

MCP server by 21st-dev · ★ 6k · updated 1 month ago

Developer ToolsMaintainedRemote availableOne-click install

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 View on GitHub Website

Install magic-mcp

Choose your AI client and copy the config.

Add to claude_desktop_config.json — macOS: ~/Library/Application Support/Claude/, Windows: %APPDATA%\Claude\. Then restart Claude.

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "@21st-dev/cli@latest",
        "init",
        "--client",
        "cursor",
        "#",
        "or:",
        "claude",
        "|",
        "vscode",
        "|",
        "windsurf",
        "|",
        "codex"
      ]
    }
  }
}

Add to Cursor

Or add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project).

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "@21st-dev/cli@latest",
        "init",
        "--client",
        "cursor",
        "#",
        "or:",
        "claude",
        "|",
        "vscode",
        "|",
        "windsurf",
        "|",
        "codex"
      ]
    }
  }
}

Install in VS Code

Or add to .vscode/mcp.json in your workspace.

{
  "servers": {
    "magic-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@21st-dev/cli@latest",
        "init",
        "--client",
        "cursor",
        "#",
        "or:",
        "claude",
        "|",
        "vscode",
        "|",
        "windsurf",
        "|",
        "codex"
      ]
    }
  }
}

Run in your terminal:

claude mcp add magic-mcp -- npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex

Run the server directly:

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Before you install: Install command taken from the project README. The README mentions API keys or tokens — you'll likely need to add them as environment variables ("env") in the config.

Related Developer Tools servers

Everything (official reference server)

by modelcontextprotocol · TypeScript

Test/reference server that exercises every MCP feature (prompts, tools, resources, sampling). Built for MCP client developers, not for everyday use.

Developer ToolsOfficialMaintainedRemote91.2k (repo)

Git (official reference server)

by modelcontextprotocol · Python

Tools to read, search and manipulate Git repositories (status, diff, log, commit, branches) via LLMs.

Developer ToolsOfficialMaintained91.2k (repo)

Context7

by upstash · TypeScript

Up-to-date, version-specific library documentation and code examples pulled straight into your prompt, so coding assistants stop hallucinating outdated APIs.

Developer ToolsMaintained63k

codebase-memory-mcp

by DeusData · C

High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds. 158 languages, sub-ms queries, 99% fewer tokens. Single static binary, zero dependencies.

Developer ToolsMaintained46.5k

github-mcp-server

by github · Go

GitHub's official MCP Server

Developer ToolsMaintainedRemote33.6k

code-review-graph

by tirth8205 · Python

Local-first code intelligence graph for MCP and CLI. Builds a persistent map of your codebase so AI coding tools read only what matters, with benchmarked context reductions on reviews and large-repo workflows.

Developer ToolsMaintainedRemote32.1k