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.