Magic MCP

🚀 21st Century Magic AI Agent

Magic Component Platform (MCP) is a powerful AI-driven tool that enables developers to quickly create modern and aesthetically pleasing UI components through natural language descriptions. It seamlessly integrates with popular IDEs and offers a smooth workflow to support UI development.

🚀 Quick Start

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

✨ Features

• AI-driven UI Generation: Create UI components through natural language descriptions.
• Multi-IDE Support:
  • Integration with Cursor IDE.
  • Support for Windsurf.
  • Integration with VSCode + Cline (Beta version).
• Modern Component Library: Access a vast library of pre-built and customizable components inspired by 21st.dev.
• Real-time Preview: Instantly view the components you create.
• TypeScript Support: Full support for TypeScript for type-safe development.
• SVGL Integration: Access a large and professional library of brand assets and logos.
• Component Enhancement: Add advanced features and animations to existing components (coming soon).

🎯 Workflow

1. Tell the Agent Your Requirements
   • In the AI agent's chat, enter /ui and describe the component you need.
   • Example: Enter "Create a web page with a search bar and a results list" to generate the corresponding code.
2. Get Real-time Feedback: Receive suggestions on code structure and best practices directly in the IDE.
3. Simplify the Development Process: Automatically generate repetitive code, such as form validation, event handling, and state management, through AI.

📦 Installation

Prerequisites

• Node.js (version 12 or higher)
• npm or yarn
• Install a supported IDE (e.g., VSCode, IntelliJ IDEA)

Installation Methods

Method 1: Using the CLI Tool

1. Install Magic CLI via npm:

npm install -g magic-cli

2. Initialize a Magic project in the project directory:

magic init

3. Follow the prompts to complete the configuration and select the desired IDE and plugins.

Method 2: Manual Configuration

1. Download and extract the compressed package.
2. Configure environment variables (optional).
3. Manually install the required dependency libraries.

🤑 Frequently Asked Questions

• Q: How does the Magic Agent handle my code? A: It analyzes the project structure and code context to provide real-time feedback and suggestions in the IDE without directly modifying your files.
• Q: Can I customize the generated components? A: Absolutely! The generated components use standard HTML, CSS, and JavaScript, and you can make any modifications as needed.
• Q: Are there any usage restrictions? A: Currently in the Beta phase, all features are available for free. We will continue to improve the platform.

🔧 Technical Details

Project Structure

src/
├── components/    # Store custom components
│   └── Button.vue
├── pages/        # Store page components
│   └── Home.vue
└── App.vue       # Main application file

Key Components

• WelcomeOnboarding: New user onboarding process
• MagicExtension: Core functionality extension module
• ComponentGenerator: Main logic for generating components

🤝 Contribution Guidelines

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

⚡ Community and Support

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

⚠️ Important Note

The Magic Agent is currently in the Beta phase. All features are free to use during this period. Thank you for your feedback and understanding as we continue to optimize the platform.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Thank our Beta testers and community members.
• Special thanks to the Cursor, Windsurf, and Cline teams for their collaboration.
• Collaborate with 21st.dev for component inspiration.
• SVGL provides brand asset integration.

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