21st MCP (Magic MCP)
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
- 6 295 ★ репозитория
- Последний коммит
- ISC
Расширенный доступ
Почему такой уровень
- Передает запросы во внешний сервис с ключом
- Вставляет сторонний код компонентов в проект
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/21st-mcp-magic-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Передает запросы во внешний сервис с ключом
- Вставляет сторонний код компонентов в проект
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Сервер подключает агента к каталогу компонентов 21st.dev, совместимых с shadcn. Агент ищет компоненты, темы и шаблоны, забирает код, ищет логотипы брендов в виде SVG и берет примеры для вдохновения. При включенном AI-доступе в аккаунте работает генерация нового интерфейса по описанию с вариантами. Репозиторий также оформлен как плагин со скиллом 21st-ui, который подсказывает агенту, когда и как пользоваться этими инструментами. Старый пакет @21st-dev/magic теперь просто пересылает запросы на новый сервер, чтобы прежние конфигурации не сломались.
Для кого. Для фронтенд-разработчиков на React и Tailwind, которые хотят собирать интерфейс из готовых компонентов через агента.
Подходит, если
- Нужен готовый блок: таблица цен, шапка, навигация, форма
- Нужен логотип бренда в виде SVG-компонента
- Хочется сгенерировать несколько вариантов экрана по описанию
Не подходит, если
- Проект не на React и Tailwind
- Нельзя подключать внешние сервисы с ключом
Пример запроса к агенту
Найди в 21st компонент таблицы цен с тремя тарифами и добавь его на страницу /pricingMCP
- Транспорт
- http, stdio
- Авторизация
- API-ключ
Переменные окружения
API_KEY_21STобязательная, секрет- Ключ API 21st.dev для плагина и прокси
Ограничения
Нужен ключ 21st.dev, старые ключи Magic сброшены. Генерация интерфейса доступна только при включенном AI-доступе, часть кода компонентов платная. Доступность сервиса из России без VPN не проверена.
Как отключить. Удалите сервер 21st из конфигурации MCP или плагин 21st через /plugin.
Частые вопросы
Почему перестал работать старый Magic MCP?
Бэкенд Magic заменен на 21st MCP, а старые ключи сброшены. Нужен новый ключ, после этого прежняя конфигурация заработает через прокси.
Работают ли старые названия инструментов?
Да, сервер переводит их в новые, но лучше использовать новые имена.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыShadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
MCP-сервер и плагин для сборки интерфейса с агентом: курируемые дизайн-системы, промпты для UI и варианты верстки
Подключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии
Inspo
inspo
Сервер MCP со справочником реальных рабочих сайтов, по которым агент изучает дизайн до написания интерфейса. Брать приемы, не копировать страницы
Коротко о README
README сообщает, что Magic MCP заменен единым 21st MCP, и показывает установку через 21st CLI или ручную HTTP-конфигурацию с заголовком ключа. Объяснено, что пакет @21st-dev/magic стал прокси, приведена таблица соответствия старых и новых инструментов. Описана установка плагина в Claude Code, Codex, Cursor и Grok Build с переменной API_KEY_21ST. Лицензия ISC.