Magic UI MCP server

Last verified: 2026-09

Generate UI components from 21st.dev.

Community Developer tools Needs a secret Claude Desktop, Cursor, Windsurf, Claude Code, VS Code

What it does

21st.dev Magic (now 21st MCP). Generates UI from a prompt against their component catalog. Needs TWENTY_FIRST_API_KEY. Old tool names were remapped in v0.2.

It sits in Developer tools: Split this category in two.

Good for

Generate one UI component from a prompt against 21st.dev's catalog.
Search logos or get inspiration when you are stuck on a layout.
Review the generated code before it lands in the repo.
Skip it if you already have shadcn's MCP and a design system.

Tools

generate — Create a component from a prompt (new name).
get_inspiration / logo_search / search_logo — Catalog and logo helpers.

Config (Claude Desktop / Cursor / Windsurf)

Paste the JSON below. Same mcpServers shape. Replace placeholder paths and secrets. Windows paths look like C:\\Users\\you\\project, not /path/to. Host-side steps →

Claude Desktop

OS	Config file
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json` (usually `C:\Users\<you>\AppData\Roaming\Claude\`)
Linux	`~/.config/Claude/claude_desktop_config.json`

Cursor

Scope	macOS / Linux	Windows
This project	`.cursor/mcp.json` in the repo root
This user	`~/.cursor/mcp.json`	`%USERPROFILE%\.cursor\mcp.json`

Windsurf

OS	Config file
macOS / Linux	`~/.codeium/windsurf/mcp_config.json`
Windows	`%USERPROFILE%\.codeium\windsurf\mcp_config.json`

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

Windsurf remote MCP: use serverUrl instead of url if the block below is HTTP.

One-liner: npx -y @21st-dev/magic

Secrets it wants: TWENTY_FIRST_API_KEY

Source repo →

How to get started

Get a 21st.dev key. Set TWENTY_FIRST_API_KEY.
Ask it to generate one component. Review the code before you merge it.
If a tool 404s, you are on the old name — see the repo's rename table.

Access risk

The key is billed generation. Generated code is unreviewed supply chain — read it.

When to skip it

Skip it if you already use shadcn's own MCP or you do not want a third-party catalog in the tree.

Instead: shadcn/ui, Figma, Context7.

Developer toolsshadcn/uiAdd shadcn components from the registry. Developer toolsFigmaRead Figma file structure and screenshots. Developer toolsContext7Up-to-date library docs pulled into the prompt.

Vs alternatives

Server	Official?	Needs a secret?	Best for
Magic UI	No	Yes	Generate UI components from 21st.dev.
shadcn/ui	No	No	Add shadcn components from the registry.
Figma	No	Yes	Read Figma file structure and screenshots.
Context7	No	Yes	Up-to-date library docs pulled into the prompt.

More in Developer tools

OfficialEverythingReference server that exercises the whole MCP protocol. OfficialGitRead a local git repo: log, diff, status. OfficialGitHubRepos, issues, PRs, and file contents on GitHub. OfficialGitLabProjects, issues, and merge requests on GitLab.

All 18 in this category →

FAQ

Why did a tool 404?

v0.2 remapped names (old generate → new names). See the repo rename table.

What does the key bill?

TWENTY_FIRST_API_KEY is paid generation. Generated code is unreviewed supply chain.

Magic or shadcn MCP?

shadcn if you want the public registry. Magic if you want 21st.dev's generator.

Does it write files?

It returns code. Your host / Filesystem writes the file. Read it.