Magic (21st.dev UI Generator)

🚀 21st Century Magic AI Agent

Magic Component Platform (MCP) is a powerful AI-driven tool that enables developers to quickly generate beautiful modern UI components through natural language descriptions. It seamlessly integrates with popular IDEs, offering a smooth UI development workflow.

🚀 Quick Start

Prerequisites

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

Installation

1. Generate an API key

• Visit the Magic dashboard.
• Go to the API section.
• Generate a new API key.

2. IDE setup

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

Windsurf

Add the following to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

Add the following to Cline's source code management:

{
  "apiKeys": {
    "21st.dev": "your-api-key"
  }
}

✨ 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).
• Modern component library: Access a large number of pre-built and customizable components, inspired by 21st.dev.
• Real-time preview: Instantly view components during the creation process.
• TypeScript support: Comprehensive TypeScript support for type-safe development.
• SVGL integration: Access a vast collection of professional brand assets and logos.
• Component enhancement: Add advanced features and animations to existing components (coming soon).

🎯 How It Works

1. Tell the agent what you need

• In the AI agent's chat, simply enter /ui and describe the required component.
• Example: /ui Create a modern responsive navigation bar.

2. Let the magic generate it

• Your IDE prompts you to use Magic.
• Magic instantly builds a beautiful UI component.
• The component is inspired by the 21st.dev library.

3. Seamless integration

• The component is automatically added to your project.
• Start using the new UI component right away.
• All components are fully customizable.

🤝 Contribution

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

👥 Community and Support

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

⚠️ Beta Announcement

The Magic agent is currently in the Beta phase. All features are free during this period. Thank you for your feedback and patience as we continue to improve the platform.

📄 License

This project is licensed under the 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.
• Brand asset integration with SVGL.

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