21st-dev Magic MCP 服务器

“21st-dev Magic” MCP 服务器能做什么？

21st-dev Magic MCP 服务器 是一个 AI 驱动的平台，旨在帮助开发者通过自然语言描述，瞬间创建美观、现代化的 UI 组件。它作为 AI 助手与开发环境之间的桥梁，实现无缝的 UI 生成、实时预览以及专业品牌资产与 Logo 的集成。支持 Cursor、Windsurf、VSCode 和 Cline 等主流 IDE，让用户只需描述想要的界面，Magic MCP 服务器便会直接在项目中生成并插入精致、可定制的组件，大大简化前端工作流。其目标是通过自动化重复 UI 任务，将 AI 创造力融入日常开发流程，提升开发效率。

提示模板列表

在提供的仓库文档中未列出明确的提示模板。

资源列表

在提供的仓库文档中未列出明确的资源。

工具列表

在提供的仓库文档或 server.py（或同类文件）中未列出明确工具。

此 MCP 服务器的应用场景

• AI 驱动的 UI 生成：通过自然语言描述即可瞬间生成现代 UI 组件，大幅节省样板代码和设计时间。
• 组件增强：为现有 UI 组件升级高阶功能与动画（功能即将上线），加速迭代开发。
• 品牌资产集成：轻松访问并集成专业品牌资产与 Logo，保证设计一致性与专业度。
• 实时预览：组件创建过程实时可见，支持快速原型与反馈循环。
• 多 IDE 支持：在 Cursor、Windsurf、VSCode、Cline 等开发环境中统一体验 AI UI 生成，保障开发体验一致性。

如何进行设置

Windsurf

1. 前置条件：安装 Node.js（最新 LTS 版本）。
2. 获取 API 密钥：前往 21st.dev Magic 控制台 生成。
3. 打开配置文件：编辑 ~/.codeium/windsurf/mcp_config.json。
4. 添加 Magic MCP 服务器：

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存并重启 Windsurf 以应用更改。

API 密钥安全存储： 在配置中使用环境变量：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. 前置条件：安装 Node.js（最新 LTS 版本）。
2. 获取 API 密钥：前往 21st.dev Magic 控制台 生成。
3. 打开配置文件：编辑 ~/.claude/mcp_config.json。
4. 添加 Magic MCP 服务器：

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存并重启 Claude 以应用更改。

API 密钥安全存储：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. 前置条件：安装 Node.js（最新 LTS 版本）。
2. 获取 API 密钥：前往 21st.dev Magic 控制台 生成。
3. 打开配置文件：编辑 ~/.cursor/mcp.json。
4. 添加 Magic MCP 服务器：

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存并重启 Cursor 以应用更改。

API 密钥安全存储：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. 前置条件：安装 Node.js（最新 LTS 版本）。
2. 获取 API 密钥：前往 21st.dev Magic 控制台 生成。
3. 打开配置文件：编辑 ~/.cline/mcp_config.json。
4. 添加 Magic MCP 服务器：

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存并重启 Cline 以应用更改。

API 密钥安全存储：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

如何在流程中使用此 MCP

在 FlowHunt 中使用 MCP

要将 MCP 服务器集成到 FlowHunt 工作流中，首先添加 MCP 组件并连接到你的 AI agent：

点击 MCP 组件打开配置面板。在系统 MCP 配置区，使用如下 JSON 格式填入你的 MCP 服务器信息：

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

配置完成后，AI agent 即可将此 MCP 作为工具，访问其全部功能和能力。请记得将 "magic-mcp" 替换为你的 MCP 服务器实际名称，并将 URL 替换为你自己的 MCP 服务器地址。

概览

仓库未说明 Roots 支持。

我们的看法

21st-dev Magic MCP 服务器在多平台安装与设置方面文档详尽，并有明确的实际应用场景且用户基础庞大活跃。但仓库中未公开 MCP 提示模板、资源、工具及高级 MCP 概念（如 Roots、Sampling）等详细文档，对于进阶用户和集成者来说，透明度有限。

MCP 评分

评分：6/10

21st-dev Magic MCP 服务器在易用性、活跃度及安装配置说明方面表现优异，但因缺乏高级技术细节和公开的 MCP 原语文档而失分。