Magic Mcp
It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your fron
Rating
Votes
0
score
Downloads
0
total
Price
Free
API key required
Works With
About
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
/uiand describe the component you're looking for - Example:
/ui create a modern navigation bar with responsive design
- 1.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
- 1.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
- 1.Choose Installation Method
#### Method 1: CLI Installation (Recommended)
One command to install and configure MCP for your IDE:
npx @21st-dev/cli@latest install --api-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:
Don't lose this
Three weeks from now, you'll want Magic Mcp again. Will you remember where to find it?
Save it to your library and the next time you need Magic Mcp, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.
⚡ Pro tip for geeks: add a-gnt 🤵🏻♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.
a-gnt's Take
Our honest review
This plugs directly into your AI and gives it new abilities it didn't have before. It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your fron. Once connected, just ask your AI to use it. It's completely free and works across most major AI apps. This one just landed in the catalog — worth trying while it's fresh.
Tips for getting started
Tap "Get" above, pick your AI app, and follow the steps. Most installs take under 30 seconds.
Heads up: this needs an API key to work. You'll get one from the service's website (usually free). The setup guide tells you exactly where.
What's New
Imported from GitHub
Ratings & Reviews
0.0
out of 5
0 ratings
No reviews yet. Be the first to share your experience.