Magic (21st.dev UI Generator)

🚀 21世紀魔法人工智能代理

Magic Component Platform（MCP）是一款強大的AI驅動工具，可助力開發者通過自然語言描述，快速生成美觀的現代UI組件。它能與流行的IDE無縫集成，為開發者提供流暢的UI開發工作流。

🚀 快速開始

前提條件

• Node.js（推薦使用最新的LTS版本）
• 以下支持的IDE之一：
  • Cursor
  • Windsurf
  • VSCode（需安裝Cline擴展）

安裝

1. 生成API密鑰
   • 訪問Magic儀表盤。
   • 轉到API部分。
   • 生成新的API密鑰。
2. 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的源代碼管理中：

{
  "apiKeys": {
    "21st.dev": "your-api-key"
  }
}

✨ 主要特性

• AI驅動的UI生成：可通過自然語言描述創建UI組件。
• 多IDE支持：
  • 集成Cursor IDE。
  • 支持Windsurf。
  • 集成VSCode + Cline（Beta版）。
• 現代組件庫：可訪問大量預建且可自定義的組件，這些組件的靈感源自21st.dev。
• 即時預覽：在創建過程中可即時查看組件。
• TypeScript支持：提供全面的TypeScript支持，實現類型安全的開發。
• SVGL整合：可訪問專業品牌資產和標誌的龐大集合。
• 組件增強：為現有組件添加高級功能和動畫（即將推出）。

📚 詳細文檔

🎯 工作原理

1. 告訴代理你需要什麼
   • 在AI代理的聊天中，只需輸入/ui並描述所需的組件。
   • 示例：/ui 創建一個現代響應式導航欄。
2. 讓魔法生成它
   • 你的IDE會提示使用Magic。
   • Magic會瞬間構建出精美的UI組件。
   • 組件靈感來自21st.dev庫。
3. 無縫集成
   • 組件會自動添加到項目中。
   • 可立即開始使用新的UI組件。
   • 所有組件均可完全自定義。

🤝 貢獻

我們歡迎大家貢獻力量！請加入我們的Discord社區並提供反饋，以幫助我們改進Magic代理。源代碼可在GitHub上獲取。

👥 社區與支持

• Discord社區 - 加入我們活躍的社區。
• Twitter - 關注我們以獲取更新。

⚠️ 重要提示

Magic代理目前處於Beta階段。在此期間所有功能都是免費的。感謝您的反饋和耐心，我們將繼續改進平臺。

📄 許可證

本項目採用MIT許可證。

🙏 致謝

• 感謝我們的Beta測試人員和社區成員。
• 特別感謝Cursor、Windsurf和Cline團隊的合作。
• 感謝與21st.dev的集成，為組件提供靈感。
• 感謝SVGL的品牌資產整合。

更多詳細信息，請加入我們的Discord社區或訪問21st.dev/magic。