首頁 > Ai資訊 > Ai產品

Magic MCP：用自然語言描述即時生成UI組件

映技派于2025-03-14發布在Ai產品

Magic MCP是什么？

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

Magic MCP：用自然語言描述即時生成UI組件.jpg

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"
      }
    }
  }
}