Element Plus MCP 服务

一个基于 Model Context Protocol (MCP) 的 Element Plus 智能代码生成服务，结合 RAG (Retrieval-Augmented Generation) 技术，为开发者提供智能的 Element Plus 组件代码生成功能。

🚀 功能特性

• 智能代码生成: 基于自然语言描述生成 Element Plus 组件代码
• RAG 技术: 结合检索增强生成，提供准确的组件使用方案
• 语义搜索: 支持中文语义搜索 Element Plus 文档
• 简化向量化: 使用轻量级哈希算法，无需外部依赖
• VSCode 集成: 通过 MCP 协议无缝集成到 VSCode 开发环境
• 多框架支持: 支持 Vue 2 和 Vue 3 代码生成
• 本地存储: 使用 JSON 文件存储向量数据，简单高效

技术栈

• TypeScript: 类型安全的开发体验
• Node.js: 服务端运行环境
• MCP SDK: Model Context Protocol 实现
• 简化向量化: 轻量级文本哈希算法
• JSON 存储: 本地文件系统存储向量数据
• pnpm: 高效的包管理器
• tsup: 快速的 TypeScript 构建工具
• tsx: TypeScript 直接执行工具

安装

1. 克隆项目

git clone https://github.com/yourusername/elementplus-mcp.git
cd elementplus-mcp

2. 安装依赖

pnpm install

3. 向量化文档

# 首次运行需要向量化 Element Plus 文档
pnpm vectorize

4. 构建项目

pnpm build

使用方法

1. 初始化向量数据库

首次使用前，需要对 Element Plus 文档进行向量化处理：

# 向量化文档（首次运行）
pnpm vectorize

# 强制重建向量数据库
pnpm vectorize:force

2. 启动 MCP 服务

# 启动 MCP 服务器
pnpm mcp:server

3. VSCode 集成

1. 安装支持 MCP 的 VSCode 扩展
2. 配置 MCP 服务器连接
3. 开始使用智能代码生成功能

4. 可用命令

• search_docs - 搜索 Element Plus 文档
• generate_code - 生成组件代码

示例

// 搜索按钮相关文档
const results = await searchDocs("按钮组件使用方法");

// 生成表单代码
const code = await generateCode("创建一个包含用户名和密码的登录表单");

开发命令

# 开发模式启动
pnpm dev

# 构建项目
pnpm build

# 启动 MCP 服务器
pnpm mcp:server

# 向量化文档（简化版本）
pnpm vectorize

# 强制重新向量化（简化版本）
pnpm vectorize:force

# 向量化文档（ChromaDB 版本）
pnpm vectorize:chroma

# 强制重新向量化（ChromaDB 版本）
pnpm vectorize:chroma:force

项目结构

elementplus-mcp/
├── src/
│   ├── mcp-server.ts       # MCP 服务器主文件
│   ├── code-generator.ts   # 智能代码生成器
│   ├── vectorize-docs.ts   # 文档向量化脚本
│   └── extract.ts          # 文档爬取脚本
├── dist/                   # 构建输出目录
├── elementplus-docs/       # Element Plus 文档 Markdown 文件
├── bge-small-zh/          # BGE 中文向量化模型
├── .vscode/
│   └── settings.json      # VSCode MCP 配置
├── mcp-config.json        # MCP 服务配置
├── package.json           # 项目配置和依赖
├── tsconfig.json          # TypeScript 配置
├── tsup.config.ts         # 构建工具配置
└── README.md              # 项目说明文档

MCP 工具说明

search_element_plus_docs

搜索 Element Plus 文档，基于语义相似度返回相关组件信息。

参数：

• query (string): 搜索查询，描述你想要的组件功能
• limit (number, 可选): 返回结果数量，默认为 5

示例：

{
  "query": "表单验证和提交",
  "limit": 3
}

generate_element_plus_code

基于需求生成 Element Plus 组件代码。

参数：

• requirement (string): 代码生成需求描述
• component_type (string, 可选): 组件类型
• framework (string, 可选): 前端框架，默认为 'vue3'

示例：

{
  "requirement": "创建一个用户注册表单，包含用户名、邮箱、密码字段，需要表单验证",
  "component_type": "form",
  "framework": "vue3"
}

initialize_vector_db

初始化向量数据库，对 Element Plus 文档进行 embedding。

参数：

• force_rebuild (boolean, 可选): 是否强制重建，默认为 false

依赖包

生产依赖

• @modelcontextprotocol/sdk - MCP 协议 SDK
• chromadb - 向量数据库客户端
• @xenova/transformers - 机器学习模型推理
• puppeteer - 网页爬取工具
• turndown - HTML 到 Markdown 转换

开发依赖

• @types/node - Node.js 类型定义
• @types/turndown - Turndown 类型定义
• tsup - TypeScript 打包工具
• typescript - TypeScript 编译器
• tsx - TypeScript 执行器

使用示例

在 VSCode 中使用

1. 启动 MCP 服务：pnpm mcp:server
2. 在 VSCode 中打开命令面板 (Cmd/Ctrl + Shift + P)
3. 搜索 MCP 相关命令
4. 使用自然语言描述需求，如：
   • "创建一个带验证的登录表单"
   • "生成一个数据表格，支持分页和搜索"
   • "制作一个文件上传组件"

API 调用示例

// 搜索文档
const searchResult = await mcpClient.callTool('search_element_plus_docs', {
  query: '表单验证',
  limit: 5
});

// 生成代码
const codeResult = await mcpClient.callTool('generate_element_plus_code', {
  requirement: '创建一个用户信息编辑表单，包含姓名、邮箱、电话字段',
  framework: 'vue3'
});

注意事项

1. 模型文件：确保 bge-small-zh 模型文件完整下载
2. 向量数据库：首次使用需要运行向量化脚本，可能需要几分钟时间
3. 内存使用：向量化和推理过程可能消耗较多内存
4. 网络连接：ChromaDB 可能需要网络连接进行初始化
5. VSCode 扩展：需要安装支持 MCP 协议的 VSCode 扩展

许可证

MIT License