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

Magic MCP → 21st MCP (兼容性代理)

它是什么 – 一个微型的 npm 包 (@21st-dev/magic-mcp)，可作为旧有 Magic MCP 服务器的直接替换方案。它只需将每个 MCP (Multi-Component Protocol) 请求转发至新的 21st MCP 服务，让您在迁移到较新的 21st CLI 时，旧有的配置能够继续工作。

如何工作

该包是一个 stdio proxy：您运行 npx @21st-dev/magic@latest API_KEY="…" 并将 JSON-RPC-like MCP 消息转发至 https://21st.dev/api/mcp。
它接受多种传统的方式来提供 API 密钥，包括：位置参数、--API_KEY=、/API_KEY:、-API_KEY，或环境变量 TWENTY_FIRST_API_KEY / API_KEY_21ST。
您所连接的服务器与 21st CLI 使用的是同一个，因此您以前可以调用的所有工具（generate、iterate_generation、search 等）仍然可用，只是改用新的名称。

入门指南

# 推荐做法 – 通过 CLI 安装完整的 21st MCP
npx @21st-dev/cli@latest init --client cursor   # or claude | vscode | windsurf | codex

如果只需要 proxy：

# 仅安装 proxy
npx -y @21st-dev/magic@latest API_KEY="YOUR_21ST_API_KEY"

或者手动将服务器添加到 mcp.json 配置中：

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

注意： 旧的 Magic API 密钥不再有效；请在 https://21st.dev/mcp 生成一个新的。

AI 访问

当您的账户启用 AI 生成功能 (get_usage.aiGenerationEnabled) 时，服务器才会列出 generate 和 iterate_generation 工具。
在没有 AI 的情况下，您仍然可以使用 search、get_component 等，并对返回的草案运行您自己的编码代理。
如果调用了需要付费 AI 订阅的工具，会返回 ai_subscription_required；只需等待 AI 功能被启用后再重试即可。

旧工具名称映射

旧 Magic 工具	21st MCP 工具
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (refine)
`logo_search`	`search_logo`

代理会自动翻译旧名称，因此现有的代理程序可以继续工作。

作为插件使用

该仓库提供多种 AI 助手平台的插件清单：

Claude Code – claude plugin marketplace add 21st-dev/magic-mcp 然后 /plugin install 21st
Grok Build – grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust
Cursor – 从 Cursor Marketplace 安装

21st-dev/magic-mcp