affectUI — MCP-сервер для Claude Code: что делает и как установить
MCP-сервер для поиска и вставки готовых компонентов React в приложения для ИИ. Помогает сразу внедрять анимированные блоки без настройки внешних стилей.
claude mcp add --transport http affectui https://www.affectui.com/api/mcpЧто делает affectUI
Сервер связывает агента с каталогом интерфейсных блоков affectUI по HTTP. Через протокол MCP ассистент находит нужные витрины, карточки и анимации, считывает код и переносит готовый файл прямо в проект. Набор рассчитан на React 19 и совместим с реестром shadcn.
Каждый элемент упакован в один автономный .tsx-файл вместе со своими стилями. Поэтому Tailwind или сторонние библиотеки анимаций подключать не придётся. При этом часть сложных экранов вроде меню команд относится к версии Pro и отсутствует в открытом доступе.
Какие задачи решает
- найти готовые анимированные блоки под интерфейсы ИИ
- добавить карточки и экраны без Tailwind и сторонних анимаций
- вставить самодостаточный
.tsx-компонент прямо через агента - интегрировать готовые виджеты через реестр
shadcn
Примеры запросов агенту
- Найди в affectUI компонент с индикатором прогресса онбординга и добавь его в проект.
- Покажи код иллюстрации с ветвлением агентов из affectUI.
- Подбери готовый виджет реакций для карточки через affectUI.
Как установить affectUI
Командой платформы: удалённый сервер
claude mcp add --transport http affectui https://www.affectui.com/api/mcpКомандой платформы: удалённый сервер
codex mcp add affectui --url https://www.affectui.com/api/mcpФайл настроек
{
"mcpServers": {
"affectui": {
"url": "https://www.affectui.com/api/mcp"
}
}
}Файл настроек
{
"servers": {
"affectui": {
"type": "http",
"url": "https://www.affectui.com/api/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http affectui https://www.affectui.com/api/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о affectUI
Как установить affectUI в Claude Code?
Выполните команду claude mcp add --transport http affectui https://www.affectui.com/api/mcp. Агент подключит удалённый HTTP-эндпоинт и получит доступ к каталогу.
Что делает MCP-сервер affectUI?
Он даёт ассистенту инструменты для поиска, чтения и добавления компонентов React из библиотеки affectUI прямо в рабочий проект.
Нужно ли настраивать Tailwind CSS для работы компонентов?
Специальная настройка не требуется. Каждый блок поставляется в виде одного файла .tsx с встроенными стилями и работает без внешних анимационных пакетов.
