aicanvas — MCP-сервер для Claude Code: что делает и как установить
Ищет анимированные компоненты интерфейса под shadcn и добавляет их код прямо в проект. Пригодится при сборке экранов в чате с ассистентом.
claude mcp add aicanvas -- npx -y @aicanvas/mcpЧто делает aicanvas
Сервер связывает среду разработки с реестром AI Canvas. Ассистент получает набор инструментов для поиска элементов интерфейса и чтения документации по их свойствам. Каталог содержит автономные блоки и готовые шаблоны страниц дизайн-системы Andromeda.
Установка компонентов выполняется через CLI shadcn. Сервер отдаёт готовую команду для терминала, поэтому вручную искать файлы не требуется. Каталог можно просматривать свободно.
Без переменной окружения AICANVAS_TOKEN сервер вернёт заглушку вместо исходного кода компонента. Для полноценной загрузки файлов в проект потребуется бесплатный аккаунт и токен доступа.
Какие задачи решает
- найти анимированные React-компоненты под shadcn через чат с агентом
- проверить JSX-код на неизвестные или пропущенные обязательные свойства
- составить план сборки интерфейса по краткому описанию страницы
- получить готовую команду установки компонента через shadcn CLI
Примеры запросов агенту
- Найди в каталоге AI Canvas анимированный стек карточек и установи его в проект
- Проверь файл
Button.tsxна корректность переданных свойств компонентов - Спланируй экран дашборда на основе шаблонов дизайн-системы Andromeda
Как установить aicanvas
Командой платформы
claude mcp add aicanvas -- npx -y @aicanvas/mcpКомандой платформы
codex mcp add mcp -- npx -y @aicanvas/mcpФайл настроек
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}
}Файл настроек
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}
}Командой платформы
gemini mcp add mcp npx -y @aicanvas/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о aicanvas
Как установить aicanvas в Claude Code?
Выполните в терминале команду claude mcp add aicanvas -- npx -y @aicanvas/mcp. После этого перезапустите ассистент, чтобы инструменты появились в списке.
Что делает MCP-сервер aicanvas?
Он позволяет находить компоненты AI Canvas, читать спецификацию их свойств и валидировать вёрстку прямо в диалоге с моделью.
Нужен ли токен для работы с сервером?
Просматривать каталог и получать команды установки можно без авторизации. Токен в переменной AICANVAS_TOKEN нужен для прямого скачивания исходного кода компонентов и шаблонов.
