affectUI MCP
MCP-сервер библиотеки React-компонентов для интерфейсов агентов: агент находит компонент и добавляет его в проект
- 506 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент добавляет файлы `.tsx` в ваш проект, и код из реестра стоит прочитать перед сборкой
- Запросы агента уходят на удаленный сервер affectui.com, который принадлежит стороннему автору
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/affectuiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент добавляет файлы `.tsx` в ваш проект, и код из реестра стоит прочитать перед сборкой
- Запросы агента уходят на удаленный сервер affectui.com, который принадлежит стороннему автору
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
affectUI — библиотека React-компонентов для интерфейсов вокруг агентов: карточки вызова инструментов, согласования, очереди решений, индикаторы работы. Рядом лежат обычные элементы вроде кнопок, меню и полей ввода, а также иллюстрации и анимации. Каждый элемент — один файл `.tsx` со стилями внутри, без Tailwind и без отдельной анимационной библиотеки. MCP-сервер размещен по адресу `https://www.affectui.com/api/mcp`. Claude Code, Cursor, VS Code или Codex подключаются к нему один раз, после чего ищут любой элемент библиотеки, читают его документацию и добавляют в проект. Тот же результат дает ручная установка через shadcn CLI по адресу реестра каждого компонента. В репозитории лежит бесплатная часть: сорок элементов под лицензией MIT. Остальные 91 элемент и экраны входят в платный affectUI Pro, исходники которого здесь не публикуются.
Для кого. Фронтенд-разработчикам на React 19, которые делают чат, панель агента или консоль с вызовами инструментов и поручают агенту подобрать готовые компоненты.
Подходит, если
- В интерфейсе чата нужна компактная карточка вызова инструмента с таймером, статусом и раскрывающимися аргументами
- Агент должен подобрать из библиотеки поле ввода одноразового кода или переключатель на от двух до шести вариантов и поставить его в проект
- Команде нужны компоненты без настройки CSS: файл копируется и сразу работает, темная тема включается классом `dark`
- Для лендинга понадобились иллюстрации и блоки вроде бегущей строки логотипов, и их хочется ставить по одному
Не подходит, если
- Нужны компоненты Agent Tree, Trace Waterfall или Context Map: в репозитории их нет, они входят в платный Pro
- Проект на Vue, Svelte или другом фреймворке: библиотека рассчитана на React 19
- Сервер должен работать без выхода в интернет: MCP расположен на сайте affectui.com
- Нужен набор базовых элементов от shadcn/ui: affectUI дополняет его компонентами для агентов
Пример запроса к агенту
Найди в affectUI карточку вызова инструмента с раскрывающимися аргументами и добавь ее в components/ui моего проектаMCP
- Транспорт
- http
- Авторизация
- не нужна
Ограничения
Библиотека требует React 19. Алиас импорта `@/*` нужен, если вы ставите элементы через shadcn CLI; в Next.js и shadcn он настроен по умолчанию.
MCP-сервер работает на стороне автора, по удаленному адресу на affectui.com. Исходный код самого сервера в репозитории отсутствует, поэтому проверить его работу можно только запросами.
Исправления в репозиторий попадают при каждом релизе из внутреннего исходника автора, а не через pull request. Ошибки и пожелания принимаются через issues.
Часть компонентов с сайта, в том числе Agent Tree, Agent Inbox и Trace Waterfall, входит в платный Pro с разовой оплатой.
Как отключить. Отключите сервер командой `claude mcp remove affectui` или уберите запись affectui из MCP-конфигурации клиента. Уже добавленные файлы компонентов остаются в проекте, их удаляют как обычные исходники.
Частые вопросы
Как подключить affectUI к Claude Code?
Выполните `claude mcp add --transport http affectui https://www.affectui.com/api/mcp`. После этого попросите агента найти нужный элемент: он прочитает документацию и добавит файл в проект.
Что получится без MCP-сервера?
Компонент ставится через shadcn CLI: `npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json`. Файл появляется в `components/ui`. Можно скопировать его вручную из папки `components/`, `illustrations/` или `motion/` репозитория.
Что бесплатно, а что нет?
В репозитории бесплатные элементы под лицензией MIT: компоненты, два блока, иллюстрации и анимации. Компоненты Agent Tree, Trace Waterfall, Context Map и Agent Handoff входят в платный Pro с разовой оплатой.
Нужен ли Tailwind?
Нет. Стили лежат внутри файла каждого компонента, настройка CSS не нужна. Темная тема включается классом `dark` или атрибутом `data-theme="dark"` у родителя.
Есть ли файл для ИИ-ассистентов без MCP?
Да. Сайт публикует `llms.txt` и `llms-full.txt`, на них можно указать ассистенту. На страницах сайта есть также панель Copy prompt для Claude, ChatGPT и Codex, Cursor и v0.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыShadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
MCP-сервер Chakra UI: справочник по компонентам, свойствам и токенам темы плюс разбор кода при переходе с версии 2 на 3
MCP-сервер CodeRocket отдает агенту правила дизайн-системы, компоненты и блоки сохраненной библиотеки только на чтение.
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Коротко о README
README открывается витриной агентских компонентов и оглавлением. Дальше идут требования, установка через shadcn CLI или копированием, пример использования ReactionBar и раздел про подключение ИИ-инструментов. Каталог разбит на таблицы компонентов, блоков, иллюстраций и анимаций с командой установки у каждой строки.