yui-mcp

MCP Server for yun-ui-vue component library and project initialization.

功能特性

• Resources - 提供 yun-ui-vue 组件库文档，支持 30 个组件
• Prompts - 快捷提示词，生成表格页面、表单、CRUD 页面
• Tools - 项目初始化工具，通过 AI 对话创建新项目

安装

# 全局安装
npm install -g yui-mcp

# 或使用 pnpm
pnpm add -g yui-mcp

使用方式

与 Claude Code 集成

在项目根目录创建 .claude.json：

{
  "mcpServers": {
    "yui-mcp": {
      "command": "npx",
      "args": ["-y", "yui-mcp@latest"]
    }
  }
}

命令方式：

claude mcp add yui-mcp --scope user -- npx -y yui-mcp@latest

或使用本地路径（开发模式）：

{
  "mcpServers": {
    "yui-mcp": {
      "command": "node",
      "args": ["/path/to/yui-mcp/dist/index.js"]
    }
  }
}

与 Cursor 集成

在项目根目录创建 .mcp.json：

{
  "mcpServers": {
    "yui-mcp": {
      "command": "npx",
      "args": ["-y", "yui-mcp@latest"]
    }
  }
}

MCP 能力

Tools

init_project

创建新的前端项目。

参数： | 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | projectName | string | 是 | 项目名称，支持字母、数字、中划线、下划线 | | template | string | 否 | 模板类型，默认 vue3-elementui | | targetDir | string | 否 | 目标目录，默认当前目录 |

支持的模板：

• vue3-elementui - Vue3 + Element Plus
• vue3-vite2-ts-vant - Vue3 + Vite2 + TypeScript + Vant (移动端)
• vue3-ssr - Vue3 SSR 模板

使用示例：

用户: 帮我初始化一个名为 my-admin 的后台管理项目
AI: [调用 init_project 工具，使用 vue3-elementui 模板创建项目]

Resources

yun://components/index

组件文档索引，包含 yun-ui-vue 所有组件的概览和使用指南。

yun://components/{name}

单个组件详细文档，支持以下组件：

| 分类 | 组件 | | -------- | ---------------------------------------------------------------------------------------------------- | | 数据展示 | y-table, y-base-table, y-pagination, y-pagination-panel, y-ellipsis, y-descriptions, y-count, y-sort | | 表单组件 | y-form, y-input, y-select, y-radio, y-checkbox, y-cascader, y-range-picker, y-file-upload | | 反馈组件 | y-dialog, y-drawer, y-steps | | 导航组件 | y-tabs, y-title | | 业务组件 | y-data-filter, y-list-card, y-file-preview, y-base-echart, y-cron-tab, y-input-cron | | 图标组件 | y-svg-icon, y-file-type-icon |

yun://components/hooks/{name}

Hook 文档，目前支持：

• useTableCrud - 表格 CRUD 操作 Hook

Prompts

gen-form

生成查询表单或编辑表单。

参数：

• description - 业务描述
• formType - 表单类型：query 或 edit（可选）
• fields - 表单字段描述（可选）

gen-crud-page

生成完整的增删改查页面。

参数：

• description - 业务描述
• entityName - 实体名称（可选）
• apiPrefix - API 前缀（可选）

gen-detail

生成详情展示抽屉组件，使用 YDrawer + YDescriptions 组合封装。

参数：

• description - 用自然语言描述详情抽屉需求

开发

环境准备

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm typecheck

使用 MCP Inspector 调试

npx @modelcontextprotocol/inspector node dist/index.js

项目结构

yui-mcp/
├── src/
│   ├── index.ts              # 入口文件
│   ├── tools/
│   │   └── init-project.ts   # 项目初始化工具
│   ├── resources/
│   │   └── component-docs.ts # 组件文档资源
│   ├── prompts/
│   │   ├── index.ts
│   │   ├── gen-form.ts
│   │   ├── gen-crud-page.ts
│   │   └── gen-detail.ts
│   └── types/
│       └── index.ts
├── data/
│   └── yun-ui-vue/           # 组件文档
│       ├── SKILL.md
│       └── reference/
│           ├── *.md          # 组件文档
│           └── hooks/        # Hook 文档
├── package.json
├── tsconfig.json
└── tsup.config.ts

依赖要求

项目初始化工具需要以下环境：

• Git - 用于克隆模板
• pnpm - 用于安装依赖
• SSH 密钥 - 用于访问 Gitee 私有仓库（如需）

许可证

MIT