21st.dev Магический ИИ Агент
Это похоже на v0, но в вашем Cursor/WindSurf/Cline. 21-й разработка сервера Magic MCP для работы с вашим фронтендом, как Magic.
Обзор
Что такое Magic MCP?
Magic MCP — это инновационный сервер, разработанный 21st-dev, который улучшает функциональность фронтенд-приложений. Он предоставляет бесшовный опыт интеграции для разработчиков, работающих с различными фронтенд-фреймворками, такими как Cursor, WindSurf и Cline. Этот инструмент позволяет разработчикам взаимодействовать со своими фронтенд-проектами так, как будто это магия, отсюда и название "Magic MCP".
Особенности Magic MCP
- Бесшовная интеграция: Magic MCP без усилий интегрируется с популярными фронтенд-фреймворками, что упрощает разработчикам улучшение своих проектов без обширной конфигурации.
- Удобный интерфейс: Сервер разработан с акцентом на удобство использования, что обеспечивает легкость навигации и использования его функций.
- Совместная работа в реальном времени: Magic MCP поддерживает совместную работу в реальном времени, позволяя нескольким разработчикам работать над одним проектом одновременно без конфликтов.
- Обширная документация: Доступна полная документация, чтобы помочь разработчикам быстро начать работу и максимально использовать возможности сервера.
- Активная поддержка сообщества: С растущим сообществом пользователей разработчики могут найти поддержку и делиться опытом, что улучшает общий процесс разработки.
Как использовать Magic MCP
- Установка: Начните с установки Magic MCP на своем локальном компьютере или сервере. Следуйте инструкциям по установке, приведенным в документации.
- Конфигурация: Настройте параметры сервера в соответствии с требованиями вашего проекта. Это включает в себя настройку необходимых переменных окружения и зависимостей.
- Интеграция: Интегрируйте Magic MCP с вашим фронтенд-фреймворком, следуя конкретным рекомендациям для выбранной технологии.
- Разработка: Начните разработку вашего фронтенд-приложения, используя функции, предоставляемые Magic MCP. Используйте инструменты совместной работы в реальном времени для эффективной работы с вашей командой.
- Развертывание: Как только ваше приложение будет готово, разверните его, используя встроенные инструменты развертывания или ваш предпочтительный метод развертывания.
Часто задаваемые вопросы
В: Какие фреймворки поддерживает Magic MCP?
О: Magic MCP поддерживает различные фронтенд-фреймворки, включая Cursor, WindSurf и Cline, позволяя разработчикам выбрать наилучший вариант для своих проектов.
В: Бесплатен ли Magic MCP для использования?
О: Да, Magic MCP — это проект с открытым исходным кодом, и он бесплатен для использования как для личных, так и для коммерческих проектов.
В: Как я могу внести свой вклад в Magic MCP?
О: Внесение вкладов приветствуется! Вы можете внести свой вклад, сообщая о проблемах, предлагая функции или отправляя запросы на внесение изменений в репозиторий проекта на GitHub.
В: Где я могу найти документацию для Magic MCP?
О: Документация доступна на официальном сайте 21st.dev/magic, где вы можете найти подробные руководства и учебные пособия.
В: Существует ли сообщество пользователей Magic MCP?
О: Да, существует активное сообщество пользователей Magic MCP, где вы можете задавать вопросы, делиться своим опытом и сотрудничать с другими разработчиками.
Деталь
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
-
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
- In your AI Agent's chat, just type
-
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
-
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
-
Generate API Key
- Visit 21st.dev Magic Console
- Generate a new API key
-
Choose Installation Method
Method 1: CLI Installation (Recommended)
One command to install and configure MCP for your IDE:
npx @21st-dev/cli@latest install <client> --api-key <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:
Manual VS Code Setup
First, check the install buttons above for one-click installation. For manual setup:
Add 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):
{
"mcp": {
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}
}
Optionally, you can add it to a file called .vscode/mcp.json in your workspace:
{
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}
❓ FAQ
How does Magic AI Agent handle my codebase?
Magic 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.
Can I customize the generated components?
Yes! 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.
What happens if I run out of generations?
If 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.
How soon do new components get added to 21st.dev's library?
Authors 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.
Is there a limit to component complexity?
Magic 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.
🛠️ Development
Project Structure
mcp/
├── app/
│ └── components/ # Core UI components
├── types/ # TypeScript type definitions
├── lib/ # Utility functions
└── public/ # Static assets
Key Components
IdeInstructions: Setup instructions for different IDEsApiKeySection: API key management interfaceWelcomeOnboarding: Onboarding flow for new users
🤝 Contributing
We welcome contributions! Please join our Discord community and provide feedback to help improve Magic Agent. The source code is available on GitHub.
👥 Community & Support
- Discord Community - Join our active community
- Twitter - Follow us for updates
⚠️ Beta Notice
Magic 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.
📝 License
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
- SVGL for logo and brand asset integration
For more information, join our Discord community or visit 21st.dev/magic.
Конфигурация сервера
{
"mcpServers": {
"magic-mcp": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"ghcr.io/metorial/mcp-container--21st-dev--magic-mcp--magic-mcp",
"npm run start --api-key api-key"
],
"env": {}
}
}
}
