Magic MCP от 21st.dev: UI-компоненты для Claude Code, Cursor и Codex

21st-dev/magic-mcp· Проверено 13.11.2026· 6,5 тыс.на GitHub

Даёт агенту каталог UI-компонентов 21st.dev на React и Tailwind: найти компонент, забрать код в проект, достать логотип бренда в JSX. С тарифом Builder + AI агент ещё и генерирует новый интерфейс по текстовому запросу.

2 реализации:

Удалённый сервер 21st.dev, новое имя Magic MCP: подключается по адресу с ключом в заголовке x-api-key

Как подключить

Что сделать до подключения

Аккаунт 21st.dev

x-api-key

бесплатный ключ на странице 21st.dev/mcp; ключи из старой консоли Magic сброшены и не работают

Конфиг для вашего клиента

Впишите ключи, и они встанут во все конфиги ниже. Конфиг собирается в браузере.

x-api-key

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport http magic-21st https://21st.dev/api/mcp \
  --header 'x-api-key: <ваш ключ 21st.dev>'

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.magic-21st]
url = "https://21st.dev/api/mcp"
http_headers = { "x-api-key" = "<ваш ключ 21st.dev>" }

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "magic-21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "magic-21st": {
      "type": "http",
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "magic-21st": {
      "httpUrl": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "magic-21st": {
      "httpUrl": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "magic-21st": {
        "type": "remote",
        "url": "https://21st.dev/api/mcp",
        "headers": {
          "x-api-key": "<ваш ключ 21st.dev>"
        }
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

Customize → Connectors → добавить свой коннектор.
Адрес сервера: https://21st.dev/api/mcp
Request headers: x-api-key: <ваш ключ 21st.dev>

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "magic-21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Проверить сервер сейчас →Собрать вместе с другими серверами в одном mcp.json →

Инструменты сервера

searchищет компоненты, темы и шаблоны

get_componentотдаёт код компонента

get_inspirationподбирает примеры для вдохновения

search_logoнаходит логотип бренда в JSX

generateгенерирует UI по запросу

iterate_generationдорабатывает генерацию

get_generationчитает код черновика

get_takeчитает вариант генерации

get_usageпоказывает доступ к 21st AI

Прокси для клиентов, которые умеют только stdio: старый пакет Magic пересылает вызовы тому же серверу 21st MCP

Как подключить

Что сделать до подключения

Node.js 18 или новее

Аккаунт 21st.dev

API_KEY_21ST

тот же ключ со страницы 21st.dev/mcp; прокси понимает и переменную TWENTY_FIRST_API_KEY

Конфиг для вашего клиента

Впишите ключи, и они встанут во все конфиги ниже. Конфиг собирается в браузере.

API_KEY_21ST

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env 'API_KEY_21ST=<ваш ключ 21st.dev>' --transport stdio magic-mcp \
  -- npx -y @21st-dev/magic@latest

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.magic-mcp]
command = "npx"
args = ["-y", "@21st-dev/magic@latest"]

[mcp_servers.magic-mcp.env]
API_KEY_21ST = "<ваш ключ 21st.dev>"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "magic-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "magic-mcp": {
        "type": "local",
        "command": ["npx", "-y", "@21st-dev/magic@latest"],
        "environment": {
          "API_KEY_21ST": "<ваш ключ 21st.dev>"
        }
      }
    }
  }
}

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY_21ST": "<ваш ключ 21st.dev>"
      }
    }
  }
}

Собрать вместе с другими серверами в одном mcp.json →

Что попросить агента

«Добавь из 21st таблицу цен с переключателем месяц/год»Агент вызовет search, выберет компонент, заберёт код get_component и впишет его в проект

«Мне нужна аккуратная навигация для <сайт>: покажи 2–3 варианта из 21st»Агент вызовет search и покажет подходящие совпадения, код выбранного возьмёт get_component

«Вставь логотипы <бренд 1> и <бренд 2> в блок клиентов»Агент вызовет search_logo по одному бренду за вызов и вставит JSX

«Покажи идеи для hero-блока лендинга про <тема>»Агент вызовет get_inspiration и покажет найденные варианты

«Набросай с 21st AI три варианта таблицы цен»При включённом 21st AI агент вызовет generate и вернёт ссылку на превью; без AI этого инструмента в списке нет

Для каких задач

Найти готовый компонент по запросу: таблицу цен, hero-блок, навигацию

Забрать код компонента в проект и подогнать под ваши токены и папки

Вставить логотип бренда готовым JSX/TSX-компонентом

Показать несколько направлений дизайна до выбора

Сгенерировать новый UI по текстовому запросу при подключённом 21st AI

Ограничения

Бесплатный аккаунт забирает код только 2 компонентов в день на сайте, в MCP и CLI вместе; поиск без ограничений, на любом платном тарифе лимита нет, Builder стоит от $6 в месяц при оплате за год

generate и iterate_generation появляются только с 21st AI: тариф Builder + AI от $15 в месяц при оплате за год, 500 кредитов в месяц, генерация тратит кредиты

Платные компоненты отдают код только после разблокировки

Ключи из старой консоли Magic сброшены: со старым ключом сервер не работает

Если не работает

Старый конфиг Magic MCP перестал работать

Сервер magic.21st.dev заменён на 21st MCP, а все старые ключи сброшены. Получите новый ключ на 21st.dev/mcp: конфиг с @21st-dev/magic снова заработает через прокси.

Генерация возвращает ai_subscription_required

На аккаунте не включён 21st AI. Не повторяйте вызов; после подключения AI обновите список инструментов или переподключите сервер.

Вызов падает с ошибкой авторизации

Возьмите ключ на 21st.dev/mcp и пропишите его в заголовок x-api-key или в переменную API_KEY_21ST.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
21st MCPразработчик сервиса	21st.dev	6,5 тыс.	HTTP	токен	9	9 сентября 2026
Magic MCP (@21st-dev/magic)разработчик сервиса	21st.dev	6,5 тыс.	локально	токен	—	9 сентября 2026

Частые вопросы

Magic MCP и 21st MCP — одно и то же?

Да, Magic MCP переименован в 21st MCP. Пакет @21st-dev/magic оставлен как прокси: старые конфиги работают и обращаются к тому же серверу, что и 21st CLI.

Нужна подписка, чтобы агент генерировал UI?

Да, нужен тариф с 21st AI. Проверить доступ можно через get_usage, поле aiGenerationEnabled. Без AI агент ищет компонент через search, берёт код get_component и подгоняет его сам.

Под какой стек эти компоненты?

Компоненты на React и Tailwind, совместимы с shadcn. Агент ставит их как регистр shadcn или записывает файлы из ответа, затем подключает на страницу.

Команда /ui ещё работает?

Пишите агенту обычным языком: найди в 21st компонент или сгенерируй UI. Фразы /ui и /21 были договорённостью в описаниях старых инструментов, протокол их не требует.

Как подключить 21st dev MCP к Claude Code или Cursor?

Выполните npx @21st-dev/cli@latest init --client claude или --client cursor; для VS Code, Windsurf и Codex — vscode, windsurf, codex. Вручную сервер добавляется по адресу https://21st.dev/api/mcp с ключом в x-api-key, как во вкладках блока «Как подключить».

Где взять ключ для Magic MCP 21st dev?

На странице 21st.dev/mcp, ключ бесплатный. Обычно его передают в заголовке x-api-key, подходит и Authorization: Bearer. Claude Desktop и Lovable входят через OAuth без ключа.

Magic MCP бесплатный?

Поиск бесплатный на любом тарифе. Код бесплатный аккаунт получает для 2 компонентов в день; без лимита — с тарифа Builder от $6 в месяц при оплате за год. Генерация через 21st AI — на Builder + AI от $15 в месяц.

Работает ли сервер из России?

Сервер работает на стороне 21st.dev: нужен аккаунт и ключ, цены платных тарифов указаны в долларах.

Magic MCP от 21st.dev: UI-компоненты для Claude Code, Cursor и Codex

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы