About
The Magic MCP (Model Context Protocol) Server by 21st-dev is an AI-driven tool designed to bridge the gap between natural language descriptions and production-ready UI components. It functions similarly to "v0" but operates directly within local AI-integrated IDEs like Cursor, Windsurf, and Cline.
🌟 Key Features
-
AI-Powered UI Generation: Create modern UI components instantly by describing them in natural language (e.g.,
/ui create a responsive navbar). -
Multi-IDE Support: Seamless integration with:
-
VS Code (via Cline or manual JSON config)
-
Modern Component Library: Direct access to a vast collection of customizable components inspired by 21st.dev.
-
Technical Robustness:
-
TypeScript Support: Ensures type-safe component development.
-
SVGL Integration: Access to professional brand assets and logos during generation.
-
Real-time Preview: Immediate visual feedback for generated components.
🚀 Getting Started
To use the server, you must first generate an API key from the 21st.dev Magic Console.
Installation Methods
| Method | Command / Action |
|---|---|
| CLI (Recommended) | npx @21st-dev/cli@latest install <client> --api-key <key> |
| Manual (JSON) | Add @21st-dev/magic to your IDE's mcp.json or mcp_config.json. |
| VS Code | Use the "Install with NPX" buttons or update User Settings (JSON). |
🛠️ Important Technical Information
- Codebase Interaction: The agent only modifies or writes files related to the components it generates, adhering to your existing project structure and style.
- Customization: All output is fully editable React/TypeScript code; it is not a "black box" solution.
- Project Structure: The repository is built with TypeScript (91.5%) and follows a standard structure with core logic in
/srcand UI elements in/app/components. - License: Distributed under the MIT License.
- Beta Status: The tool is currently in Beta, meaning features are currently free to use as the platform evolves.
This server runs through your single 1Server connection. No extra config required.