Ui Kit Server Example

MCP (Model Context Protocol) сервер для документации Vue UI компонентов. Позволяет AI-ассистентам (Cursor, Claude Desktop и др.) получать информацию о ваших компонентах, их props, events, slots и генерировать правильный код.

🎯 Зачем это нужно?

AI-ассистенты не знают про ваш UI-kit и пишут:

<button @click="submit">Отправить</button>

С этим MCP сервером они будут использовать ваши компоненты:

<AppButton variant="primary" :loading="isLoading" @click="submit">
  Отправить
</AppButton>

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

1. Клонирование и установка

git clone https://github.com/your-username/mcp-vue-ui-kit.git
cd mcp-vue-ui-kit
npm install

2. Настройка путей к вашему UI-kit

Отредактируйте файл scripts/generate-docs.ts:

const PACKAGES_TO_DOCUMENT: PackageConfig[] = [
  {
    name: 'my-ui-kit',
    alias: '@my-company/ui-kit',
    path: '/path/to/your/ui-kit',          // 👈 Укажите путь к вашему UI-kit
    componentsGlob: 'src/components/**/*.vue',
  },
];

3. Генерация документации

npm run generate

Документация будет сохранена в папку data/.

4. Сборка сервера

npm run build

5. Подключение к Cursor

Добавьте в файл .cursor/mcp.json вашего проекта:

{
  "mcpServers": {
    "ui-kit": {
      "command": "node",
      "args": ["/path/to/mcp-vue-ui-kit/dist/server.js"]
    }
  }
}

Перезапустите Cursor.

🔧 Доступные Tools

Tool	Описание
uikit_list_components	Список компонентов с фильтрацией по пакету и категории
uikit_get_component	Детальная информация о компоненте (props, events, slots)
uikit_search	Поиск компонентов по имени, описанию или категории
uikit_generate_usage	Генерация примера использования компонента
uikit_stats	Статистика документации UI Kit

📁 Структура проекта

mcp-vue-ui-kit/
├── src/
│   └── server.ts          # MCP сервер
├── scripts/
│   └── generate-docs.ts   # Скрипт генерации документации
├── data/                  # Сгенерированная документация
│   ├── index.json         # Индекс всех компонентов
│   └── my-ui-kit/         # Документация по пакетам
│       ├── AppButton.json
│       └── ...
├── examples/              # Примеры структуры данных
├── package.json
├── tsconfig.json
└── README.md

📝 Формат документации компонента

Каждый компонент сохраняется как JSON-файл:

{
  "displayName": "AppButton",
  "description": "Кнопка с поддержкой loading и иконок",
  "package": "my-ui-kit",
  "packageAlias": "@my-company/ui-kit",
  "relativePath": "src/components/AppButton.vue",
  "category": "elements",
  "props": [
    {
      "name": "variant",
      "type": { "name": "string" },
      "required": false,
      "defaultValue": { "value": "'default'" },
      "values": ["default", "primary", "danger"]
    }
  ],
  "events": [
    { "name": "click", "type": { "names": ["MouseEvent"] } }
  ],
  "slots": [
    { "name": "default", "description": "Содержимое кнопки" }
  ]
}

💡 Примеры использования

Получить список компонентов форм

uikit_list_components(category: "form")

Получить информацию о AppButton

uikit_get_component(name: "AppButton")

Найти компоненты для модальных окон

uikit_search(query: "modal")

Сгенерировать пример использования

uikit_generate_usage(name: "AppButton", framework: "vue")

🔄 Обновление документации

При изменении компонентов запустите:

npm run generate

Рекомендуется добавить эту команду в CI/CD pipeline или git hooks.

⚙️ Переменные окружения

Переменная	Описание	По умолчанию
UIKIT_DATA_DIR	Путь к папке с документацией	./data

🐛 Отладка

Для запуска сервера в режиме разработки (без сборки):

npm run dev

Логи выводятся в stderr.

📄 Лицензия

MIT

🤝 Contributing

1. Fork репозитория
2. Создайте feature branch (git checkout -b feature/amazing-feature)
3. Commit изменения (git commit -m 'Add amazing feature')
4. Push в branch (git push origin feature/amazing-feature)
5. Откройте Pull Request