ГлавнаяМатериалы к YouTube-видеоЧек-лист
Чек-лист

21st.dev Magic MCP: /ui пишет React-компоненты прямо в проекте

Собирать UI-компонент вручную — вёрстка, стили, адаптив — отнимает время, которое можно потратить на логику продукта. Magic MCP от 21st.dev подключается и помогает исправить это

Содержание4 глав
  1. 011. Что такое Magic MCP
  2. 022. Установка
  3. 033. Как это работает
  4. 044. Что важно знать перед использованием

Собирать UI-компонент вручную — вёрстка, стили, адаптив — отнимает время, которое можно потратить на логику продукта. Magic MCP от 21st.dev подключается прямо к твоему AI-агенту в IDE и по одной текстовой команде создаёт готовый React-компонент, который сразу ложится в проект. Ниже — что это, как поставить и как этим пользоваться.

1. Что такое Magic MCP

  • MCP-сервер (Magic Component Platform) от 21st.dev создаёт React/TypeScript UI-компоненты по текстовому описанию прямо внутри IDE.
  • Библиотека компонентов строится на каталоге 21st.dev, плюс интеграция с SVGL — доступ к профессиональным логотипам и брендовым SVG-ассетам.
  • Поддерживаемые среды: Cursor, Windsurf, VSCode (в том числе с расширением Cline) и Claude.
  • Лицензия и масштаб: открытый исходный код на MIT, около 5,2 тысяч звёзд на GitHub.
  • Проект в статусе беты — все функции сейчас бесплатны на период беты.

2. Установка

  • Требование: нужен Node.js (рекомендуется последняя LTS-версия) и один из поддерживаемых редакторов или агентов.
  • API-ключ: получить бесплатно на 21st.dev/magic/console — без ключа сервер не запустится.
  • Установка одной командой: npx @21st-dev/cli@latest install <client> --api-key <key>, где <client> — cursor, windsurf, cline или claude (github.com/21st-dev/magic-mcp).
  • Ручная настройка: альтернативно MCP-сервер можно прописать вручную в конфиге IDE (например ~/.cursor/mcp.json или ~/.claude/mcp_config.json), указав команду npx -y @21st-dev/magic@latest и переменную API_KEY.

3. Как это работает

01
Опиши компонент
В чате агента набери /ui и опиши нужный компонент естественным языком, например «сделай современную адаптивную панель навигации»
02
Magic собирает
IDE предложит воспользоваться Magic, и сервер соберёт готовый компонент на основе библиотеки 21st.dev
03
Компонент в проекте
Компонент автоматически добавляется в проект и сразу доступен для использования — код полностью редактируемый

Magic Agent затрагивает только файлы самого сгенерированного компонента и не трогает остальной проект

4. Что важно знать перед использованием

  • Лимит генераций: у плана есть месячный лимит; при исчерпании предложат апгрейд, а уже созданные компоненты продолжают работать без ограничений.
  • Сложность компонентов: инструмент справляется с разной сложностью, но для лучшего результата сложный UI стоит дробить на более мелкие компоненты.
  • Обновления библиотеки: как только автор публикует новый компонент на 21st.dev, Magic Agent получает к нему доступ сразу, без отдельного обновления самого MCP.
Скачать материал