# MCP Vue UI Kit Server

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

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

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

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

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

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

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

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

```bash
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`:

```typescript
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. Генерация документации

```bash
npm run generate
```

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

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

```bash
npm run build
```

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

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

```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-файл:

```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")
```

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

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

```bash
npm run generate
```

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

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

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

## 🐛 Отладка

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

```bash
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