Skip to main content
Glama
TeodorDre

MCP Vue UI Kit Server

by TeodorDre
OverviewSchemaRelated ServersScoreDiscussions
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 installed

F
license - not found
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TeodorDre/mcp-ui-kit-server-example'

If you have feedback or need assistance with the MCP directory API, please join our Discord server