21st.dev Magic AI Agent

1# 21st.dev Magic AI Agent
2 
3![MCP Banner](https://21st.dev/magic-agent-og-image.png)
4 
5Magic 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.
6 
7## 🌟 Features
8 
9- **AI-Powered UI Generation**: Create UI components by describing them in natural language
10- **Multi-IDE Support**:
11  - [Cursor](https://cursor.com) IDE integration
12  - [Windsurf](https://windsurf.ai) support
13  - [VSCode](https://code.visualstudio.com/) support
14  - [VSCode + Cline](https://cline.bot) integration (Beta)
15- **Modern Component Library**: Access to a vast collection of pre-built, customizable components inspired by [21st.dev](https://21st.dev)
16- **Real-time Preview**: Instantly see your components as you create them
17- **TypeScript Support**: Full TypeScript support for type-safe development
18- **SVGL Integration**: Access to a vast collection of professional brand assets and logos
19- **Component Enhancement**: Improve existing components with advanced features and animations (Coming Soon)
20 
21## 🎯 How It Works
22 
231. **Tell Agent What You Need**
24 
25   - In your AI Agent's chat, just type `/ui` and describe the component you're looking for
26   - Example: `/ui create a modern navigation bar with responsive design`
27 
282. **Let Magic Create It**
29 
30   - Your IDE prompts you to use Magic
31   - Magic instantly builds a polished UI component
32   - Components are inspired by 21st.dev's library
33 
343. **Seamless Integration**
35   - Components are automatically added to your project
36   - Start using your new UI components right away
37   - All components are fully customizable
38 
39## 🚀 Getting Started
40 
41### Prerequisites
42 
43- Node.js (Latest LTS version recommended)
44- One of the supported IDEs:
45  - Cursor
46  - Windsurf
47  - VSCode (with Cline extension)
48 
49### Installation
50 
511. **Generate API Key**
52 
53   - Visit [21st.dev Magic Console](https://21st.dev/magic/console)
54   - Generate a new API key
55 
562. **Choose Installation Method**
57 
58#### Method 1: CLI Installation (Recommended)
59 
60One command to install and configure MCP for your IDE:
61 
62```bash
63npx @21st-dev/cli@latest install <client> --api-key <key>
64```
65 
66Supported clients: cursor, windsurf, cline, claude
67 
68#### Method 2: Manual Configuration
69 
70If you prefer manual setup, add this to your IDE's MCP config file:
71 
72```json
73{
74  "mcpServers": {
75    "@21st-dev/magic": {
76      "command": "npx",
77      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
78    }
79  }
80}
81```
82 
83Config file locations:
84 
85- Cursor: `~/.cursor/mcp.json`
86- Windsurf: `~/.codeium/windsurf/mcp_config.json`
87- Cline: `~/.cline/mcp_config.json`
88- Claude: `~/.claude/mcp_config.json`
89 
90#### Method 3: VS Code Installation
91 
92For one-click installation, click one of the install buttons below:
93 
94[![Install with NPX in VS Code](https://img.shields.io/badge/VS_Code-NPM-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=%4021st-dev%2Fmagic&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%4021st-dev%2Fmagic%40latest%22%5D%2C%22env%22%3A%7B%22API_KEY%22%3A%22%24%7Binput%3AapiKey%7D%22%7D%7D&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22apiKey%22%2C%22description%22%3A%2221st.dev+Magic+API+Key%22%2C%22password%22%3Atrue%7D%5D) [![Install with NPX in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-NPM-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=%4021st-dev%2Fmagic&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%4021st-dev%2Fmagic%40latest%22%5D%2C%22env%22%3A%7B%22API_KEY%22%3A%22%24%7Binput%3AapiKey%7D%22%7D%7D&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22apiKey%22%2C%22description%22%3A%2221st.dev+Magic+API+Key%22%2C%22password%22%3Atrue%7D%5D&quality=insiders)
95 
96##### Manual VS Code Setup
97 
98First, check the install buttons above for one-click installation. For manual setup:
99 
100Add the following JSON block to your User Settings (JSON) file in VS Code. You can do this by pressing `Ctrl + Shift + P` and typing `Preferences: Open User Settings (JSON)`:
101 
102```json
103{
104  "mcp": {
105    "inputs": [
106      {
107        "type": "promptString",
108        "id": "apiKey",
109        "description": "21st.dev Magic API Key",
110        "password": true
111      }
112    ],
113    "servers": {
114      "@21st-dev/magic": {
115        "command": "npx",
116        "args": ["-y", "@21st-dev/magic@latest"],
117        "env": {
118          "API_KEY": "${input:apiKey}"
119        }
120      }
121    }
122  }
123}
124```
125 
126Optionally, you can add it to a file called `.vscode/mcp.json` in your workspace:
127 
128```json
129{
130  "inputs": [
131    {
132      "type": "promptString",
133      "id": "apiKey",
134      "description": "21st.dev Magic API Key",
135      "password": true
136    }
137  ],
138  "servers": {
139    "@21st-dev/magic": {
140      "command": "npx",
141      "args": ["-y", "@21st-dev/magic@latest"],
142      "env": {
143        "API_KEY": "${input:apiKey}"
144      }
145    }
146  }
147}
148```
149 
150## ❓ FAQ
151 
152### How does Magic AI Agent handle my codebase?
153 
154Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure, and integrates seamlessly with your existing codebase without affecting other parts of your application.
155 
156### Can I customize the generated components?
157 
158Yes! All generated components are fully editable and come with well-structured code. You can modify the styling, functionality, and behavior just like any other React component in your codebase.
159 
160### What happens if I run out of generations?
161 
162If you exceed your monthly generation limit, you'll be prompted to upgrade your plan. You can upgrade at any time to continue generating components. Your existing components will remain fully functional.
163 
164### How soon do new components get added to 21st.dev's library?
165 
166Authors can publish components to 21st.dev at any time, and Magic Agent will have immediate access to them. This means you'll always have access to the latest components and design patterns from the community.
167 
168### Is there a limit to component complexity?
169 
170Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. However, for best results, we recommend breaking down very complex UIs into smaller, manageable components.
171 
172## 🛠️ Development
173 
174### Project Structure
175 
176```
177mcp/
178├── app/
179│   └── components/     # Core UI components
180├── types/             # TypeScript type definitions
181├── lib/              # Utility functions
182└── public/           # Static assets
183```
184 
185### Key Components
186 
187- `IdeInstructions`: Setup instructions for different IDEs
188- `ApiKeySection`: API key management interface
189- `WelcomeOnboarding`: Onboarding flow for new users
190 
191## 🤝 Contributing
192 
193We welcome contributions! Please join our [Discord community](https://discord.gg/Qx4rFunHfm) and provide feedback to help improve Magic Agent. The source code is available on [GitHub](https://github.com/serafimcloud/21st).
194 
195## 👥 Community & Support
196 
197- [Discord Community](https://discord.gg/Qx4rFunHfm) - Join our active community
198- [Twitter](https://x.com/serafimcloud) - Follow us for updates
199 
200## ⚠️ Beta Notice
201 
202Magic Agent is currently in beta. All features are free during this period. We appreciate your feedback and patience as we continue to improve the platform.
203 
204## 📝 License
205 
206MIT License
207 
208## 🙏 Acknowledgments
209 
210- Thanks to our beta testers and community members
211- Special thanks to the Cursor, Windsurf, and Cline teams for their collaboration
212- Integration with [21st.dev](https://21st.dev) for component inspiration
213- [SVGL](https://svgl.app) for logo and brand asset integration
214 
215---
216 
217For more information, join our [Discord community](https://discord.gg/Qx4rFunHfm) or visit [21st.dev/magic](https://21st.dev/magic).
218