Magic MCP : service MCP pour la génération de composants d'interface utilisateur modernes

Introduction générale

Magic MCP 是由 21st.dev 团队开发的一款 AI 驱动工具，专为前端开发者设计。它能通过自然语言描述即时生成现代化的 UI 组件，集成在 Cursor、WindSurf 和 VS Code（Cline 插件）等开发环境中。用户只需输入简单的需求，比如“创建一个现代导航栏”，Magic MCP 就会生成基于 Réagir 的组件代码，搭配 Tailwind CSS 样式和 TypeScript 支持。这个工具完全开源，托管在 GitHub 上，开发者可以免费使用。它提供实时预览和丰富的组件库，适合快速原型设计或团队开发。

Liste des fonctions

• 自然语言生成组件：用文字描述需求，自动生成 React 组件代码。
• 多款IDE支持：无缝集成 Cursor、WindSurf 和 VS Code（Cline Beta版）。
• 现代组件库：提供大量可定制组件，设计灵感来自 21st.dev。
• Aperçu en temps réel：生成组件时即时查看效果，方便调试。
• Support TypeScript：确保生成的代码类型安全，减少错误。
• SVGL 集成：内置专业品牌图标和标志，直接嵌入组件。
• 组件增强（即将推出）：为已有组件添加高级功能和动画。

Utiliser l'aide

Processus d'installation

Magic MCP 需要安装在支持的 IDE 中，以下以 Curseur 为例，其他 IDE（如 WindSurf 或 VS Code + Cline）安装类似：

1. Préparation de l'environnement
   确保电脑已安装 Node.js（推荐最新 LTS 版本，如 v22）和 npm。这是运行 Magic MCP 的基础。
2. Obtenir la clé API
   访问 21st.dev 官网，登录后进入“API”页面，生成一个新的 TWENTY_FIRST_API_KEY。没有密钥也能试用，但功能受限。
3. 安装 Magic MCP
   Ouvrez un terminal et exécutez la commande suivante :

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

commandant en chef (militaire) 你的API密钥 替换为从官网获取的密钥。

4. 配置 Cursor IDE
   在 Cursor 中打开设置，找到“模型上下文协议（MCP）”选项，添加以下配置：

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

保存后重启 IDE。

5. Vérifier l'installation
   在 Cursor 聊天窗口输入 /ui，若提示“使用 Magic MCP 创建组件”，说明安装成功。

WindSurf 配置

existent ~/.codeium/windsurf/mcp_config.json Ajouter :

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS Code + Cline 配置（Beta）

existent Cline 的 MCP 配置中添加：

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Comment utiliser les principales fonctionnalités

生成 UI 组件

• procédure: :
  1. 在 IDE 聊天窗口输入 /ui，后面跟上需求，比如 /ui 创建一个带搜索功能的导航栏.
  2. Magic MCP 会生成一个 React 组件代码，直接显示在窗口中。
  3. 点击“插入代码”，代码自动添加到项目文件中。
• 细节说明: :
  组件默认使用 Tailwind CSS 样式和 TypeScript，可手动调整代码。输入描述越具体，结果越贴合需求。
• exemple typique: :
  Entrée :/ui 一个蓝色按钮
  Sortie :

  const BlueButton = () => {
  return (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  点击我
  </button>
  );
  };
  export default BlueButton;
  

Aperçu en temps réel

• procédure: :
  1. 生成组件后，IDE 会显示预览窗口，展示组件效果。
  2. 修改代码后，预览自动更新。
• 细节说明: :
  若本地项目未运行，预览依赖 Magic MCP 内置渲染，可能与实际效果略有不同。

使用 SVGL 图标

• procédure: :
  1. importation /logo 品牌名par exemple /logo Twitter.
  2. 工具返回 SVG 或 JSX 格式的图标代码。
  3. 复制到组件中使用。
• exemple typique: :
  Entrée :/logo GitHub
  Sortie :

  const GitHubIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
  <!-- GitHub SVG 路径 -->
  </svg>
  );
  

Détails du processus d'opération

1. Lancement de projets
   确保前端项目已创建（如用 Create React App）。Magic MCP 会根据项目结构生成代码。
2. exigence d'entrée
   在 IDE 中用自然语言描述，比如“一个响应式的卡片列表”。描述清晰，结果更准确。
3. Code d'ajustement
   生成后检查代码，修改样式或逻辑以满足需求。
4. test opérationnel
   保存代码，运行项目（如 npm start），确认效果。

mise en garde

• 每月生成次数有限，超限后需升级付费计划。
• 复杂组件建议拆分成多个简单需求生成。
• 遇到问题可加入 Discord 社区 求助。

scénario d'application

1. Prototypage rapide
   开发者需要展示 UI 效果时，Magic MCP 能迅速生成组件，节省时间。
2. 团队代码复用
   团队通过 21st.dev 共享组件，统一风格，提高效率。
3. 学习前端技术
   新手用它生成标准代码，边改边学，快速上手 React。

QA

1. Magic MCP 免费吗？
   是的，它在 GitHub 上开源，基本功能免费，高级功能需 API 密钥和付费计划。
2. 生成的代码能商用吗？
   可以，代码归用户所有，可用于任何项目。
3. 支持哪些 IDE？
   当前支持 Cursor、WindSurf 和 VS Code（Cline Beta版），未来可能扩展。