21st.dev Magic

официальный

Создавайте качественные UI-компоненты, вдохновляясь лучшими дизайн-инженерами 21st.dev.

GitHub

5.6k

Что можно делать с 21st Dev Magic MCP?

Поиск в каталоге 21st.dev — найдите компоненты, темы или шаблоны, описав свои потребности с помощью инструмента search.
Генерация UI-компонентов по запросу — запросите React-компонент, соответствующий описанию, и получите готовый к использованию код через generate.
Получение вдохновения для компонентов — извлеките подобранные примеры компонентов для заданного сценария с помощью get_inspiration.
Поиск логотипов компаний — найдите SVG-логотипы по названию компании с помощью search_logo (один запрос за вызов).
Доступ к платному коду — получите доступ к премиум-компонентам, которые вы приобрели через платформу.

Документация

Magic MCP → 21st MCP

Magic MCP теперь называется 21st MCP. Сервер Magic MCP (@21st-dev/magic) заменён унифицированным 21st MCP, который устанавливается через 21st CLI — настройка на 21st.dev/mcp. Этот пакет продолжает публиковаться как тонкий прокси для совместимости, чтобы старые конфигурации продолжали работать.

Установка 21st MCP (рекомендуется)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Или добавьте его вручную — это обычный HTTP MCP-сервер:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Получите API-ключ на 21st.dev/mcp.

Старые API-ключи Magic были сброшены. Ключи, выданные старой консолью Magic, больше нигде не работают. Создайте новый ключ на 21st.dev/mcp.

Что теперь делает этот пакет (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." по-прежнему работает: начиная с v0.2.0 это небольшой stdio-прокси, который перенаправляет каждое MCP-сообщение на сервер 21st MCP. Существующие записи mcp.json, ссылающиеся на @21st-dev/magic, продолжают функционировать — но теперь они обращаются к тому же серверу, что и 21st CLI, с полным текущим набором инструментов.

API-ключ принимается во всех исторических формах: позиционный API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ... или переменные окружения TWENTY_FIRST_API_KEY / API_KEY_21ST.

Старые имена инструментов → новые имена инструментов

21st MCP по-прежнему принимает устаревшие имена инструментов Magic и транслирует их, поэтому агенты, запомнившие старые имена, продолжают работать. Рекомендуется использовать новые имена:

Устаревший инструмент Magic	Инструмент 21st MCP
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (новая генерация из запроса на уточнение)
`logo_search`	`search_logo` (один запрос за вызов)

Текущий сервер предоставляет гораздо больше, чем старые четыре инструмента: поиск по каталогу компонентов/тем/шаблонов, получение платного кода, закладки, командные библиотеки, генерация UI с вариантами, управление профилем и многое другое. Подключитесь и вызовите tools/list, чтобы увидеть полный набор.

Ссылки

Настройка 21st MCP и API-ключи: https://21st.dev/mcp
21st CLI на npm: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — поиск, публикация и генерация UI-компонентов: https://21st.dev

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

Почему мой старый Magic MCP перестал работать? Бэкенд Magic (magic.21st.dev) был заменён унифицированным 21st MCP, и все старые API-ключи были сброшены в целях безопасности. Обновите ключ на новый с 21st.dev/mcp — ваша существующая конфигурация @21st-dev/magic снова заработает через этот прокси совместимости, хотя мы рекомендуем перейти на npx @21st-dev/cli@latest init.

/ui всё ещё актуален? Используйте естественный язык: попросите вашего агента выполнить поиск компонентов в 21st (search) или сгенерировать новый UI (generate). Старые триггерные фразы /ui, /21 были условностью описаний устаревших инструментов, а не протокола.