How do I use MCP Vue UI Kit Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@MCP Vue UI Kit Server What are the props for the AppButton component?" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

MCP Vue UI Kit Server

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

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

MCP Vue UI Kit Server

MCP Vue UI Kit Server

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

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

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

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

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

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

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

🔧 Доступные Tools

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

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

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

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

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

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

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

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

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

🐛 Отладка

📄 Лицензия

🤝 Contributing

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API