Каталог MCP
21st-dev/Magic-MCP

21st-dev/Magic-MCP

MCP сервер 21st.dev Magic AI Agent помогает разработчикам создавать UI-компоненты через описание на естественном языке. Интегрируется с Cursor, Windsurf и VS Code, генерируя готовые компоненты.

README

4 инструмента

Версии

Установить сервер

21st.dev Magic AI Agent

MCP Banner

Magic Component Platform (MCP) is a powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions. It integrates seamlessly with popular IDEs and provides a streamlined workflow for UI development.

🌟 Features

AI-Powered UI Generation: Create UI components by describing them in natural language
Multi-IDE Support:
- Cursor IDE integration
- Windsurf support
- VSCode support
- VSCode + Cline integration (Beta)
Modern Component Library: Access to a vast collection of pre-built, customizable components inspired by 21st.dev
Real-time Preview: Instantly see your components as you create them
TypeScript Support: Full TypeScript support for type-safe development
SVGL Integration: Access to a vast collection of professional brand assets and logos
Component Enhancement: Improve existing components with advanced features and animations (Coming Soon)

🎯 How It Works

Tell Agent What You Need
- In your AI Agent's chat, just type /ui and describe the component you're looking for
- Example: /ui create a modern navigation bar with responsive design
Let Magic Create It
- Your IDE prompts you to use Magic
- Magic instantly builds a polished UI component
- Components are inspired by 21st.dev's library
Seamless Integration
- Components are automatically added to your project
- Start using your new UI components right away
- All components are fully customizable

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

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[]обязательный
Список названий компаний для поиска логотипов.

Github Сайт сервера

Конфиг для установки сервера

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

Нужен npx

Сервер запускается через npx
Без него ничего работать не будет.

Как установить npx

FAQ

Для чего этот сервер?

Сервер помогает разработчикам создавать готовые UI-компоненты по текстовому описанию. Вместо того чтобы писать вёрстку вручную, достаточно объяснить агенту, что нужно — и он сгенерирует современный, настраиваемый компонент прямо в проекте. Интеграция с Cursor, Windsurf и VS Code позволяет не выходить из редактора. Это ускоряет разработку интерфейсов и избавляет от рутины.

Что он умеет?

Сервер создаёт UI-компоненты по текстовому описанию через `/ui`, ищет и возвращает логотипы в JSX, TSX или SVG с фильтрацией по категориям, показывает примеры из библиотеки 21st.dev для вдохновения и перерабатывает или улучшает уже существующие компоненты - генерирует, обновляет, рефакторит их код.

Информация о сервере

Номер в рейтинге: #28
Звезд на Github: 5840
Форков на Github: 447
Загрузок: 468 450
Язык реализации: TypeScript
Лицензия: ISC
Официальный сервер: Нет
Дата обновления данных: 10.09 в 21:47
Идентификатор: rVs4SGmcPQTqvK_U
Категории: Автоматизация браузера, Агенты для программирования, ИИ и машинное обучение, Инструменты дизайна, Инструменты для разработчиков