Magic MCP: мгновенное создание UI-компонентов с помощью естественного языка 188

Что такое Magic MCP?

Magic MCP (Magic Magic Component Platform) — это инструмент на основе искусственного интеллекта, разработанный 21st.dev, который помогает разработчикам быстро создавать современные UI-компоненты с помощью описаний на естественном языке. Он интегрируется с популярными IDE (такими как Cursor, WindSurf и VSCode) и позволяет генерировать элементы интерфейса — кнопки, навигационные панели, формы входа и многое другое — с предварительным просмотром в реальном времени, чтобы мгновенно видеть результат компонента. После генерации кода его можно в любой момент отредактировать.

Основные функции Magic MCP

Основная функция Magic MCP — генерация UI-компонентов по описанию на естественном языке. Разработчику достаточно ввести описание в чате AI-агента (например, /ui create a modern navigation bar with responsive design), и Magic MCP на его основе мгновенно создаст полноценный UI-компонент и добавит его в проект.

Преимущества Magic MCP

• Генерация UI с помощью ИИ: создавайте компоненты по описанию на естественном языке без необходимости писать код вручную.

• Поддержка множества IDE: поддерживаются различные популярные IDE, включая:

• Cursor IDE: интеграция через инструмент командной строки.

• WindSurf: интеграция через конфигурационный файл.

• VSCode + Cline (Beta): интеграция через расширение Cline.

• Современная библиотека компонентов: предоставляется большой набор готовых компонентов с возможностью настройки, вдохновлённых библиотекой компонентов 21st.dev.

• Предварительный просмотр в реальном времени: мгновенный просмотр результата при создании компонента без необходимости обновлять страницу вручную.

• Поддержка TypeScript: типобезопасная разработка, подходящая для современной фронтенд-разработки.

• Интеграция с SVGL: богатый набор брендовых ассетов и логотипов для быстрого создания профессионального UI.

• Улучшение компонентов: в будущем планируется поддержка улучшения существующих компонентов с помощью ИИ, добавления продвинутых функций и анимаций.

Процесс работы с Magic MCP

1. Опишите требования

• Введите /ui в чате AI-агента и опишите желаемый компонент. Например: /ui create a modern navigation bar with responsive design

2. Генерация компонента

• Magic MCP сгенерирует полноценный UI-компонент по вашему описанию. Сгенерированный компонент будет соответствовать стилю библиотеки компонентов 21st.dev и полностью настраиваться.

3. Интеграция в проект

• Сгенерированный компонент автоматически добавляется в ваш проект, и вы можете сразу начать его использовать. Все компоненты можно редактировать и изменять как обычные React-компоненты.

Сценарии использования Magic MCP

• Быстрое прототипирование: быстрая генерация UI-компонентов по описанию на естественном языке для экономии времени.

• Командная работа: обмен библиотекой компонентов с коллегами по команде для повышения эффективности разработки.

• Обучение и эксперименты: быстрая проверка новых UI-дизайнов и изучение различных стилей оформления.

Установка и настройка Magic MCP

Перед использованием Magic MCP необходимо выполнить простую настройку. Ниже приведены способы установки и настройки для разных IDE:

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

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": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

Добавьте следующее содержимое в конфигурацию MCP Cline:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Часто задаваемые вопросы о Magic MCP

В1: Как Magic MCP работает с моей кодовой базой?

Magic MCP записывает или изменяет только файлы, связанные с генерируемым компонентом, следуя стилю и структуре кода проекта, не затрагивая остальные части.

В2: Можно ли настраивать сгенерированные компоненты?

Да! Сгенерированные компоненты полностью редактируемы, структура кода понятна, и вы можете изменять их так же, как обычные React-компоненты.

В3: Что делать, если превышен лимит генераций?

Если вы превысите месячный лимит генераций, система предложит вам перейти на более высокий тарифный план. Существующие компоненты по-прежнему можно будет использовать.

В4: Есть ли ограничения на сложность компонентов?

Magic MCP может работать с компонентами любой сложности — от простых кнопок до сложных интерактивных форм. Рекомендуется разбивать очень сложные UI на несколько небольших компонентов.

Репозиторий на GitHub:https://github.com/21st-dev/magic-mcp

Официальный сайт проекта:https://21st.dev/magic