Skip to main content
Glama
TeodorDre

MCP Vue UI Kit Server

by TeodorDre
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

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>

Related MCP server: web-ui-component-spec-mcp

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

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

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers