21st.dev Magic AI Agent

Name: 21st.dev Magic AI Agent
Author: 21st-dev

精选本地服务

21st.devAI 与智能体6.3k7 周前更新

代码仓库访问官网

关于 21st.dev Magic AI Agent

21st MCP 是面向前端 UI 开发的 MCP 服务，可在 Cursor、Windsurf、Cline 等编辑器中搜索并生成组件。项目同时提供 21st CLI 用于安装配置，并保留旧 Magic MCP 的兼容代理。

主要功能

01搜索 21st 组件目录
02通过 21st CLI 完成客户端配置
03可选的托管 UI 生成（需启用 AI）
04兼容旧 Magic 工具名称和配置

适用场景

01在编辑器中查找前端组件
02为现有项目生成或调整 UI 代码
03让旧版 @21st-dev/magic 配置继续可用

MCP 相关

该项目是一个 HTTP MCP 服务，向 MCP 客户端暴露组件搜索、获取和生成等工具；旧版 @21st-dev/magic 以 stdio 代理的形式转发消息到同一服务。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/cli"
      ]
    }
  }
}

启动命令npx -y @21st-dev/cli

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@21st-dev/clistdio

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

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，然后使用你自己的编码 Agent 调整代码。现有草稿仍可读取。

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

server.json 与官方 dev.21st/mcp 注册表列表保持一致。注册表版本独立于此兼容软件包的版本。

旧工具名称 → 新工具名称

21st MCP 仍接受旧版 Magic 工具名称并将其转换，因此记得旧名称的 Agent 仍可正常工作。建议使用新名称：

旧版 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，即可查看你的账户可用的工具。

作为插件安装

此仓库也打包为 Agent 插件（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_KEY_21ST 变量中提供 API 密钥。

链接

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 还可以用吗？ 请使用自然语言：让 Agent 在 21st 中搜索组件（search），或者在启用 AI 时使用托管式 UI 生成（generate）。旧版 /ui、/21 触发短语只是旧工具描述中的一种约定，并非协议的一部分。