21st.dev Magic

官方

根据21st.dev顶尖设计工程师的灵感，创建精心制作的UI组件。

GitHub

5.9k

试用此 MCP赞助

你可以用 21st Dev Magic MCP 做什么？

生成 UI 组件 — 当 AI 访问已启用时，让您的 AI 使用 generate 创建新组件，根据自然语言提示生成变体。
搜索组件目录 — 使用 search 在 21st.dev 中查找组件、主题或模板，然后通过 get_component 获取完整代码。
优化现有设计 — 通过 generate 使用优化提示请求新的生成，并沿用您之前的草稿上下文。
获取付费代码 — 当您的账户已启用付费访问时，通过 get_component 请求高级组件代码。
检查 AI 访问状态 — 在尝试托管生成之前，查询 get_usage 以确认 aiGenerationEnabled 是否为 true。

文档

Magic MCP → 21st MCP

Magic MCP 现在是 21st MCP。 Magic MCP 服务器（@21st-dev/magic）已被统一的 21st MCP 取代，通过 21st CLI 安装——设置见 21st.dev/mcp。此包仍作为轻量兼容代理发布，以便旧配置继续工作。

安装 21st MCP（推荐）

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

或手动添加——它是一个普通的 HTTP MCP 服务器：

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

在 21st.dev/mcp 获取 API 密钥。

旧 Magic API 密钥已重置。 旧 Magic 控制台颁发的密钥已不再有效。请在 21st.dev/mcp 生成新密钥。

此包现在的作用（v0.2.0+）

npx -y @21st-dev/magic@latest API_KEY="..." 仍然有效：自 v0.2.0 起，它是一个小型 stdio 代理，将每条 MCP 消息转发到 21st MCP 服务器。引用 @21st-dev/magic 的现有 mcp.json 条目仍可正常工作——但它们现在与 21st CLI 连接到同一服务器，工具权限取决于已认证账户。

API 密钥接受所有历史形式：位置参数 API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...，或 TWENTY_FIRST_API_KEY / API_KEY_21ST 环境变量。

AI 访问

Builder 组件访问权限不启用托管的 21st AI。服务器仅在启用 AI 访问时列出 generate 和 iterate_generation。请检查 get_usage.aiGenerationEnabled；它报告的是访问权限，而非剩余 AI 信用额度。AI 关闭时，请使用 search 和 get_component，然后用你自己的编码代理调整代码。现有草稿仍可读取。

缓存或旧版生成调用可能返回 ai_subscription_required。在启用 AI 之前不要重试。启用 AI 后，刷新客户端工具列表或重新连接。代理将发现过程转发到服务器，因此现有代理版本无需 npm 更新即可获得此行为。

server.json 镜像了官方 dev.21st/mcp 注册表列表。注册表版本与此兼容包的版本相互独立。

旧工具名称 → 新工具名称

21st MCP 仍接受旧版 Magic 工具名称并自动转换，因此记住旧名称的代理仍可正常工作。建议优先使用新名称：

旧版 Magic 工具	21st MCP 工具
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate`（从细化提示生成新内容）
`logo_search`	`search_logo`（每次调用一个查询）

当前服务器提供的工具远不止旧版四个：跨组件/主题/模板的目录搜索、付费代码检索、书签、团队库、带变体的 UI 生成、个人资料管理等。连接并调用 tools/list 可查看你的账户可用的工具。

作为插件安装

此仓库也打包为代理插件（MCP 服务器 + UI 技能）。无需等待任何商店——此仓库本身就是市场，直接添加：

# 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

在 API_KEY_21ST 变量中设置你的 API 密钥（免费密钥见 21st.dev/mcp）。

商店列表：

Cursor / Grok Bot — 从 Cursor Marketplace 安装“21st”，然后在 Plugins → Configure 下设置你的 API_KEY_21ST。在 21st.dev/mcp 获取密钥。
Grok Build — grok plugin install 21st --trust（来自官方 xAI marketplace），然后导出 API_KEY_21ST。
Claude Code — 仓库带有 .claude-plugin/ 清单：从列出此仓库的任何市场 /plugin install 它，或使用 claude --plugin-dir . 本地加载并导出 API_KEY_21ST。

插件配置要求在每个客户端中将 API 密钥放在 API_KEY_21ST 变量中。

链接

21st MCP 设置与 API 密钥：https://21st.dev/mcp
npm 上的 21st CLI：https://www.npmjs.com/package/@21st-dev/cli
21st.dev — 发现、发布和生成 UI 组件：https://21st.dev

常见问题

为什么我的旧 Magic MCP 停止工作了？ Magic 后端（magic.21st.dev）已被统一的 21st MCP 取代，出于安全考虑，所有旧 API 密钥均已重置。请从 21st.dev/mcp 更新为新密钥——你现有的 @21st-dev/magic 配置将通过此兼容代理重新工作，但我们建议切换到 npx @21st-dev/cli@latest init。

/ui 还存在吗？ 使用自然语言：让代理搜索 21st 上的组件（search），或在启用 AI 时使用托管 UI 生成（generate）。旧的 /ui、/21 触发短语是旧版工具描述中的约定，而非协议的一部分。