21st.dev Magic

官方

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

GitHub

5.6k

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

搜索 21st.dev 目录 — 通过 search 工具描述你的需求，查找组件、主题或模板。
根据提示生成 UI 组件 — 请求符合描述的 React 组件，并通过 generate 获取可直接使用的代码。
获取组件灵感 — 使用 get_inspiration 检索针对特定用例的精选组件示例。
查找公司标志 — 通过 search_logo 按公司名称查找 SVG 标志（每次调用仅限一个查询）。
获取付费代码 — 访问你通过平台购买的高级组件。

文档

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 服务器。现有的 mcp.json 条目若引用 @21st-dev/magic，将继续运行 — 但它们现在与 21st CLI 连接到同一服务器，并拥有完整的当前工具集。

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

旧工具名称 → 新工具名称

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 以查看完整集合。

链接

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)，或生成新的 UI (generate)。旧的 /ui、/21 触发短语是旧工具描述的约定，而非协议的一部分。