# m8-generator-mcp 工具产品需求文档 (PRD)
## 1. 项目背景
为了提升 M8 框架的开发效率，确保代码风格和规范的高度统一，本项目旨在开发一个基于 MCP (Model Context Protocol) 协议的智能辅助工具 `m8-generator-mcp`。该工具将深度集成 M8 框架的开发规范、UI 组件库及通用工具库，通过增强型 RAG (Retrieval-Augmented Generation) 技术，为开发者提供符合规范的代码生成、组件推荐及工具函数匹配能力。
## 2. 产品目标
1. **自动化规范落地**：确保生成的代码严格遵循 `@[standards]` 下定义的项目规范。
2. **智能组件/工具推荐**：在开发过程中，优先推荐并使用 `@[m8mpdoc/UI组件库]` 和 `@[m8mpdoc/核心通用Util工具库]` 中的资源，减少重复造轮子。
3. **增强 RAG 检索**：建立本地知识库索引，提供精准的上下文信息，使 AI 能够准确理解 M8 框架特性。
4. **无缝 IDE 集成**：支持通过 MCP 协议与主流 IDE（如 VSCode, Cursor 等）集成，提供丝滑的开发体验。
## 3. 核心功能需求
### 3.1 安装与部署
工具需支持通过 NPM 全局或临时运行方式启动，并适配 MCP 客户端配置。
- **发布形式**：NPM 包 (`m8-generator-mcp`)。
- **IDE 配置示例**：
用户在 IDE (如 Cursor/Windsurf) 的 MCP 配置文件中应能如下配置：
```json
"m8-generator-mcp": {
"command": "npx",
"args": [
"-y",
"m8-generator-mcp"
]
}
```
_(注：实际包名需确认是否为 `m8-generator-mcp`，此处以用户提供的配置为准)_
### 3.2 增强型 RAG 检索 (Retrieval-Augmented Generation)
工具启动时或按需需对指定目录文档进行索引，构建向量或关键词知识库。
- **知识库源**：
1. **项目规范** (`@[standards]`): 包含目录结构、命名规范、Vue 版本兼容性(Vue2/3)、全局变量限制等。
2. **UI 组件库** (`@[m8mpdoc/UI组件库]`): 包含所有组件（如 `em-button`, `em-cell` 等）的使用文档、Props 定义、Events 及示例。
3. **通用工具库** (`@[m8mpdoc/核心通用Util工具库]`): 包含 `Util` 对象下的常用方法（如 `Util.ajax`, `Util.os` 等）。
- **检索策略**：
- 当用户请求生成页面或组件时，自动根据描述检索相关的 UI 组件文档。
- 当涉及逻辑处理时，检索相关的 Util 工具函数。
- 始终检索并附带核心项目规范（如 API 优先原则、样式分离规范）。
### 3.3 智能代码生成
基于 RAG 检索到的上下文，生成符合 M8 规范的代码。注意一定要遵循 `@[standards]` 下定义的项目规范，严禁臆想。
- **规范强制执行**：
- **目录结构**：严格生成 `src/pages/[module]/` 结构，包含 `css/`, `images/`, `router.js`, `store.js` 等。
- **Vue 版本适配**：根据项目 `package.json` 自动识别 Vue2 或 Vue3，生成对应的 Options API 或 Composition API 代码。
- **样式处理**：强制样式分离，禁止内联 CSS，必须使用 `@import "./css/[module].scss";`。
- **命名规范**：文件小写下划线，组件 PascalCase，CSS BEM 命名。
- **全局变量**：直接使用 `Config`, `Util`, `ejs`，禁止 import。
- **注释规范**：自动生成包含 `@作者`, `@创建时间` 等信息的头部注释。
- **组件与工具优先**：
- **UI 组件**：页面开发必须优先寻找并使用 `m8mpdoc` 中的 `<em-*>` 组件，而非原生的 HTML 标签或第三方未通过验证的库。
- **API 调用**：使用 `Util.ajax` 进行数据请求。
- **交互反馈**：使用 `ejs.ui.toast`, `ejs.ui.confirm` 等替代原生 alert。
### 3.4 MCP 工具定义 (Tools)
MCP Server 仅需暴露以下核心工具供 AI Agent 调用：
1. **`get_component_usage`**:
- **描述**: 获取指定 UI 组件的详细用法、Props 和示例。
- **参数**: `component_name` (如 "em-button")。
2. **`generate_module_structure`**:
- **描述**: 为新页面/模块生成标准的目录结构和空文件模板。
- **参数**: `module_name` (模块名), `page_name` (页面名)。
## 4. 技术架构
- **运行环境**: Node.js
- **协议**: Model Context Protocol (MCP) SDK
- **文档解析**: Markdown 解析器，用于提取文档中的代码片段和 API 表格。
- **索引引擎**: 本地轻量级向量数据库或内存索引，确保低延迟检索。
## 5. 开发里程碑
1. **阶段一：核心框架搭建**
- 初始化 MCP Server 项目。
- 实现文档读取与解析模块。
- 实现基础的关键词检索功能。
2. **阶段二：RAG 增强与上下文构建**
- 优化检索算法，支持语义搜索。
- 构建 Prompt 模板，将检索到的文档片段转换为 LLM 可读的一致性 Context。
3. **阶段三：代码生成器实现**
- 集成 M8 代码规范模板（Vue2/3）。
- 实现目录结构生成工具。
4. **阶段四：测试与发布**
- 在 IDE 中进行集成测试。
- 发布 NPM 包。
## 6. 验收标准
1. 用户输入“创建一个包含姓名输入的表单页面”时，工具能索引到 `em-form`, `em-field` 组件文档，并生成包含正确 Props 和 CSS 引入的 `.vue` 文件。
2. 生成的代码中，Ajax 请求使用了 `Util.ajax`，且没有显式 import `Util`。
3. 生成的文件头部包含标准的注释块。
4. 通过 IDE 配置能成功启动 Server 并在对话中正常响应。
