Добавить сервер
21st-dev/Magic-MCP
  1. Каталог MCP
  2. 21st-dev/Magic-MCP

21st-dev/Magic-MCP

от 21st-dev
Создаёт готовые React-компоненты по текстовому описанию прямо в Cursor, Windsurf и VS Code. Подтягивает стили из 21st.dev и показывает превью на лету.
GithubNPMСайт сервера

Magic MCP → 21st MCP

Magic MCP is now the 21st MCP. The Magic MCP server (@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.

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

Or add it manually — it is a plain HTTP MCP server:

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

Get an API key at 21st.dev/mcp.

Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.

What this package does now (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the tools available to the authenticated account.

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

Инструменты были проиндексированы:
21st_magic_component_builder

Используйте этот инструмент, когда пользователь запрашивает новый UI-компонент: например, упоминает /ui, /21, /21st или просит кнопку, поле ввода, диалог, таблицу, форму, баннер, карточку или другой React-компонент. Этот инструмент ВОЗВРАЩАЕТ ТОЛЬКО текстовый фрагмент для этого UI-компонента. После вызова этого инструмента вы должны отредактировать или добавить файлы, чтобы интегрировать фрагмент в кодовую базу.

Параметры
  • absolutePathToCurrentFilestringобязательный

    Абсолютный путь к текущему файлу, к которому нужно применить изменения.

  • absolutePathToProjectDirectorystringобязательный

    Абсолютный путь к корневому каталогу проекта

  • messagestringобязательный

    Полное сообщение пользователя

  • searchQuerystringобязательный

    Сгенерируй поисковый запрос для 21st.dev (библиотека для поиска UI-компонентов), чтобы найти компонент под сообщение пользователя. Максимум два-четыре слова или фраза.

  • standaloneRequestQuerystringобязательный

    Тебе нужно сформулировать, какой компонент пользователь хочет создать, на основе его сообщения, возможной истории чата и места, где он делает запрос. Извлеки дополнительный контекст о том, что нужно сделать для создания UI-компонента или страницы, на основе сообщения пользователя, поискового запроса, истории переписки и файлов. Не выдумывай лишнего и будь по существу.

21st_magic_component_inspiration

Используйте этот инструмент, когда пользователь хочет посмотреть компонент, получить вдохновение или /21st получить данные и превью с 21st.dev. Этот инструмент возвращает JSON-данные подходящих компонентов без генерации нового кода. Этот инструмент возвращает ТОЛЬКО текстовый фрагмент для этого UI-компонента. После вызова этого инструмента вы должны отредактировать или добавить файлы, чтобы интегрировать фрагмент в кодовую базу.

Параметры
  • messagestringобязательный

    Полное сообщение пользователя

  • searchQuerystringобязательный

    Поисковый запрос для 21st.dev (библиотека для поиска UI-компонентов), чтобы найти UI-компонент, соответствующий сообщению пользователя. Максимум два-четыре слова или фраза.

21st_magic_component_refiner

Используйте этот инструмент, когда пользователь запрашивает редизайн/доработку/улучшение текущего UI-компонента с помощью команд /ui или /21, или когда контекст касается улучшения или доработки UI для React-компонента или молекулы (НЕ для больших страниц). Улучшает UI компонентов и возвращает переработанную версию компонента и инструкции по её реализации.

Параметры
  • absolutePathToRefiningFilestringобязательный

    Абсолютный путь к файлу, который нужно доработать.

  • contextstringобязательный

    Извлеки конкретные элементы интерфейса и аспекты, требующие улучшения, на основе сообщений пользователя, кода и истории разговора. Определи точно, какие компоненты (кнопки, формы, модальные окна и т.д.) упоминает пользователь и какие аспекты (стилизация, вёрстка, адаптивность и т.д.) он хочет улучшить. Не включай общие улучшения - сосредоточься только на том, что пользователь явно упоминает или что можно обоснованно вывести из доступного контекста. Если ничего конкретного не упомянуто или невозможно определить, что требует улучшения, верни пустую строку.

  • userMessagestringобязательный

    Полное сообщение пользователя об улучшении интерфейса

logo_search

Ищет и возвращает логотипы в указанном формате (JSX, TSX, SVG). Поддерживает поиск одного или нескольких логотипов с фильтрацией по категориям. Может возвращать логотипы в разных темах (светлая/тёмная), если они доступны. Когда использовать этот инструмент: 1. Когда пользователь вводит команду "/logo" (например, "/logo GitHub") 2. Когда пользователь просит добавить логотип компании, которого нет в локальном проекте Примеры запросов: - Одна компания: ["discord"] - Несколько компаний: ["discord", "github", "slack"] - Конкретный бренд: ["microsoft office"] - Командный стиль: "/logo GitHub" -> ["github"] - Стиль просьбы: "Добавь логотип Discord в проект" -> ["discord"] Варианты формата: - TSX: возвращает TypeScript-компонент React - JSX: возвращает JavaScript-компонент React - SVG: возвращает разметку SVG Каждый результат включает: - Имя компонента (например, DiscordIcon) - Код компонента - Инструкции по импорту

Параметры
  • formatenumобязательный

    Формат вывода

  • queriesstring[]обязательный

    Список названий компаний для поиска логотипов.

0.2.3основная
0.2.2
0.2.1
0.2.0
0.1.1-beta.1
0.1.1-beta.0
0.1.0
0.0.47
0.0.46
0.0.41
0.0.40
0.0.39
0.0.38
0.0.37
0.0.36
0.0.35
0.0.34
0.0.33
0.0.32
0.0.31
0.0.30
0.0.29
0.0.28
0.0.27
0.0.26
0.0.25
0.0.24
0.0.23
0.0.22
0.0.21
0.0.20
0.0.19
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1

Выберите клиент, чтобы установить 21st-dev/Magic-MCP:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}
CursorCursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}
VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"21st-dev-magic-mcp-1iwbgc7lbe\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"@21st-dev/magic@latest\"],\"env\":{\"API_KEY\":\"${input:apiKey}\"}}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}
Claude CodeClaude Code

Добавьте сервер одной командой в терминале:

claude mcp add 21st-dev-magic-mcp-1iwbgc7lbe --env API_KEY=${input:apiKey} -- npx -y @21st-dev/magic@latest

Либо через JSON-конфиг:

claude mcp add-json 21st-dev-magic-mcp-1iwbgc7lbe "{\"command\":\"npx\",\"args\":[\"-y\",\"@21st-dev/magic@latest\"],\"env\":{\"API_KEY\":\"${input:apiKey}\"}}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add 21st-dev-magic-mcp-1iwbgc7lbe --env API_KEY=${input:apiKey} -- npx -y @21st-dev/magic@latest

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

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

[mcp_servers.21st-dev-magic-mcp-1iwbgc7lbe.env]
API_KEY = "${input:apiKey}"
PerplexityPerplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите 21st-dev/Magic-MCP, а в поле команды запуска — строку ниже:
npx -y @21st-dev/magic@latest

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}
ClineCline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например 21st-dev-magic-mcp-1iwbgc7lbe.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: 21st-dev-magic-mcp-1iwbgc7lbe
    command: npx
    args:
      - "-y"
      - "@21st-dev/magic@latest"
    env:
      API_KEY: ${input:apiKey}
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "21st-dev-magic-mcp-1iwbgc7lbe": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

Похожие MCP-сервера

Jpisnice/shadcn-ui-mcp-server

Jpisnice/shadcn-ui-mcp-server

от jpisnice

Подтягивает актуальные исходники компонентов shadcn/ui v4 с демо и готовыми блоками для React, Svelte, Vue и React Native.

TypeScript⭐ 3065
osulivan/skill4agent-mcp-server

osulivan/skill4agent-mcp-server

от osulivan

MCP сервер для skill4agent ищет, показывает и устанавливает AI навыки прямо в диалогах. Включает поиск по ключевым словам и категориям, детальную документацию и установку. Идеален для быстрого подключения готовых skill-команд в AI-ассистентах.

TypeScript⭐ 4
Wolfe-Jam/faf-mcp

Wolfe-Jam/faf-mcp

от wolfe-jam

Сервер MCP для синхронизации контекста проекта. Один .faf файл - и он автоматически синхронизируется с Cursor, Windsurf, Cline, VS Code. Решает вечную проблему разъезжающегося контекста. Ключевые слова: FAF, bi-sync.

TypeScript⭐ 7
Tommertom/awesome-ionic-mcp

Tommertom/awesome-ionic-mcp

от tommertom

MCP инструмент для разработчиков Ionic и Capacitor: предоставляет компоненты фреймворка, плагины, документацию и позволяет выполнять CLI команды прямо через AI-ассистента. Ускоряет создание кроссплатформенных приложений.

TypeScript⭐ 45
mmntm/weblate-mcp

mmntm/weblate-mcp

от mmntm

MCP-сервер для управления переводами в Weblate через AI-ассистентов. Позволяет искать, обновлять переводы, управлять проектами, компонентами и получать статистику. Ускоряет локализацию и автоматизи...

TypeScript⭐ 23
paladini/devutils-mcp-server

paladini/devutils-mcp-server

от paladini

DevUtils MCP сервер даёт 36 утилит для повседневных задач: хэширование, кодирование, работа с UUID, JWT, JSON, CIDR и текстом. Всё работает локально в Claude, Cursor, VS Code и других MCP-клиентах ...

TypeScript⭐ 5
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин