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

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

Собирать 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.

---

Источник: https://localhost:3000/m/21st-dev-magic-mcp-ui-pishet-react-komponenty-pryamo