Magic UI MCP Server Setup: Cursor, Claude Code, VS Code

The short version: run npx @magicuidesign/cli@latest install cursor (or windsurf, claude, cline, roo-cline), restart the editor, and the Magic UI MCP server is live — your AI editor can now search the real component registry and install components with the correct npx shadcn@latest add command instead of inventing markup. For Claude Code and VS Code, which the installer does not target directly, add a five-line JSON entry shown below. The server is free, needs no API key, and works with the free library.

What the Magic UI MCP server actually does

The Magic UI MCP server (@magicuidesign/mcp, currently version 2.0.0, published March 2026) is a Model Context Protocol server maintained in the official magicuidesign/mcp repository. Once your editor connects to it, the model gains three tools:

• listRegistryItems — lists items in the Magic UI registry with optional filters (kind, query, limit, offset); good for browsing.
• searchRegistryItems — keyword search across component names, titles, descriptions and registry types, with pagination.
• getRegistryItem — full details for one item, including the exact install instructions and, optionally, source, related items and examples.

Because the server reads the live registry rather than a hard-coded list, new components appear in your editor as soon as they ship. It does not model broad concepts such as “widgets” or “media” as categories — ask for the thing you want (“a marquee of logos”, “a blur fade text animation”, “a grid background”) and let it search.

One naming note: Magic MCP from 21st.dev is a different, unrelated product. If your editor already lists a server called “Magic”, check the package name — the official Magic UI server is @magicuidesign/mcp.

Before you start

• Node.js 18 or newer (the server runs through npx).
• A React project with shadcn/ui initialised (npx shadcn@latest init) — the editor still runs the normal shadcn install command, it just knows which one. See the install guide if you have not set that up.
• No account, token or key. Pro components are a separate flow (they need your Pro registry token); the MCP server itself is free.

Step 1 — Install with the official CLI (Cursor, Windsurf, Claude Desktop, Cline, Roo Cline)

1. In your project directory run npx @magicuidesign/cli@latest install cursor — replace cursor with windsurf, claude, cline or roo-cline.
2. The CLI writes the MCP entry into that client’s config file for you.
3. Restart the editor (or reload MCP servers from its settings) and confirm a server named @magicuidesign/mcp shows as connected with three tools.

If the CLI cannot find your client’s config, use the manual entry below — it is the same five lines everywhere.

Step 2 — Manual configuration (Claude Code, VS Code, or any MCP client)

The canonical config from the official README:

{
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

Where it goes:

• Cursor — project-level .cursor/mcp.json (recommended) or global ~/.cursor/mcp.json.
• Windsurf — ~/.codeium/windsurf/mcp_config.json.
• Claude Desktop — claude_desktop_config.json (Settings → Developer → Edit Config).
• Claude Code — one terminal command instead of a file: claude mcp add magicui -- npx -y @magicuidesign/mcp@latest (add --scope project to share it via .mcp.json in the repo). Verify with claude mcp list.
• VS Code (Copilot agent mode) — .vscode/mcp.json uses a servers key rather than mcpServers:

{
  "servers": {
    "magicui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

Save, reload the window, and the server appears in the agent’s tool list.

Step 3 — Use it: prompts that work

Ask in plain language and name the intent, not a component you half-remember:

• “Add a marquee of our customer logos above the footer.”
• “Give the hero headline a blur fade text animation.”
• “Put a subtle dot-pattern background behind the pricing section.”
• “Which Magic UI component shows a terminal typing commands?” (the model calls searchRegistryItems, finds terminal, then getRegistryItem for the install command).

The editor runs npx shadcn@latest add @magicui/<slug>, the file lands in components/ui/, and the model wires the import. Review the diff as you would any generated code — the component is real, the placement is the model’s guess.

Troubleshooting

• Server never connects — run npx -y @magicuidesign/mcp@latest once in a terminal; if it errors, upgrade Node (18+) or clear the npx cache. Corporate proxies that block npm registry access also block this.
• Tools connect but installs fail — shadcn/ui is not initialised in the project; run npx shadcn@latest init and retry.
• Two “Magic” servers — you also have 21st.dev’s Magic MCP; disable one to keep tool names unambiguous.
• Cursor tool limit — Cursor caps the number of tools per session; the Magic UI server exposes only three, so it rarely triggers the cap, but disable unused servers if prompts stop calling tools.

Next: Getting started with Magic UI in Next.js 15 for the manual path, or the component overview to see every family the MCP server can reach.