[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73616":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},73616,"magic-mcp","21st-dev\u002Fmagic-mcp","21st-dev","It's like v0 but in your Cursor\u002FWindSurf\u002FCline. 21st dev Magic MCP server for working with your frontend like Magic","https:\u002F\u002F21st.dev\u002Fmagic",null,"TypeScript",5055,362,21,31,0,56,96,196,168,38.68,false,"main",[],"2026-06-12 02:03:15","# 21st.dev Magic AI Agent\n\n![MCP Banner](https:\u002F\u002F21st.dev\u002Fmagic-agent-og-image.png)\n\nMagic 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.\n\n## 🌟 Features\n\n- **AI-Powered UI Generation**: Create UI components by describing them in natural language\n- **Multi-IDE Support**:\n  - [Cursor](https:\u002F\u002Fcursor.com) IDE integration\n  - [Windsurf](https:\u002F\u002Fwindsurf.ai) support\n  - [VSCode](https:\u002F\u002Fcode.visualstudio.com\u002F) support\n  - [VSCode + Cline](https:\u002F\u002Fcline.bot) integration (Beta)\n- **Modern Component Library**: Access to a vast collection of pre-built, customizable components inspired by [21st.dev](https:\u002F\u002F21st.dev)\n- **Real-time Preview**: Instantly see your components as you create them\n- **TypeScript Support**: Full TypeScript support for type-safe development\n- **SVGL Integration**: Access to a vast collection of professional brand assets and logos\n- **Component Enhancement**: Improve existing components with advanced features and animations (Coming Soon)\n\n## 🎯 How It Works\n\n1. **Tell Agent What You Need**\n\n   - In your AI Agent's chat, just type `\u002Fui` and describe the component you're looking for\n   - Example: `\u002Fui create a modern navigation bar with responsive design`\n\n2. **Let Magic Create It**\n\n   - Your IDE prompts you to use Magic\n   - Magic instantly builds a polished UI component\n   - Components are inspired by 21st.dev's library\n\n3. **Seamless Integration**\n   - Components are automatically added to your project\n   - Start using your new UI components right away\n   - All components are fully customizable\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (Latest LTS version recommended)\n- One of the supported IDEs:\n  - Cursor\n  - Windsurf\n  - VSCode (with Cline extension)\n\n### Installation\n\n1. **Generate API Key**\n\n   - Visit [21st.dev Magic Console](https:\u002F\u002F21st.dev\u002Fmagic\u002Fconsole)\n   - Generate a new API key\n\n2. **Choose Installation Method**\n\n#### Method 1: CLI Installation (Recommended)\n\nOne command to install and configure MCP for your IDE:\n\n```bash\nnpx @21st-dev\u002Fcli@latest install \u003Cclient> --api-key \u003Ckey>\n```\n\nSupported clients: cursor, windsurf, cline, claude\n\n#### Method 2: Manual Configuration\n\nIf you prefer manual setup, add this to your IDE's MCP config file:\n\n```json\n{\n  \"mcpServers\": {\n    \"@21st-dev\u002Fmagic\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@21st-dev\u002Fmagic@latest\", \"API_KEY=\\\"your-api-key\\\"\"]\n    }\n  }\n}\n```\n\nConfig file locations:\n\n- Cursor: `~\u002F.cursor\u002Fmcp.json`\n- Windsurf: `~\u002F.codeium\u002Fwindsurf\u002Fmcp_config.json`\n- Cline: `~\u002F.cline\u002Fmcp_config.json`\n- Claude: `~\u002F.claude\u002Fmcp_config.json`\n\n#### Method 3: VS Code Installation\n\nFor one-click installation, click one of the install buttons below:\n\n[![Install with NPX in VS Code](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVS_Code-NPM-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https:\u002F\u002Finsiders.vscode.dev\u002Fredirect\u002Fmcp\u002Finstall?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:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVS_Code_Insiders-NPM-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https:\u002F\u002Finsiders.vscode.dev\u002Fredirect\u002Fmcp\u002Finstall?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)\n\n##### Manual VS Code Setup\n\nFirst, check the install buttons above for one-click installation. For manual setup:\n\nAdd 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)`:\n\n```json\n{\n  \"mcp\": {\n    \"inputs\": [\n      {\n        \"type\": \"promptString\",\n        \"id\": \"apiKey\",\n        \"description\": \"21st.dev Magic API Key\",\n        \"password\": true\n      }\n    ],\n    \"servers\": {\n      \"@21st-dev\u002Fmagic\": {\n        \"command\": \"npx\",\n        \"args\": [\"-y\", \"@21st-dev\u002Fmagic@latest\"],\n        \"env\": {\n          \"API_KEY\": \"${input:apiKey}\"\n        }\n      }\n    }\n  }\n}\n```\n\nOptionally, you can add it to a file called `.vscode\u002Fmcp.json` in your workspace:\n\n```json\n{\n  \"inputs\": [\n    {\n      \"type\": \"promptString\",\n      \"id\": \"apiKey\",\n      \"description\": \"21st.dev Magic API Key\",\n      \"password\": true\n    }\n  ],\n  \"servers\": {\n    \"@21st-dev\u002Fmagic\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@21st-dev\u002Fmagic@latest\"],\n      \"env\": {\n        \"API_KEY\": \"${input:apiKey}\"\n      }\n    }\n  }\n}\n```\n\n## ❓ FAQ\n\n### How does Magic AI Agent handle my codebase?\n\nMagic 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.\n\n### Can I customize the generated components?\n\nYes! 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.\n\n### What happens if I run out of generations?\n\nIf 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.\n\n### How soon do new components get added to 21st.dev's library?\n\nAuthors 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.\n\n### Is there a limit to component complexity?\n\nMagic 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.\n\n## 🛠️ Development\n\n### Project Structure\n\n```\nmcp\u002F\n├── app\u002F\n│   └── components\u002F     # Core UI components\n├── types\u002F             # TypeScript type definitions\n├── lib\u002F              # Utility functions\n└── public\u002F           # Static assets\n```\n\n### Key Components\n\n- `IdeInstructions`: Setup instructions for different IDEs\n- `ApiKeySection`: API key management interface\n- `WelcomeOnboarding`: Onboarding flow for new users\n\n## 🤝 Contributing\n\nWe welcome contributions! Please join our [Discord community](https:\u002F\u002Fdiscord.gg\u002FQx4rFunHfm) and provide feedback to help improve Magic Agent. The source code is available on [GitHub](https:\u002F\u002Fgithub.com\u002Fserafimcloud\u002F21st).\n\n## 👥 Community & Support\n\n- [Discord Community](https:\u002F\u002Fdiscord.gg\u002FQx4rFunHfm) - Join our active community\n- [Twitter](https:\u002F\u002Fx.com\u002Fserafimcloud) - Follow us for updates\n\n## ⚠️ Beta Notice\n\nMagic 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.\n\n## 📝 License\n\nMIT License\n\n## 🙏 Acknowledgments\n\n- Thanks to our beta testers and community members\n- Special thanks to the Cursor, Windsurf, and Cline teams for their collaboration\n- Integration with [21st.dev](https:\u002F\u002F21st.dev) for component inspiration\n- [SVGL](https:\u002F\u002Fsvgl.app) for logo and brand asset integration\n\n---\n\nFor more information, join our [Discord community](https:\u002F\u002Fdiscord.gg\u002FQx4rFunHfm) or visit [21st.dev\u002Fmagic](https:\u002F\u002F21st.dev\u002Fmagic).\n","21st-dev\u002Fmagic-mcp 是一个基于AI的工具，旨在帮助开发者通过自然语言描述快速创建现代UI组件。其核心功能包括使用AI生成UI组件、支持多种IDE（如Cursor、Windsurf、VSCode及其Cline扩展）以及提供即时预览和TypeScript支持。此外，它还提供了丰富的预制组件库，并计划引入组件增强功能。此项目非常适合需要加速前端开发流程、提高UI设计效率的场景，尤其适合那些希望减少重复工作并专注于创意实现的开发者。",2,"2026-06-11 03:46:24","high_star"]