Magic UI MCP

Magic UI MCP

Magic UI MCP 是 Magic UI 的官方模型上下文协议 (MCP) 伺服器，提供大量可互動和動畫的 UI 元件整合，能直接透過基於 MCP 的工具在 LLM 驅動的應用程式和 IDE 中調用。

Author: magicuidesign


查看協議

什麼是 Magic UI MCP？

Magic UI MCP 是一個協議伺服器，允許語言模型和 AI 代理發現、檢索和互動於豐富的 Magic UI 現代前端元件集合。透過標準化的 MCP 端點，使用者可以訪問實作細節，獲取範例，並利用先進的元件組建塊，在 AI 工作流程和支援的客戶端中快速開發 UI。

如何配置 Magic UI MCP

您可以通過自動化 CLI 安裝或在您的 IDE 或支援的應用中手動配置 Magic UI MCP。

  • 自動化：運行 
    npx @magicuidesign/cli@latest install <client>
    把 <client> 替換成您的應用程式（如 cursor、windsurf、claude、cline 或 roo-cline）。
  • 手動：將以下區塊添加到您的 IDE 或應用的 MCP 配置文件中： 
    {
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

如何使用 Magic UI MCP

設置完成後，您可以通過讓您的 LLM 驅動的應用程式執行與 UI 相關的任務來與 Magic UI MCP 互動，例如「製作一個標誌的滾動條」或「添加模糊淡化文本動畫」。伺服器將通過其分類工具路由請求，提供實作細節、代碼片段以及針對您提示的 Magic UI 元件的整合指導。

主要特色

  • 豐富的元件訪問：即時檢索數百個獨特 Magic UI 元件的實作細節。
  • 基於類別的工具：元件按功能類別組織，以便有效地發現工具和在上下文有限的環境中使用。
  • 無縫的 LLM 整合：與 MCP 兼容的應用和代理原生運作，隨時準備進行 AI 驅動的 UI 原型設計。
  • 輕量級設置：快速安裝和本地或遠程調用功能。
  • 可擴展：設計用於支持新的元件和分組，伴隨 Magic UI 的發展。

使用案例

  • AI UI 代碼生成：即時使用自然語言提示在 IDE 中生成互動式 UI 和動畫。
  • 元件查詢：在原型設計或學習過程中搜索、探索和檢索 Magic UI 元件的實作細節。
  • 自動化設計轉代碼：讓代理直接將設計想法或靈感轉換為可實作的 UI 代碼。

常見問題

Q1：哪些應用程式支援 Magic UI MCP？
A1：該伺服器可以原生安裝在常用客戶端，如 cursor、windsurf、claude、cline 和 roo-cline。

Q2：如果我需要特定元件的詳細資訊，但它不在工具類別中，該怎麼辦？
A2：您可以在本地運行 MCP 伺服器，並自定義分組邏輯，以訪問或公開更詳細或特定的元件資訊。

Q3：工具使用有什麼限制嗎？
A3：是的，一些客戶端可能會限制每次請求的工具調用次數。Magic UI MCP 按類別分組工具，以優化與這些限制的兼容性。

Q4：我可以使用自己的元件擴展 Magic UI MCP 嗎？
A4：該伺服器是開源且遵循 MIT 授權，因此您可以分支和調整代碼庫，來包含自定義的元件或類別。