21世代.dev 魔法人工智慧代理人

什麼是 Magic MCP？

Magic MCP 是由 21st-dev 開發的一個創新伺服器，增強了前端應用程式的功能。它為開發者提供了無縫的整合體驗，適用於各種前端框架，如 Cursor、WindSurf 和 Cline。這個工具讓開發者以一種神奇的方式與他們的前端專案互動，因此得名「Magic MCP」。

Magic MCP 的特點

• 無縫整合：Magic MCP 與流行的前端框架無縫整合，使開發者能輕鬆增強他們的專案，而無需大量配置。
• 使用者友好的介面：伺服器的設計注重可用性，確保開發者能輕鬆導航並利用其功能。
• 實時協作：Magic MCP 支持實時協作，允許多位開發者同時在同一專案上工作而不會產生衝突。
• 廣泛的文檔：提供全面的文檔，幫助開發者快速入門並充分利用伺服器的功能。
• 活躍的社群支持：隨著用戶社群的增長，開發者可以找到支持並分享經驗，提升整體開發過程。

如何使用 Magic MCP

1. 安裝：首先在本地機器或伺服器上安裝 Magic MCP。按照文檔中提供的安裝說明進行操作。
2. 配置：配置伺服器設置以符合您的專案需求，包括設置必要的環境變數和依賴項。
3. 整合：按照您選擇的技術的具體指導，將 Magic MCP 與您的前端框架整合。
4. 開發：開始使用 Magic MCP 提供的功能開發您的前端應用程式。利用實時協作工具有效地與您的團隊合作。
5. 部署：一旦您的應用程式準備就緒，使用內建的部署工具或您首選的部署方法進行部署。

常見問題

問：Magic MCP 支持哪些框架？

答：Magic MCP 支持多種前端框架，包括 Cursor、WindSurf 和 Cline，讓開發者可以選擇最適合他們專案的框架。

問：Magic MCP 是免費使用的嗎？

答：是的，Magic MCP 是一個開源專案，對於個人和商業專案都是免費使用的。

問：我如何能為 Magic MCP 做出貢獻？

答：歡迎貢獻！您可以通過報告問題、建議功能或在專案的 GitHub 倉庫提交拉取請求來貢獻。

問：我在哪裡可以找到 Magic MCP 的文檔？

答：文檔可在官方網站 21st.dev/magic 上找到，您可以在那裡找到詳細的指南和教程。

問：是否有 Magic MCP 用戶的社群？

答：是的，Magic MCP 用戶有一個活躍的社群，您可以在那裡提問、分享您的經驗並與其他開發者合作。

21st.dev Magic AI Agent

Magic Component Platform (MCP) is a powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions. It integrates seamlessly with popular IDEs and provides a streamlined workflow for UI development.

🌟 Features

• AI-Powered UI Generation: Create UI components by describing them in natural language
• Multi-IDE Support:
  • Cursor IDE integration
  • Windsurf support
  • VSCode support
  • VSCode + Cline integration (Beta)
• Modern Component Library: Access to a vast collection of pre-built, customizable components inspired by 21st.dev
• Real-time Preview: Instantly see your components as you create them
• TypeScript Support: Full TypeScript support for type-safe development
• SVGL Integration: Access to a vast collection of professional brand assets and logos
• Component Enhancement: Improve existing components with advanced features and animations (Coming Soon)

🎯 How It Works

1. Tell Agent What You Need

   • In your AI Agent's chat, just type /ui and describe the component you're looking for
   • Example: /ui create a modern navigation bar with responsive design

2. Let Magic Create It

   • Your IDE prompts you to use Magic
   • Magic instantly builds a polished UI component
   • Components are inspired by 21st.dev's library

3. Seamless Integration

   • Components are automatically added to your project
   • Start using your new UI components right away
   • All components are fully customizable

🚀 Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• One of the supported IDEs:
  • Cursor
  • Windsurf
  • VSCode (with Cline extension)

Installation

1. Generate API Key

   • Visit 21st.dev Magic Console
   • Generate a new API key

2. Choose Installation Method

Method 1: CLI Installation (Recommended)

One command to install and configure MCP for your IDE:

npx @21st-dev/cli@latest install <client> --api-key <key>

Supported clients: cursor, windsurf, cline, claude

Method 2: Manual Configuration

If you prefer manual setup, add this to your IDE's MCP config file:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

Config file locations:

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

Method 3: VS Code Installation

For one-click installation, click one of the install buttons below:

Manual VS Code Setup

First, check the install buttons above for one-click installation. For manual setup:

Add the following JSON block to your User Settings (JSON) file in VS Code. You can do this by pressing Ctrl + Shift + P and typing Preferences: Open User Settings (JSON):

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

Optionally, you can add it to a file called .vscode/mcp.json in your workspace:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ FAQ

How does Magic AI Agent handle my codebase?

Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure, and integrates seamlessly with your existing codebase without affecting other parts of your application.

Can I customize the generated components?

Yes! All generated components are fully editable and come with well-structured code. You can modify the styling, functionality, and behavior just like any other React component in your codebase.

What happens if I run out of generations?

If you exceed your monthly generation limit, you'll be prompted to upgrade your plan. You can upgrade at any time to continue generating components. Your existing components will remain fully functional.

How soon do new components get added to 21st.dev's library?

Authors can publish components to 21st.dev at any time, and Magic Agent will have immediate access to them. This means you'll always have access to the latest components and design patterns from the community.

Is there a limit to component complexity?

Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. However, for best results, we recommend breaking down very complex UIs into smaller, manageable components.

🛠️ Development

Project Structure

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

Key Components

• IdeInstructions: Setup instructions for different IDEs
• ApiKeySection: API key management interface
• WelcomeOnboarding: Onboarding flow for new users

🤝 Contributing

We welcome contributions! Please join our Discord community and provide feedback to help improve Magic Agent. The source code is available on GitHub.

👥 Community & Support

• Discord Community - Join our active community
• Twitter - Follow us for updates

⚠️ Beta Notice

Magic Agent is currently in beta. All features are free during this period. We appreciate your feedback and patience as we continue to improve the platform.

📝 License

MIT License

🙏 Acknowledgments

• Thanks to our beta testers and community members
• Special thanks to the Cursor, Windsurf, and Cline teams for their collaboration
• Integration with 21st.dev for component inspiration
• SVGL for logo and brand asset integration

For more information, join our Discord community or visit 21st.dev/magic.