СмыслоКод

Magic UI

Magic UI · официальный сервер

Агент сам ставит на твой сайт бегущую строку отзывов, счётчики и кнопки с анимацией

На твоём компьютере·Без ключа·Бесплатно·3 инструмента·проверено 01.10.2026 на версии 2.0.0

Другие способы ↓Что можно сделать ↓

Что сможет агент

  • Найдёт в каталоге Magic UI анимированный блок под задачу: бегущую строку отзывов или логотипов, счётчик цифр, кнопку с бликом, анимированный заголовок, фон, макет телефона или браузера.
  • Покажет несколько вариантов под одно место с описанием каждого: на проверке по слову button нашлось семь анимированных кнопок.
  • Даст агенту код компонента и примеры, чтобы блок встал на твою страницу с твоими текстами и цветами.
  • Отдаст точную команду установки: компонент ляжет в components/ui, нужные пакеты и анимации добавятся в проект сами.
Кто сделал
Magic UI
Версия
2.0.0
Проверено
01.10.2026, Claude Code
Лицензия
MIT
Код
github.com/magicuidesign/mcp
Документация
magicui.design/docs/mcp

Подключить

Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.

Промпт для агента
Подключи MCP-сервер «Magic UI» версии 2.0.0. Работай по шагам и после каждого коротко говори, что сделал.

Данные сервера (каталог smyslokod.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://smyslokod.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 сценариев
Наш прогон: тестовая страница на Next.js с тремя блоками Magic UI, которые агент поставил по ответам сервера: кнопка ShimmerButton «Оставить заявку», счётчики NumberTicker и две бегущие строки отзывов Marquee

Оживить страницу сайта двумя-тремя анимированными блоками

Агент прочитает страницу и предложит, где анимация поможет: первый экран, цифры, отзывы. Найдёт варианты в Magic UI, поставит выбранные и вставит их с твоими текстами. На проверке так появились кнопка с бликом, счётчики и бегущая строка отзывов.

  1. searchRegistryItems: по marquee logos нашлись компонент marquee и пример marquee-logos, по number counter animation первым пришёл number-ticker, по call to action button - семь кнопок. Запросы по-русски («бегущая строка логотипов», «счётчик цифр») вернули пустой список.
  2. getRegistryItem для marquee, number-ticker и shimmer-button вернул команду установки, код и примеры за 0,2-0,6 секунды.
  3. npx shadcn@4.21.0 add с адресами из ответов создал три файла в components/ui, добавил пакет motion и анимацию бегущей строки в app/globals.css.
  4. Блоки встали на страницу с русскими текстами, сборка 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 на тестовой странице: верхняя едет влево, нижняя вправо, края мягко затухают

Бегущая строка отзывов или логотипов клиентов

Агент поставит компонент Marquee и соберёт из твоих отзывов или логотипов ленту, которая сама прокручивается и замирает при наведении мыши. Можно две строки навстречу друг другу, как на проверке.

  1. getRegistryItem marquee вернул команду установки и код со свойствами: reverse (обратное направление), pauseOnHover (пауза при наведении), vertical (вертикальная лента), repeat (сколько раз повторить содержимое).
  2. Пример marquee-demo показал, как собрать две строки отзывов и затухание по краям.
  3. Команда установки положила компонент в 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
Те же счётчики после замены en-US на ru-RU в файле компонента: 1 250 и 4,9

Цифры, которые набегают при прокрутке

Агент поставит компонент NumberTicker: число на странице плавно набегает от нуля, когда блок появляется на экране. Подходит для цифр вроде «1 250 заявок в месяц» и «4,9 средняя оценка».

  1. getRegistryItem number-ticker вернул код компонента: число набегает пружинной анимацией из пакета motion, когда блок попадает на экран.
  2. Команда установки положила компонент в 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 «Оставить заявку» на тестовой странице: тёмно-коричневый фон, по краю бежит светлый блик

Кнопка заявки с бегущим бликом

Агент подберёт анимированную кнопку для главного действия на странице: «Заказать», «Оставить заявку», «Купить». Покажет варианты из каталога и поставит выбранный. На проверке взяли ShimmerButton: по её краю бежит светлый блик.

  1. searchRegistryItems по слову button с видом component нашёл семь вариантов: pulsating-button, rainbow-button, ripple-button, shimmer-button, shiny-button, interactive-hover-button и cool-mode.
  2. 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, и блок будет двигаться, как задумано.

  1. В тестовом проекте на Next.js 14 и Tailwind 3 новая версия marquee встала без ошибок, но лента стояла на месте, а карточки слиплись без отступов.
  2. Старая версия с v3.magicui.design дописала анимацию в tailwind.config.ts и положила компонент в components/magicui/marquee.tsx.
  3. После сборки лента поехала: за полторы секунды сдвинулась на 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 с моими текстами
Что сделал агент
  1. searchRegistryItems: marquee logos - компонент marquee и пример marquee-logos (0,2 с), number counter animation - number-ticker первым, button с видом component - семь кнопок. Запрос «счётчик цифр» по-русски вернул пустой список.
  2. getRegistryItem для marquee, number-ticker и shimmer-button вернул команды установки, код и примеры за 0,2-0,6 с.
  3. npx shadcn@4.21.0 add с адресами из ответов создал три файла в components/ui, добавил пакет motion и анимацию бегущей строки в app/globals.css.
  4. Блоки встали на страницу, сборка 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: ставится ровно то, что мы проверили.
Проверить самому
агент прочитает код подключения как недоверенный

Полезные материалы

Журнал проверок

  • 01.10.2026·2.0.0·Claude Code, macOS·работаетa2e98efcbdc4772f

Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.

Похожие подключения

shadcn/uiАгент сам находит компоненты shadcn/ui, смотрит примеры и даёт команду установкиshadcnна компьютеребез ключа

Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.