Magic MCP是什么？

Magic MCP（Magic Magic Component Platform）是一個由21st.dev開發的ai驅動的工具，可以幫助開發者通過自然語言描述快速生成現代化的UI組件。它通過與流行的IDE（如Cursor、WindSurf和VSCode）集成，可以用它生成按鈕、導航欄、登錄框等等界面元素，實時預覽，可以即時查看組件效果，代碼生成后可以隨時修改。

Magic MCP核心功能

Magic MCP的核心功能是通過自然語言描述生成UI組件。開發者只需在AI Agent的聊天框中輸入描述（例如/ui create a modern navigation bar with responsive design），Magic MCP會根據描述即時生成一個完整的UI組件，并將其添加到項目中。

Magic MCP功能亮點

• AI驅動的UI生成：通過自然語言描述創建組件，無需手動編寫代碼。

• 多IDE支持：支持多種流行的IDE，包括：

• Cursor IDE：通過命令行工具集成。

• WindSurf：通過配置文件集成。

• VSCode + Cline（Beta）：通過Cline擴展集成。

• 現代化組件庫：提供大量預構建、可定制化的組件，靈感來源于21st.dev的組件庫。

• 實時預覽：在創建組件時即時查看效果，無需手動刷新。

• TypeScript支持：提供類型安全的開發體驗，適合現代前端開發。

• SVGL集成：提供豐富的品牌資產和標志，方便快速構建專業級UI。

• 組件增強：未來將支持通過AI增強現有組件，添加高級功能和動畫。

Magic MCP使用流程

1. 描述需求

• 在AI Agent的聊天框中輸入/ui，然后描述你想要的組件。例如：/ui create a modern navigation bar with responsive design

2. 生成組件

• Magic MCP會根據描述生成一個完整的UI組件。生成的組件會遵循21st.dev的組件庫風格，并且完全可定制。

3. 集成到項目

• 生成的組件會自動添加到你的項目中，你可以立即開始使用。所有組件都可以像普通的React組件一樣進行編輯和修改。

Magic MCP適用場景

• 快速原型開發：通過自然語言快速生成UI組件，節省時間。

• 團隊協作：與團隊成員共享組件庫，提高開發效率。

• 學習與實驗：快速嘗試新的UI設計，探索不同的設計風格。

Magic MCP安裝與配置

使用Magic MCP之前，需要進行一些簡單的配置。下面是不同IDE的安裝和配置方法：

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

WindSurf

在~/.codeium/windsurf/mcp_config.json中添加以下配置：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline（Beta） 

在Cline的MCP配置中添加以下內容：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Magic MCP常見問題

Q1：Magic MCP如何處理我的代碼庫？

Magic MCP只會寫入或修改與生成組件相關的文件，遵循項目的代碼風格和結構，不會影響其他部分。

Q2：生成的組件可以定制嗎？

可以！生成的組件完全可編輯，代碼結構清晰，你可以像編輯普通React組件一樣修改它們。

Q3：如果超出生成次數怎么辦？

如果你超出每月的生成限制，系統會提示你升級計劃。現有組件仍然可以正常使用。

Q4：組件復雜度有限制嗎？

Magic MCP可以處理從簡單按鈕到復雜交互表單的各種復雜度的組件。建議將非常復雜的UI分解為多個小組件。

GitHub倉庫：https://github.com/21st-dev/magic-mcp

項目官網：https://21st.dev/magic