# @21st-dev/magic 中文文档

规范地址：https://npmcn.com/package/%4021st-dev/magic/

版本：0\.2\.3
npm 元数据更新时间：2026-09-09T20:38:44.658Z
中文译文更新时间：2026-11-05T19:06:43.757Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%4021st-dev/magic
原文对照：https://npmcn.com/package/%4021st-dev/magic/?lang=original
项目主页：https://21st.dev/mcp
源码仓库：https://github.com/21st-dev/magic-mcp

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：14.4 kB，4 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=18\.0\.0
- 运行依赖：0 个
- 首次发布：2025-03-11T18:52:03.455Z
- 最新版本发布：2026-09-09T20:38:44.325Z
- 近 30 天下载量：45857（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：48（近 12 个月 6 个）

## 中文简介

Magic MCP现在是第21个MCP. 此软件包是一个为旧配置保存的相容性代理服务器 - 新设置应该使用 `npx @21st-dev/cli@latest init`设置 : [https://21st.dev/mcp (英语)](https://21st.dev/mcp)

## 安装

```sh
npm install @21st-dev/magic
```

也可以使用：`pnpm add @21st-dev/magic`、`yarn add @21st-dev/magic`、`bun add @21st-dev/magic`

## README

# 魔法MCP — 第21届MCP

> **Magic MCP现在是第21个MCP.** Magic MCP 服务器 (`@21st-dev/magic`)已被统一 **第二十一届MCP**,通过 **第21次全国学习** 设置于 [第21次/分钟](https://21st.dev/mcp)。这个软件包仍然作为薄相容性代理发布,所以旧的配置继续工作.

## 安装第21个 MCP( 建议)

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

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

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

获取 API 密钥 [第21次/分钟](https://21st.dev/mcp)。 。 。 .

> **旧魔法API密钥被重置 .** 旧魔法控制台发行的密钥 已经不在任何地方工作了 生成新密钥 [第21次/分钟](https://21st.dev/mcp)。 。 。 .

## 这个软件包现在做什么(v.2.0+)

`npx -y @21st-dev/magic@latest API_KEY="..."` 仍然有效:自v.0.2.0起,它是一个将每个MCP消息转发给第21个MCP服务器的小型stdio代理. 现有 `mcp.json` 条目 `@21st-dev/magic` 保持正常运行——但他们现在与第21CLI同台服务器通话,拥有认证账户可用的工具.

API 键以所有历史形式被接受:位置 `API_KEY="..."`, (中文(简体) ), `--API_KEY=...`, (中文(简体) ), `/API_KEY:...`, (中文(简体) ), `-API_KEY ...`,或 `TWENTY_FIRST_API_KEY` 编号 : `API_KEY_21ST` 环境变量.

## AI 访问

构建器组件访问无法启用主机 第21回AI. 服务器列表 `generate` 财务报告和审定财务报表 `iterate_generation` 只有当 AI 访问被启用时。 检查 `get_usage.aiGenerationEnabled`;这个报告访问,而不是剩下的AI 贷方余额。 关闭AI,使用 `search` 财务报告和审定财务报表 `get_component`,然后调整 代码与自己的编码代理。 现有草案仍可读取.

缓存或遗留的生成呼叫可以返回 `ai_subscription_required`执行 在 AI 启用之前不要重试 。 更新客户端工具列表或重新连接 授权大赦国际。 代理向服务器转发发现, 所以已有代理 版本接收此行为而不更新 npm.

`server.json` 镜像官方 `dev.21st/mcp` 登记清单。 登记处 版本独立于此兼容包版本.

## 旧工具名 新工具名

第21回MCP仍然接受遗留的"魔法"工具名并进行翻译,因此能记住旧名的代理继续工作. 优先使用新名称:

| 遗留魔法工具 | 第21个MCP工具 |
| --- | --- |
| `21st_magic_component_builder` | `generate` |
| `21st_magic_component_inspiration` | `get_inspiration` |
| `21st_magic_component_refiner` | `generate` (精细化后的新一代) |
| `logo_search` | `search_logo` (每个电话一个查询) |

目前的服务器比旧有的四种工具更能曝光:跨组件/主题/templates的目录搜索,付费代码检索,书签,团队库,有变体的UI生成,配置管理,等等. 连接和呼叫 `tools/list` 查看您账户可用的工具.

## 作为插件安装

此寄存器也被打包为代理插件(MCP服务器+UI技能). 你不需要等待任何商店——这个Repo是一个市场,直接添加:

```bash
# 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 密钥设置在 `API_KEY_21ST` 变量( 空键在 [第21次/分钟](https://21st.dev/mcp)) (中文(简体) ).

存储列表 :

-   **光标 / Grok 瓶** ——安装"21st"从 [光标市场](https://cursor.com/marketplace),然后设置您的 `API_KEY_21ST` 下级 **插件 — 配置**。获取密钥到 [第21次/分钟](https://21st.dev/mcp)。 。 。 .
-   **Grok 构建** —— 说 `grok plugin install 21st --trust` (来自官员) [xAI市场](https://github.com/xai-org/plugin-marketplace)),然后导出 `API_KEY_21ST`。 。 。 .
-   **克劳德代码** ——还本付息带出 `.claude-plugin/` 显示 : `/plugin install` 它来自任何列出这种回购的市场,或装入本地 `claude --plugin-dir .` 和导出 `API_KEY_21ST`。 。 。 .

插件配置预期 API 密钥 `API_KEY_21ST` 每个客户端中的变量.

## 链接

-   第21回 MCP 设置 & API 密钥 : [https://21st.dev/mcp (英语)](https://21st.dev/mcp)
-   https://www.npmjs.com/package/@21st-dev/cli 互联网档案馆的存檔,存档日期2013-12-02
-   21st.dev — 发现、发布和生成UI组件 : [https://21st.dev (英语)](https://21st.dev/)

## 财务问题

**为什么我的魔法MCP停止工作?** 魔法后端( T)`magic.21st.dev`)被统一后的第21个MCP所取代,所有旧的API密钥被重置用于安全. 更新到新密钥来自 [第21次/分钟](https://21st.dev/mcp) -你现在的 `@21st-dev/magic` 配置将会通过此兼容性代理再次工作, 尽管我们建议切换到 `npx @21st-dev/cli@latest init`。 。 。 .

**这是 `/ui` 还是一样?** 使用自然语言: 请您的代理搜索第 21 个组件( U)`search`),或使用主机UI生成(`generate`) 当AI被启用. 旧的 `/ui`, (中文(简体) ), `/21` 触发短语是遗留工具描述的公约,而不是协议.

## 常见问题

### @21st-dev/magic 是什么？

Magic MCP现在是第21个MCP\. 此软件包是一个为旧配置保存的相容性代理服务器 - 新设置应该使用 npx @21st-dev/cli@latest init设置 : https://21st\.dev/mcp \(英语\)

### 如何安装 @21st-dev/magic？

在项目目录运行 npm install @21st-dev/magic，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 magic，可以用 npx magic 直接运行。

### @21st-dev/magic 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/21st-dev\_\_magic 是否存在。

### @21st-dev/magic 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @21st-dev/magic 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @21st-dev/magic 可以商用吗？

@21st-dev/magic 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @21st-dev/magic 的下载量有多少？

根据 npm 官方下载统计，@21st-dev/magic 在 2026/10/05 – 2026/11/03 这 30 天内被下载 45,857 次，日均约 1,529 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @21st-dev/magic 还在维护吗？

最新版本 0\.2\.3 发布于 2026/09/10（1 个月前）；至今共发布 48 个版本，其中过去 12 个月发布了 6 个；首次发布于 2025/03/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。