Ui Kit Server Example

MCP Vue UI工具包服务器

MCP（Model Context Protocol）用于组件Vue UI文档的服务器。允许人工智能助理（Cursor、Claude Desktop等）获取有关组件、Props、Events、Slots的信息，并生成正确的代码。

🎯 为什么？

AI助手不知道你的UI工具包，他们写道：

Отправить

使用此MCP服务器，他们将使用您的组件：

  Отправить

🚀 快速启动

1.克隆和安装

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

2.配置UI工具包的路径

编辑文件 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。

🔧 可用的工具

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管道或Git钩中。

⚙️ 环境变量

变量描述为默认值。 |------------|----------|--------------| | UIKIT_DATA_DIR 打开文档文件夹。 ./data |

🐛 调试

在开发模式下运行服务器（不构建）：

npm run dev

日志显示在stderr中。

📄 许可证

麻省理工学院

🤝 贡献

1. Fork 仓库
2. 创建Feature Branch（git checkout -b feature/amazing-feature)
3. 修改（git commit -m 'Add amazing feature')
4. Pushв分支(git push origin feature/amazing-feature)
5. 打开Pull Request