Каталог MCP
21st-dev
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

21st_magic_component_builder

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

Параметры

messagestringобязательный
Full users message
searchQuerystringобязательный
Generate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase
absolutePathToCurrentFilestringобязательный
Absolute path to the current file to which we want to apply changes
absolutePathToProjectDirectorystringобязательный
Absolute path to the project root directory
standaloneRequestQuerystringобязательный
You need to formulate what component user wants to create, based on his message, possbile chat histroy and a place where he makes the request.Extract additional context about what should be done to create a ui component/page based on the user's message, search query, and conversation history, files. Don't halucinate and be on point.

21st_magic_component_inspiration

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

Параметры

messagestringобязательный
Full users message
searchQuerystringобязательный
Search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase

21st_magic_component_refiner

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

Параметры

userMessagestringобязательный
Full user's message about UI refinement
absolutePathToRefiningFilestringобязательный
Absolute path to the file that needs to be refined
contextstringобязательный
Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string.

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) - Код компонента - Инструкции по импорту

Параметры

queriesstring[]обязательный
List of company names to search for logos
formatenumобязательный
Output format
JSXTSXSVG

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

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

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

Также 21st-dev/Magic-MCP можно установить в Cursor по ссылке автоматически.

FAQ

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

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

Что он умеет?

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

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

Номер в рейтинге: #28
Звезд на Github: 5468
Форков на Github: 405
Язык реализации: TypeScript
Лицензия: неизвестно
Официальный сервер: Нет
Дата обновления данных: 19.07 в 08:59
Идентификатор: rVs4SGmcPQTqvK_U
Категории: Автоматизация браузера, Агенты для программирования, ИИ и машинное обучение, Инструменты дизайна, Инструменты для разработчиков

Другие проверенные MCP-сервера

gitkraken/gk-cli

официальный

MCP-сервер GitKraken CLI объединяет git, GitHub и Jira. Встроенный AI помогает с коммитами и Pull Request. Полезен разработчикам для автоматизации работы с несколькими репозиториями через единый сервер.

tinyfish-io/agentql-mcp

официальный

Сервер AgentQL для MCP извлекает структурированные данные с любой веб-страницы по описанию на естественном языке. Разработчику достаточно указать URL и перечислить нужные поля – MCP инструмент сам соберет информацию для AI-агентов.

flux159/mcp-server-kubernetes

MCP сервер для подключения к Kubernetes и управления кластером через kubectl и Helm. Выполняет операции с ресурсами, масштабирование, деплой, диагностику и port-forwarding. Полезен разработчикам и ...

brightdata/brightdata-mcp

MCP-сервер Bright Data подключает LLM к живому интернету, обходя блокировки и CAPTCHA. Даёт real-time поиск, скрапинг, мониторинг e-commerce, данных с npm/PyPI и AI-брендов. Бесплатно 5 000 кредитов в месяц.

public-ui/kolibri

официальный

KoliBri - библиотека атомарных веб-компонентов для доступного HTML. Расширяет стандарт, не привязана к дизайну, подходит для любых проектов. Упрощает создание семантичных, валидных и доступных инте...

weaviate/mcp-server-weaviate

официальный

Встроенный MCP сервер Weaviate даёт AI-агентам гибридный поиск, управление коллекциями и объектами прямо через REST API. Полезен разработчикам, работающим с векторными базами данных.