Что сможет агент
- Найдёт в каталоге Magic UI анимированный блок под задачу: бегущую строку отзывов или логотипов, счётчик цифр, кнопку с бликом, анимированный заголовок, фон, макет телефона или браузера.
- Покажет несколько вариантов под одно место с описанием каждого: на проверке по слову button нашлось семь анимированных кнопок.
- Даст агенту код компонента и примеры, чтобы блок встал на твою страницу с твоими текстами и цветами.
- Отдаст точную команду установки: компонент ляжет в components/ui, нужные пакеты и анимации добавятся в проект сами.
- Кто сделал
- Magic UI
- Версия
- 2.0.0
- Проверено
- 01.10.2026, Claude Code
- Лицензия
- MIT
- Документация
- magicui.design/docs/mcp
Подключить
Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.
Подключи MCP-сервер «Magic UI» версии 2.0.0. Работай по шагам и после каждого коротко говори, что сделал.
Данные сервера (каталог code.tarasovweb.ru, проверено 01.10.2026):
- имя в конфиге: magicui
- официальный источник: https://github.com/magicuidesign/mcp
- запуск: npx -y @magicuidesign/mcp@2.0.0
Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.
Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 18 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get magicui` (в Codex: `codex mcp list`).
3. Подключи сервер:
Claude Code: claude mcp add --scope user --transport stdio magicui -- npx -y @magicuidesign/mcp@2.0.0
Codex: codex mcp add magicui -- npx -y @magicuidesign/mcp@2.0.0
Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 3 инструмента, перечисли их. Сделай пробный запрос: «Найди через Magic UI компонент marquee для бегущей строки с логотипами клиентов и покажи команду, которой его ставят в проект». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove magicui --scope user` (в Codex: `codex mcp remove magicui`).
Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://code.tarasovweb.ru/mcp/magicui#problemy- Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.
Что нужно на компьютере: Node.js 18 или новее.
Ключ: не нужен.
Нужен Node.js 18 или новее, ключ не нужен. Сервер только ищет компоненты и отдаёт агенту их код и команду установки. Ставит компонент сам агент командой shadcn в папке проекта на React с Tailwind CSS и shadcn/ui (там есть файл components.json): файл компонента ложится в components/ui, пакеты и анимации добавляются в проект. Компоненты с magicui.design написаны для Tailwind 4, для проекта на Tailwind 3 смотри частые проблемы ниже.
Проверь, что работает
Найди через Magic UI компонент marquee для бегущей строки с логотипами клиентов и покажи команду, которой его ставят в проект
Что должно получиться: Агент найдёт компонент marquee и пример marquee-logos и покажет команду npx shadcn@latest add "https://magicui.design/r/marquee.json". Ключ не нужен, ответ приходит меньше чем за секунду.
Что можно сделать
5 сценариевОживить страницу сайта двумя-тремя анимированными блоками
Агент прочитает страницу и предложит, где анимация поможет: первый экран, цифры, отзывы. Найдёт варианты в Magic UI, поставит выбранные и вставит их с твоими текстами. На проверке так появились кнопка с бликом, счётчики и бегущая строка отзывов.
- searchRegistryItems: по marquee logos нашлись компонент marquee и пример marquee-logos, по number counter animation первым пришёл number-ticker, по call to action button - семь кнопок. Запросы по-русски («бегущая строка логотипов», «счётчик цифр») вернули пустой список.
- getRegistryItem для marquee, number-ticker и shimmer-button вернул команду установки, код и примеры за 0,2-0,6 секунды.
- npx shadcn@4.21.0 add с адресами из ответов создал три файла в components/ui, добавил пакет motion и анимацию бегущей строки в app/globals.css.
- Блоки встали на страницу с русскими текстами, сборка Next.js прошла с первого раза.
Прочитай страницу [путь к файлу страницы, например app/page.tsx] и предложи 2-3 места, где анимация поможет: первый экран, цифры, отзывы. Сначала посмотри версию tailwindcss в package.json и скажи мне её.
Через Magic UI подбери компоненты: ищи searchRegistryItems по-английски (marquee, number ticker, button, background), по каждому месту покажи 2-3 варианта с одной строкой, чем они отличаются, и дождись моего выбора.
Выбранное поставь командой из ответа getRegistryItem, но с точной версией shadcn: npx shadcn@4.21.0 add и адрес компонента. Если tailwindcss версии 3, бери адрес https://v3.magicui.design/r/[имя компонента].json.
Вставь блоки на страницу с моими текстами и цветами: [фирменные цвета]. Примеры из ответа сервера не копируй как есть: путь @/registry/magicui/... замени на путь, куда лёг компонент. В конце собери проект (npm run build) и перечисли, какие файлы поменялись.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Сервер даёт команду с shadcn@latest, то есть самую свежую версию shadcn. Точная версия тоже работает: на проверке ставили shadcn@4.21.0.
- Совет. Цвета кнопки ShimmerButton задаются свойствами background и shimmerColor: на проверке так кнопку подогнали под цвета страницы.
Бегущая строка отзывов или логотипов клиентов
Агент поставит компонент Marquee и соберёт из твоих отзывов или логотипов ленту, которая сама прокручивается и замирает при наведении мыши. Можно две строки навстречу друг другу, как на проверке.
- getRegistryItem marquee вернул команду установки и код со свойствами: reverse (обратное направление), pauseOnHover (пауза при наведении), vertical (вертикальная лента), repeat (сколько раз повторить содержимое).
- Пример marquee-demo показал, как собрать две строки отзывов и затухание по краям.
- Команда установки положила компонент в components/ui/marquee.tsx и дописала анимацию в app/globals.css.
Через Magic UI получи компонент marquee (getRegistryItem) и отдельным вызовом пример по имени: [marquee-demo для отзывов или marquee-logos для логотипов]. Поставь компонент командой из ответа с точной версией shadcn, например npx shadcn@4.21.0 add https://magicui.design/r/marquee.json.
На странице [путь к файлу] сделай блок [«Отзывы» или «Нам доверяют»]: две строки навстречу друг другу, пауза при наведении, мягкое затухание по краям. Отзывы или логотипы возьми из [файл, папка или список]. Путь @/registry/magicui/marquee из примера замени на @/components/ui/marquee.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Скорость задаёт класс [--duration:30s]: чем больше секунд, тем медленнее лента.
- Совет. В примере marquee-logos стоят логотипы известных компаний, которые грузятся с чужого сайта cdn.simpleicons.org. Поставь вместо них логотипы своих клиентов из папки public.
Цифры, которые набегают при прокрутке
Агент поставит компонент NumberTicker: число на странице плавно набегает от нуля, когда блок появляется на экране. Подходит для цифр вроде «1 250 заявок в месяц» и «4,9 средняя оценка».
- getRegistryItem number-ticker вернул код компонента: число набегает пружинной анимацией из пакета motion, когда блок попадает на экран.
- Команда установки положила компонент в components/ui и добавила в проект пакет motion.
Через Magic UI получи компонент number-ticker (getRegistryItem с includeSource) и поставь его командой из ответа с точной версией shadcn, например npx shadcn@4.21.0 add https://magicui.design/r/number-ticker.json.
На странице [путь к файлу] сделай блок из карточек с цифрами: [число и подпись для каждой карточки]. Для дробных чисел задай decimalPlaces. В components/ui/number-ticker.tsx замени en-US на ru-RU, чтобы числа были в русском виде: 1 250 и 4,9.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Без замены en-US на ru-RU счётчик показывает 1,250 и 4.9: так было на проверке.
- Совет. Анимация срабатывает один раз, когда блок впервые попал на экран.
Кнопка заявки с бегущим бликом
Агент подберёт анимированную кнопку для главного действия на странице: «Заказать», «Оставить заявку», «Купить». Покажет варианты из каталога и поставит выбранный. На проверке взяли ShimmerButton: по её краю бежит светлый блик.
- searchRegistryItems по слову button с видом component нашёл семь вариантов: pulsating-button, rainbow-button, ripple-button, shimmer-button, shiny-button, interactive-hover-button и cool-mode.
- getRegistryItem shimmer-button показал свойства: background (фон), shimmerColor (цвет блика), borderRadius (скругление), shimmerSize (толщина блика).
Через Magic UI найди анимированные кнопки: searchRegistryItems с запросом button и kind component. Коротко опиши каждую и дождись моего выбора. Выбранную поставь командой из ответа getRegistryItem с точной версией shadcn, например npx shadcn@4.21.0 add и адрес компонента. Замени ею кнопку [текст кнопки] на странице [путь к файлу], цвета возьми мои: [цвет фона и цвет блика].Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Цвета принимаются в любом виде, который понимает CSS: на проверке фон rgb(69, 26, 3) и блик #fde68a.
- Совет. cool-mode в этом списке не отдельная кнопка: это эффект, который надевают на свою кнопку или ссылку.
Компонент для проекта на Tailwind 3
Агент проверит версию Tailwind и для проекта на Tailwind 3 поставит старую версию компонента с v3.magicui.design. Анимация допишется в tailwind.config, и блок будет двигаться, как задумано.
- В тестовом проекте на Next.js 14 и Tailwind 3 новая версия marquee встала без ошибок, но лента стояла на месте, а карточки слиплись без отступов.
- Старая версия с v3.magicui.design дописала анимацию в tailwind.config.ts и положила компонент в components/magicui/marquee.tsx.
- После сборки лента поехала: за полторы секунды сдвинулась на 76 пикселей, отступы между карточками появились.
Посмотри версию tailwindcss в package.json. Если это 3, компонент [имя, например marquee] найди через Magic UI (getRegistryItem), но ставь его старую версию для Tailwind 3: npx shadcn@4.21.0 add https://v3.magicui.design/r/[имя].json. Новую версию с magicui.design не ставь: она написана для Tailwind 4. Компонент ляжет в components/magicui, подключай его оттуда. После сборки открой страницу и проверь, что анимация идёт.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Сервер знает только новый каталог magicui.design, поэтому адрес v3 агент подставляет сам: так и скажи ему в промпте.
- Совет. Ссылка на старые версии есть в документации Magic UI, на странице Legacy.
Пример работы
редакция, прогон при проверке 01.10.2026- Задача
- Оживить тестовую страницу с формой заявки: кнопка, счётчики и бегущая строка отзывов
- Промпт
- Подбери через Magic UI анимированную кнопку для заявки, счётчики для трёх цифр и бегущую строку отзывов, поставь их и вставь на страницу app/page.tsx с моими текстами
- Что сделал агент
- searchRegistryItems: marquee logos - компонент marquee и пример marquee-logos (0,2 с), number counter animation - number-ticker первым, button с видом component - семь кнопок. Запрос «счётчик цифр» по-русски вернул пустой список.
- getRegistryItem для marquee, number-ticker и shimmer-button вернул команды установки, код и примеры за 0,2-0,6 с.
- npx shadcn@4.21.0 add с адресами из ответов создал три файла в components/ui, добавил пакет motion и анимацию бегущей строки в app/globals.css.
- Блоки встали на страницу, сборка Next.js 16.3.8 прошла. Счётчик показал 1,250 и 4.9, после замены en-US на ru-RU в файле компонента - 1 250 и 4,9.
- Результат
- Три анимированных блока на странице: кнопка с бликом, счётчики и две бегущие строки отзывов. Прогон на тестовом проекте Next.js 16.3.8 с Tailwind 4 и shadcn/ui 4.21.0.
Инструменты
3 · описания около 0,7 тыс. токеновЖёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.
Когда не нужен
Если сайт собран не на React с Tailwind CSS, например на Тильде или WordPress, компоненты Magic UI в него без переделки не встанут: это код для React. Если нужен один компонент, имя которого ты знаешь, хватит команды без подключения: npx shadcn@4.21.0 add и адрес компонента вида https://magicui.design/r/marquee.json. Для обычных элементов интерфейса без анимации, вроде окон, таблиц и форм, бери shadcn/ui из каталога: Magic UI построен поверх него и добавляет анимацию.
Частые проблемы
9Сайт собирается без ошибок, но бегущая строка стоит на месте, а карточки в ней слиплись без отступов
Компоненты с magicui.design написаны для Tailwind 4. В проекте на Tailwind 3 команда установки дописывает анимацию в app/globals.css блоком @theme inline, которого Tailwind 3 не понимает, и классы вида gap-(--gap) он тоже не знает. Посмотри версию tailwindcss в package.json. Для Tailwind 3 ставь старую версию компонента той же командой, но с адресом https://v3.magicui.design/r/marquee.json (вместо marquee - имя компонента): она допишет анимацию в tailwind.config, а файл положит в components/magicui. Блоки, которые новая версия успела дописать в globals.css (@theme inline и .theme), убери. Другой путь - перевести проект на Tailwind 4 по инструкции shadcn/ui.
Поиск вернул пустой список: "total": 0
Поиск сервера понимает только латиницу и английские слова: на проверке «бегущая строка логотипов» и «счётчик цифр» ничего не нашли. Попроси агента искать по-английски: marquee для бегущей строки, number ticker для счётчика, button для кнопок, background для фона. Или попроси показать весь список компонентов через listRegistryItems.
Сборка падает с ошибкой «Module not found: Can't resolve '@/registry/magicui/marquee'» после вставки примера
Примеры в ответе сервера взяты из репозитория Magic UI и подключают компонент по его внутреннему пути. Поставленный компонент лежит в components/ui: замени путь на @/components/ui/marquee, и так для любого компонента.
Счётчик показывает 1,250 и 4.9 вместо 1 250 и 4,9
Компонент NumberTicker форматирует числа по-английски: в его коде стоит en-US. Попроси агента заменить en-US на ru-RU в components/ui/number-ticker.tsx.
Агент получил очень длинный ответ, и память разговора быстро заполняется
getRegistryItem с примерами (includeExamples) отдаёт код всех примеров компонента разом: у animated-beam на проверке ответ занял 104 тыс. знаков, из них 93 тыс. - шесть примеров. Проси сначала компонент без примеров, а нужный пример бери отдельным вызовом по имени, например marquee-logos: такой ответ занимает около 2 тыс. знаков.
Агент не видит инструментов сервера
Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.
«spawn npx ENOENT» при запуске
Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.
«Unsupported engine» или падение при старте
Старая версия Node.js. Нужна 18 или новее, проверить: node --version.
Codex: сервер не успевает запуститься
Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.
Безопасность и данные
- Кто сделал
- Magic UI (официальный). Исходный код: github.com/magicuidesign/mcp, лицензия MIT.
- Что видит агент
- Только то, что агент сам передаёт серверу: слова поиска и имена компонентов. Файлы проекта и разговор сервер не читает. Каталог он один раз за сеанс скачивает с magicui.design и ищет по нему у тебя на компьютере, поэтому слова поиска наружу не уходят. Наружу уходят запросы файлов каталога: список компонентов и файлы тех компонентов и примеров, которые просит агент.
- Куда уходят данные
- Данные уходят: Magic UI (сайт magicui.design на хостинге Vercel), США.
- Что может изменить
- Сам сервер ничего не меняет и файлов не пишет: он отдаёт агенту описание, код и команду установки. Компонент ставит агент командой shadcn: она создаёт файл в components/ui, может поставить пакеты (на проверке пакет motion) и дописывает анимации в app/globals.css. В ответе сервера команда с shadcn@latest, то есть самая свежая версия shadcn: пусть агент спросит тебя перед запуском и поставит точную. Код компонента приходит с magicui.design в момент запроса и попадает в твой проект: каталог обновляется без смены версии сервера.
- Наша проверка
- Источник - репозиторий magicuidesign/mcp и пакет @magicuidesign/mcp в npm; на пакет ссылается страница MCP в документации Magic UI, лицензия MIT (в package.json пакета указана ISC, а файл лицензии в пакете и в репозитории - MIT). Подтверждения сборки у пакета в npm нет, поэтому мы собрали исходники из репозитория в точке выпуска 2.0.0 и сравнили: код, который запускает сервер, совпал с опубликованным. В базе OSV записей нет ни по пакету, ни по 93 пакетам, которые ставит npx; команд, которые запускаются при установке, нет. Описания всех 3 инструментов прочитаны, скрытых указаний агенту нет, своих инструкций у сервера нет. Соединения проверены на прогоне: npx при запуске обращается к реестру npm, сам сервер - только к magicui.design (хостинг Vercel), статистики нет. Ответ с кодом компонента начинается с пояснения для агента: код дан для понимания, ставить компонент нужно командой установки. Версия в команде закреплена.
- Версия
- В командах закреплена версия 2.0.0: ставится ровно то, что мы проверили.
- Проверить самому
- агент прочитает код подключения как недоверенный
Полезные материалы
- Инструкция · на английскомMagic UI MCP: официальная страницаЧто даёт сервер и как его подключить. Там команда с @latest, в нашей команде версия закреплена.
- Инструкция · на английскомИсходный код сервераТри инструмента и то, что сервер читает каталог magicui.design напрямую, без своей копии.
- Инструкция · на английскомMagic UI: как ставить компонентыУстановка такая же, как у shadcn/ui: сначала init в проекте, потом add для каждого компонента.
- Инструкция · на английскомСтарые версии компонентов для Tailwind 3Где лежат компоненты для проектов на Tailwind 3 и как перейти на текущие.
- Инструкция · на английскомshadcn/ui: переход на Tailwind 4Официальная инструкция, на которую ссылается Magic UI: что поменять в проекте при переходе.
- Пример · на английскомMarquee: бегущая строка и её настройкиЖивые примеры: отзывы, логотипы, вертикальная лента, объёмная лента.
Журнал проверок
- 01.10.2026·2.0.0·Claude Code, macOS·работаетa2e98efcbdc4772f
Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.
Похожие подключения
Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.
