Magic MCP

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

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

🚀 快速開始

Magic Component Platform (MCP) 是一個強大的AI驅動工具，幫助開發者通過自然語言描述快速創建現代化、美觀的UI組件。它與流行IDE無縫集成，並提供流暢的工作流以支持UI開發。

✨ 主要特性

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

🎯 工作流程

1. 告訴代理你的需求
   • 在AI代理的聊天中，輸入/ui並描述你需要的組件。
   • 示例：輸入“創建一個帶有搜索欄和結果列表的網頁”以生成相應代碼。
2. 獲取即時反饋：在IDE中直接收到關於代碼結構和最佳實踐的建議。
3. 簡化開發流程：通過AI自動生成重複性代碼，如表單驗證、事件處理和狀態管理。

📦 安裝指南

先決條件

• Node.js（版本12及以上）
• npm或yarn
• 安裝支持的IDE（如VSCode, IntelliJ IDEA）

安裝方法

方法一：使用CLI工具

1. 通過npm安裝Magic CLI：

npm install -g magic-cli

2. 在項目目錄中初始化Magic項目：

magic init

3. 按照提示完成配置，選擇所需的IDE和插件。

方法二：手動配置

1. 下載並解壓壓縮包。
2. 配置環境變量（可選）。
3. 手動安裝所需依賴庫。

🤑 常見問題解答

• Q：Magic Agent如何處理我的代碼？ A：它通過分析項目結構和代碼上下文，在IDE中提供即時反饋和建議，而不會直接修改你的文件。
• Q：我可以自定義生成的組件嗎？ A：當然可以！生成的組件使用標準HTML、CSS和JavaScript，你可以根據需要進行任何修改。
• Q：是否有使用限制？ A：目前處於Beta階段，所有功能都是免費使用的。我們將持續改進平臺。

🛠️ 開發信息

項目結構

src/
├── components/    # 存放自定義組件
│   └── Button.vue
├── pages/        # 存放頁面組件
│   └── Home.vue
└── App.vue       # 主應用文件

關鍵組件

• WelcomeOnboarding：新用戶引導流程
• MagicExtension：核心功能擴展模塊
• ComponentGenerator：生成組件的主邏輯

🤝 貢獻指南

我們歡迎任何貢獻！請加入我們的Discord社區，提供反饋並幫助改進Magic Agent。源代碼託管在GitHub。

⚡ 社區與支持

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

⚠️ 重要提示

Magic Agent目前處於Beta階段。在此期間所有功能免費使用。感謝你的反饋和理解，我們將持續優化平臺。

📄 許可證

MIT許可證

🙏 致謝

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

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