MCP-сервер

@shtabapp/ui-kit-mcp — MCP-сервер (Model Context Protocol), который даёт AI-ассистентам структурированный доступ к знаниям UI kit: API компонентов, design tokens и гайдам. Подключите его к Claude Code, Cursor или VS Code — и ассистент будет верстать на актуальном API библиотеки, не выдумывая props.

Быстрый старт

npx -y @shtabapp/ui-kit-mcp

Сервер работает по stdio: его запускает сам MCP-клиент, вручную ничего поднимать не нужно.

Подключение

Claude Code

claude mcp add shtab-ui-kit -- npx -y @shtabapp/ui-kit-mcp

Cursor

.cursor/mcp.json в корне проекта:

{
  "mcpServers": {
    "shtab-ui-kit": {
      "command": "npx",
      "args": ["-y", "@shtabapp/ui-kit-mcp"]
    }
  }
}

VS Code (Copilot)

.vscode/mcp.json:

{
  "servers": {
    "shtab-ui-kit": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@shtabapp/ui-kit-mcp"]
    }
  }
}

Другие клиенты

Подойдёт любой MCP-клиент со stdio-транспортом: command: "npx", args: ["-y", "@shtabapp/ui-kit-mcp"].

Инструменты

Инструмент	Аргументы	Что возвращает
uikit_list_components	package?	Список компонентов с путями импорта и описаниями
uikit_get_component	name	Полное API: props, события, слоты, v-model, TypeScript-типы, гайд
uikit_get_component_examples	name	Примеры кода компонента
uikit_list_tokens	—	Категории design tokens с количеством переменных и темами
uikit_get_tokens	category, theme?, search?	Значения CSS custom properties категории
uikit_get_setup_guide	guide?	Гайды: установка, стили и токены, темизация, паттерны

Все инструменты read-only — сервер ничего не меняет ни в проекте, ни снаружи.

Как это работает

Данные запекаются в JSON при сборке пакета: vue-docgen-api извлекает props, события и слоты из исходников компонентов, реестр документации даёт описания и примеры, CSS-файлы @shtabapp/ui-kit-tokens парсятся в структурированный список переменных. Опубликованный пакет самодостаточен — версия данных соответствует версии пакета, сетевые запросы не выполняются.

Примеры промптов

• «Сверстай форму логина на SInput и SButton по гайдлайнам Shtab UI Kit»
• «Какие props есть у SSelect и какие события он эмитит?»
• «Подбери семантические токены фона для тёмной темы»
• «Покажи примеры использования SDropdown и собери на нём меню действий»

Альтернатива без установки — машиночитаемая документация llms.txt.