M8 MCP Server

M8 移动前端跨端框架 MCP Server - 提供文档查询、智能推荐和代码生成服务。

功能特性

• 📚 文档搜索 - 搜索 M8 框架文档，支持关键词搜索和分类过滤
• 🧩 组件查询 - 获取 UI 组件的详细信息，包括 Props、Events、示例代码
• 🔌 API 查询 - 获取 EJS 原生 API 的详细信息，包括参数、返回值、平台支持
• 🛠️ 工具查询 - 获取 Util 工具方法的详细信息
• 📏 编码规范 - 获取 CSS、JavaScript、Vue、项目结构等编码规范
• 💡 智能推荐 - 根据需求智能推荐组件、API 或工具方法
• ⚡ 代码生成 - 生成符合 M8 规范的 Vue 组件、JavaScript、SCSS 代码

安装

npm install -g m8-mcp-server

或使用 npx 直接运行：

npx m8-mcp-server

MCP 配置

在 Claude Desktop 或其他 MCP 客户端中配置：

{
  "mcpServers": {
    "m8": {
      "command": "npx",
      "args": ["m8-mcp-server"]
    }
  }
}

或者如果已全局安装：

{
  "mcpServers": {
    "m8": {
      "command": "m8-mcp-server"
    }
  }
}

可用工具

search_docs

搜索 M8 框架文档。

参数：

• query (必需): 搜索关键词
• category (可选): 文档分类 (ejs-api, ui-component, util-tool, typical-case, standard)
• limit (可选): 最大返回数量，默认 10

示例：

搜索 "button" 相关文档
搜索 UI 组件中的 "输入框"

get_component_info

获取 UI 组件的详细信息。

参数：

• componentName (必需): 组件名称，如 em-button, button, em-field, field

示例：

获取 button 组件信息
获取 em-field 组件的 Props 和 Events

get_api_info

获取 EJS 原生 API 的详细信息。

参数：

• module (必需): API 模块名称 (ui, page, storage, device)
• method (可选): API 方法名称

示例：

获取 ejs.ui 模块的所有方法
获取 ejs.ui.toast 方法的详细信息

get_util_info

获取 Util 工具方法的详细信息。

参数：

• category (必需): Util 分类 (string, date, ajax, common)
• method (可选): 方法名称

示例：

获取 Util.ajax 的使用方法
获取字符串处理工具

get_coding_standard

获取编码规范。

参数：

• type (必需): 规范类型 (css, javascript, vue, full-page)
• keyword (可选): 具体规则关键词

示例：

获取 CSS 编码规范
获取 Vue 组件命名规范

generate_code

生成符合 M8 规范的代码。

参数：

• type (必需): 代码类型，支持以下方式：
  • 单选字符串: vue-component, javascript, scss, api-call, full-page
  • 多选数组: ["vue-component", "scss"] 一次生成多种代码
  • full-page: 快捷方式，等同于 ["vue-component", "scss", "router", "mock"]
• requirement (必需): 需求描述
• vueVersion (可选): Vue 版本 (2 或 3)，默认 2
• components (可选): 使用的组件列表
• modulePath (可选): 模块路径，默认自动生成
• useMock (可选): 是否使用 Mock 数据，默认 true

generate_card_component

根据提示词生成低码组件代码（符合 card_components 规范）。

参数：

• componentName (必需): 组件名称 (PascalCase)，如 TestCard
• requirement (必需): 需求描述，系统会自动推断配置项
• projectName (可选): 项目名称

示例：

生成一个带有标题和图片的卡片组件，名称为 ImageCard

recommend_solution

根据需求智能推荐解决方案。

参数：

• requirement (必需): 需求描述
• type (可选): 需求类型 (ui, data, native, general)

示例：

我需要显示一个提示消息
我需要实现表单提交功能

📝 代码生成提示词示例

以下是各种常见场景的提示词模板，可直接使用或根据需求修改：

🔐 登录页面

{
  "type": "full-page",
  "requirement": "登录页面，包含用户名、密码输入框和登录按钮",
  "vueVersion": 2,
  "components": ["em-field", "em-button"]
}

自然语言方式：

帮我生成一个登录页面，包含用户名、密码输入框和登录按钮，使用 Vue2

📋 注册表单

{
  "type": "full-page",
  "requirement": "用户注册表单，包含姓名、手机号（需验证格式）、身份证号（需验证格式）、密码输入框和注册按钮",
  "vueVersion": 2,
  "components": ["em-form", "em-field", "em-button"]
}

自然语言方式：

生成一个用户注册表单页面，需要填写姓名、手机号、身份证号和密码，手机号和身份证需要格式校验

📝 文件上传表单

{
  "type": "full-page",
  "requirement": "信息采集表单，包含姓名、手机号输入框和附件上传功能",
  "vueVersion": 2,
  "components": ["em-form", "em-field", "em-uploader", "em-button"]
}

自然语言方式：

生成一个信息采集页面，需要输入姓名、手机号，还要能上传附件

📃 列表页面

{
  "type": "full-page",
  "requirement": "待办事项列表页面，包含搜索框和下拉刷新列表，每项显示标题、状态和日期",
  "vueVersion": 2,
  "components": ["em-search", "em-minirefresh", "em-cell"]
}

自然语言方式：

生成一个待办事项列表页面，需要有搜索功能和下拉刷新

📄 详情页面

{
  "type": "full-page",
  "requirement": "订单详情页面，显示订单编号、下单时间、商品信息、金额等，底部有确认和取消按钮",
  "vueVersion": 2,
  "components": ["em-cell", "em-panel", "em-button"]
}

自然语言方式：

生成一个订单详情页面，展示订单编号、时间、商品信息和金额，底部有确认和取消按钮

🗓️ 日期选择表单

{
  "type": "full-page",
  "requirement": "请假申请表单，包含请假类型选择、开始日期、结束日期选择、请假事由输入和提交按钮",
  "vueVersion": 2,
  "components": [
    "em-form",
    "em-picker",
    "em-datepicker",
    "em-field",
    "em-button"
  ]
}

自然语言方式：

生成一个请假申请页面，需要选择请假类型、开始和结束日期，填写请假事由

🔧 Vue3 Composition API 示例

{
  "type": "full-page",
  "requirement": "用户个人中心页面，显示头像、昵称、手机号，包含修改信息和退出登录功能",
  "vueVersion": 3,
  "components": ["em-cell", "em-button"]
}

自然语言方式：

使用 Vue3 生成一个用户个人中心页面，显示头像、昵称和手机号，可以修改信息和退出登录

⚡ 快速使用技巧

1. 智能组件推荐

如果不指定 components，系统会根据需求描述自动推荐合适的组件：

{
  "type": "full-page",
  "requirement": "用户注册表单，包含手机号、密码输入框"
}

系统会自动使用 em-form、em-field、em-button 组件。

2. 文件上传支持

需求中包含"附件"、"上传"等关键词时，自动使用 em-uploader 组件。

📁 生成的文件结构

使用 full-page 类型时，会生成以下完整的文件结构：

src/pages/[模块名]/
├── index.vue          # Vue 页面组件
├── router.js          # 路由配置
├── mock.js            # Mock 数据
└── css/
    └── [模块名].scss  # 样式文件

开发

# 安装依赖
npm install

# 构建
npm run build

# 运行测试
npm test

# 开发模式
npm run dev

技术栈

• TypeScript
• Model Context Protocol SDK
• Vitest (测试框架)
• fast-check (属性测试)

许可证

MIT