21st-dev/Magic-MCP

分类General
作者Community
星标698
定价Free

简介

Magic-MCP 是一个面向前端开发者的 MCP 插件，旨在将 21st.dev 社区的高质量 UI 组件库直接接入 AI 聊天界面。它解决了 AI 生成代码时经常出现的“样式简陋”或“不符合现代审美”的痛点。通过该协议，开发者无需在浏览器和 IDE 之间频繁切换，直接在 AI 对话中即可调用经过设计工程师优化过的 UI 组件片段。其上手门槛极低，只要配置好 MCP 环境，就能让 AI 具备快速构建高颜值、生产级界面的能力，是提升前端原型开发效率的利器。

核心亮点

  • 直接在 AI 界面调用 21st.dev 顶级 UI 组件
  • 告别简陋样式，快速生成现代感前端代码
  • 大幅减少手动查阅组件库与复制粘贴的时间
  • 无缝集成至支持 MCP 协议的 AI 客户端

完整文档

Magic MCP → 21st MCP

> Magic MCP 现已更名为 21st MCP。 Magic MCP server (@21st-dev/magic) 已被统一的 21st MCP 取代，可通过 21st CLI 安装 —— 设置请访问 21st.dev/mcp。本软件包仍作为轻量级兼容代理发布，以确保旧配置能够继续运行。

安装 21st MCP（推荐）
bash
npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex
或者手动添加 —— 它是一个普通的 HTTP MCP server：
json
{

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

> 旧版 Magic API keys 已重置。 由旧版 Magic 控制台颁发的 Key 已在所有场景失效。请在 21st.dev/mcp 生成新 Key。

此包目前的功能 (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 key 支持所有历史形式：位置参数 API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...，或 TWENTY_FIRST_API_KEY / API_KEY_21ST 环境变量。

旧工具名称 $\rightarrow$ 新工具名称

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 以查看完整列表。

Links

  • 21st MCP setup & API keys: https://21st.dev/mcp
  • 21st CLI on npm: https://www.npmjs.com/package/@21st-dev/cli
  • 21st.dev — discover, publish, and generate UI components: https://21st.dev

FAQ

为什么我之前的 Magic MCP 停止工作了？
Magic 后端 (magic.21st.dev) 已被统一的 21st MCP 取代，且出于安全考虑，所有旧的 API keys 已被重置。请从 21st.dev/mcp 更新为新 key —— 之后您现有的 @21st-dev/magic 配置将可以通过此兼容代理重新工作，但我们建议切换至 npx @21st-dev/cli@latest init。

/ui 仍然可用吗？
请使用自然语言：要求您的 agent 在 21st 中搜索组件 (search) 或生成新 UI (generate)。旧的 /ui、/21 触发词是旧版工具描述中的约定，而非协议要求。

查看官方来源