Magic MCP → 21st MCP

Magic MCP is now the 21st MCP. The Magic MCP server (@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.

Install the 21st MCP (recommended)

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

Or add it manually — it is a plain HTTP MCP server:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Get an API key at 21st.dev/mcp.

Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.

What this package does now (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the full current toolset.

The API key is accepted in all the historical forms: positional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., or the TWENTY_FIRST_API_KEY / API_KEY_21ST environment variables.

Old tool names → new tool names

The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names:

Legacy Magic tool	21st MCP tool
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (new generation from the refinement prompt)
logo_search	search_logo (one query per call)

The current server exposes much more than the old four tools: catalog search across components/themes/templates, paid code retrieval, bookmarks, team libraries, UI generation with variants, profile management, and more. Connect and call tools/list to see the full set.

Install as a plugin

This repository is also packaged as an agent plugin (MCP server + a UI skill). You don't need to wait for any store — this repo IS a marketplace, add it directly:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Set your API key in the API_KEY_21ST variable (free key at 21st.dev/mcp).

Store listings:

• Cursor / Grok Bot — install "21st" from the Cursor Marketplace, then set your API_KEY_21ST under Plugins → Configure. Get a key at 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (from the official xAI marketplace), then export API_KEY_21ST.
• Claude Code — the repo carries a .claude-plugin/ manifest: /plugin install it from any marketplace that lists this repo, or load locally with claude --plugin-dir . and export API_KEY_21ST.

The plugin config expects the API key in the API_KEY_21ST variable in every client.

Links

• 21st MCP setup & API keys: https://21st.dev/mcp
• 21st CLI on npm: https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev — discover, publish, and generate UI components: https://21st.dev

FAQ

---

GitHub에서 전체 내용 보기