lgtmui MCP 服务

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

🚀 功能特性

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

技术栈

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

安装

2. 安装依赖

pnpm install

3. 向量化文档

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

4. 构建项目

pnpm build

使用方法

1. 初始化向量数据库

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

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

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

2. 启动 MCP 服务

# 启动 MCP 服务器
pnpm mcp:server

3. VSCode 集成

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

4. 可用命令

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

示例

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

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

项目结构

elementplus-mcp/
├── src/
│   ├── mcp-server.ts       # MCP 服务器主文件
│   ├── code-generator.ts   # 智能代码生成器
│   ├── vectorize-docs.ts   # 文档向量化脚本
│   └── extract.ts          # 文档爬取脚本
├── dist/                   # 构建输出目录
├── elementplus-docs/       # lgtmui 文档 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_lgtmui_docs

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

参数：

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

示例：

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

generate_lgtmui_code

基于需求生成 lgtmui 组件代码。

参数：

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

示例：

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

initialize_vector_db

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

使用示例

在 VSCode 中使用

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

API 调用示例

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

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

许可证

MIT License