📌Overview

Purpose: The Magic Component Platform (MCP) aims to streamline UI component development for developers by utilizing AI to generate components through natural language descriptions.

Overview: MCP is an innovative AI-driven tool designed to enhance the efficiency of UI development by allowing developers to create modern, visually appealing components quickly and easily. It integrates with multiple popular IDEs, facilitating a seamless design workflow.

Key Features:

AI-Powered UI Generation: Create UI components effortlessly by simply describing them using natural language.
Multi-IDE Support: Compatible with various IDEs, including Cursor, Windsurf, and Beta support for VSCode with Cline, ensuring a wide range of development environments.
Modern Component Library: Offers access to a comprehensive collection of customizable, pre-built components inspired by 21st.dev, enriching the developer's toolkit.
Real-time Preview: Allows instant visualization of components as they are created, enhancing the development process.
TypeScript Support: Ensures robust, type-safe development practices for greater reliability in coding.
SVGL Integration: Provides access to professional brand assets and logos, facilitating enhanced design capabilities.
Component Enhancement (Coming Soon): Promises advanced features for improving existing components, including animations, to boost creativity and functionality.

21st.dev Magic AI Agent

Magic Component Platform (MCP) is an AI-driven tool that helps developers create modern UI components instantly through natural language descriptions, integrating seamlessly with popular IDEs for a streamlined workflow.

🌟 Features

AI-Powered UI Generation: Create UI components by describing them in natural language
Multi-IDE Support:
- Cursor IDE integration
- Windsurf support
- VSCode + Cline integration (Beta)
Modern Component Library: Access a 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 brand assets and logos
Component Enhancement: Improve existing components with advanced features and animations (Coming Soon)

🎯 How It Works

Tell Agent What You Need:
- Type /ui and describe the component you're looking for (e.g., /ui create a modern navigation bar with responsive design).
Let Magic Create It:
- Your IDE will prompt you to use Magic, which builds a polished UI component.
Seamless Integration:
- Components are automatically added to your project and are fully customizable.

🚀 Getting Started

Prerequisites

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

Installation

Generate API Key:
- Visit 21st.dev Magic Console to generate a new API key.
Choose Installation Method:

Method 1: CLI Installation (Recommended)

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

For 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\""]
    }
  }
}

❓ FAQ

How does Magic AI Agent handle my codebase?

Magic AI Agent modifies only files related to the generated components, ensuring seamless integration 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.

What happens if I run out of generations?

You'll be prompted to upgrade your plan; existing components will remain functional.

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

Authors can publish components anytime, granting immediate access to the latest components and design patterns.

Is there a limit to component complexity?

Magic AI Agent can handle various complexity levels, but for best results, break down very complex UIs into smaller components.

🛠️ Development

Project Structure

mcp/
├── app/
│   └── components/    
├── types/             
├── lib/              
└── public/

Key Components

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

🤝 Contributing

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

👥 Community & Support

⚠️ Beta Notice

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

📝 License

MIT License

🙏 Acknowledgments

Thanks to our beta testers and community members, and to the Cursor, Windsurf, and Cline teams for their collaboration.

magic-mcp