21st.dev Magic

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.

Старые Magic API-ключи были сброшены. Ключи, выданные старой консолью 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.

Доступ к ИИ

Доступ к компонентам Builder не включает размещённый 21st AI. Сервер перечисляет generate и iterate_generation только когда доступ к ИИ включён. Проверьте get_usage.aiGenerationEnabled; это сообщает о доступе, а не об остатке ИИ-кредитов. При выключенном ИИ используйте search и get_component, затем адаптируйте код с помощью собственного агента кодирования. Существующие черновики остаются читаемыми.

Кэшированный или устаревший вызов генерации может вернуть ai_subscription_required. Не повторяйте попытки, пока ИИ не включён. Обновите список инструментов клиента или переподключитесь после включения ИИ. Прокси пересылает обнаружение на сервер, поэтому существующие версии прокси получают это поведение без обновления npm.

server.json зеркалирует официальный список реестра dev.21st/mcp. Версия реестра независима от версии этого пакета совместимости.

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

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, чтобы увидеть инструменты, доступные вашей учётной записи.

Установка как плагин

Этот репозиторий также упакован как плагин агента (MCP-сервер + навык UI). Вам не нужно ждать какой-либо магазин — этот репозиторий сам является маркетплейсом, добавьте его напрямую:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Установите свой API-ключ в переменную API_KEY_21ST (бесплатный ключ на 21st.dev/mcp).

Списки в магазинах:

• Cursor / Grok Bot — установите «21st» из Cursor Marketplace, затем задайте свой API_KEY_21ST в разделе Plugins → Configure. Получите ключ на 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (из официального xAI marketplace), затем экспортируйте API_KEY_21ST.
• Claude Code — репозиторий содержит манифест .claude-plugin/: /plugin install его из любого маркетплейса, где указан этот репозиторий, или загрузите локально с помощью claude --plugin-dir . и экспортируйте API_KEY_21ST.

Конфигурация плагина ожидает API-ключ в переменной API_KEY_21ST в каждом клиенте.

Ссылки

• Настройка 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 были соглашением в описаниях устаревших инструментов, а не частью протокола.