Magic MCP: MCP-сервис для генерации современных компонентов пользовательского интерфейса

Последние ресурсы по искусственному интеллектуОпубликовано 5 месяцев назад Круг обмена ИИ

9.7K 00

Общее введение

Магия MCP 21st.dev - это инструмент, основанный на искусственном интеллекте, разработанный командой 21st.dev и предназначенный для front-end разработчиков. Он генерирует современные компоненты пользовательского интерфейса "на лету" из описаний на естественном языке и интегрируется в такие среды разработки, как Cursor, WindSurf и VS Code (плагин Cline). Пользователи вводят простые требования, например "Создать современную панель навигации", а Magic MCP генерирует современный UI-компонент на основе React компонентный код со стилями Tailwind CSS и поддержкой TypeScript. Инструмент имеет полностью открытый исходный код, размещен на GitHub и бесплатен для разработчиков. Он предлагает живые предварительные просмотры и богатую библиотеку компонентов для быстрого создания прототипов или командной разработки.

Список функций

компонент генерации естественного языка: Опишите требования в тексте и автоматически сгенерируйте код компонента React.
Поддержка нескольких IDE: Бесшовная интеграция с Cursor, WindSurf и VS Code (Cline Beta).
Библиотека современных компонентов: предлагает большое количество настраиваемых компонентов, вдохновленных 21st.dev.
Предварительный просмотр в режиме реального времени: Мгновенный просмотр эффекта при генерации компонентов для облегчения отладки.
Поддержка TypeScript: Убедитесь, что сгенерированный код безопасен для типов и уменьшает количество ошибок.
Интеграция SVGL: Встроенные профессиональные иконки и логотипы бренда, встроенные непосредственно в компонент.
Усовершенствования компонентов (скоро): Добавьте расширенные возможности и анимацию к существующим компонентам.

Использование помощи

Процесс установки

Magic MCP должен быть установлен в поддерживаемую IDE, как показано в следующем примере Курсор Например, другие IDE (например. WindSurf (или VS Code + Cline) устанавливается аналогичным образом:

Подготовка среды
Убедитесь, что на вашем компьютере установлен Node.js (рекомендуется последняя версия LTS, например v22) и npm, который является основой для запуска Magic MCP.
Получение ключа API
Посетите сайт 21st.dev, войдите в систему, перейдите на страницу "API" и создайте новый TWENTY_FIRST_API_KEY. Вы можете попробовать его без ключа, но функциональность будет ограничена.
Установка Magic MCP
Откройте терминал и выполните следующую команду:

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

главнокомандующий (военный) 你的API密钥 Замените ключ на тот, который был получен с официального сайта.

Настройка IDE Cursor
Откройте Settings в Cursor, найдите опцию Model Context Protocol (MCP) и добавьте следующую конфигурацию:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Сохраните и перезапустите IDE.

Проверка установки
В окне чата курсора введите /uiЕсли появится запрос "Creating Components with Magic MCP", значит, установка прошла успешно.

Конфигурация WindSurf

существовать ~/.codeium/windsurf/mcp_config.json Добавить в:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS Code + Cline Configuration (Beta)

существовать Клайн добавляется в конфигурацию MCP в

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Как использовать основные функции

Генерация компонентов пользовательского интерфейса

процедура::
1. В окне чата IDE введите /uiЗатем следует требование, например /ui 创建一个带搜索功能的导航栏.
2. Magic MCP генерирует код React-компонента, который отображается непосредственно в окне.
3. Нажмите "Вставить код", код автоматически добавится в файл проекта.
Подробности::
По умолчанию компонент использует стили Tailwind CSS и TypeScript, но код можно настроить вручную. Чем конкретнее вводимое описание, тем более релевантным будет результат.

типичный пример::
Вход:/ui 一个蓝色按钮
Выход:

const BlueButton = () => {
return (
<button className="bg-blue-500 text-white px-4 py-2 rounded">
点击我
</button>
);
};
export default BlueButton;

Предварительный просмотр в режиме реального времени

процедура::
1. После генерации компонента IDE отображает окно предварительного просмотра, чтобы показать его действие.
2. После изменения кода предварительный просмотр автоматически обновляется.
Подробности::
Если локальный проект не запущен, предварительный просмотр опирается на встроенный рендеринг Magic MCP, который может незначительно отличаться от реального результата.

Использование значков SVGL

процедура::
1. импорт /logo 品牌名например. /logo Twitter.
2. Инструмент возвращает код иконки в формате SVG или JSX.
3. Копия для использования в компоненте.

типичный пример::
Вход:/logo GitHub
Выход:

const GitHubIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<!-- GitHub SVG 路径 -->
</svg>
);

Детали процесса эксплуатации

Начало реализации проектов
Убедитесь, что фронтенд-проект создан (например, с помощью Create React App). magic MCP генерирует код на основе структуры проекта.
входное требование
Используйте в IDE описания на естественном языке, например "отзывчивый список карт". Более четкие описания приводят к более точным результатам.
Код корректировки
Проверьте код после генерации и измените стиль или логику в соответствии с требованиями.
эксплуатационное испытание
Сохраните код и запустите проект (например. npm start), подтверждая эффект.

предостережение

Ограниченное количество генераций в месяц, после превышения лимита необходимо перейти на платный тарифный план.
Сложные компоненты рекомендуется разбивать на несколько простых требований.
Присоединяйтесь к сообществу Discord, чтобы задавать вопросы.

сценарий применения

Быстрое прототипирование
Когда разработчикам нужно показать эффекты пользовательского интерфейса, Magic MCP экономит время, быстро генерируя компоненты.
Повторное использование командного кода
Команды обмениваются компонентами через 21st.dev для стандартизации стиля и повышения эффективности.
Изучайте технологии фронтенда
Новички используют его для создания стандартного кода, обучения по мере изменений и быстрого освоения React.

QA

Является ли Magic MCP бесплатным?
Да, он с открытым исходным кодом на GitHub, бесплатный для базовой функциональности, а для расширенных возможностей требуются API-ключи и платные тарифные планы.
Является ли сгенерированный код коммерчески доступным?
Да, код принадлежит пользователю и может быть использован для любого проекта.
Какие IDE поддерживаются?
В настоящее время поддерживает Cursor, WindSurf и VS Code (Cline Beta), в будущем может быть расширен.