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 创造力融入日常开发流程，提升开发效率。

提示模板列表

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

Ready to grow your business?

Start your free trial today and see results within days.

Request demo Log in

资源列表

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

工具列表

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

Join our newsletter

Get latest tips, trends, and deals for free.

Email address

Subscribe

此 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 原语文档而失分。