Skip to main content
Glama

m8-generator-mcp

M8 框架智能辅助工具 - 基于 MCP (Model Context Protocol) 协议

专门为 M8 移动端开发框架设计的 AI 辅助工具集,集成了开发规范、代码生成、规范检查等核心能力。支持通过 Cursor、Windsurf 等 AI 编辑器无缝调用。

✨ 核心功能

  • 🚀 一站式页面生成 (create_page): 只需描述需求,自动完成规范加载、代码生成(Vue/SCSS/JS)、Mock 数据创建,并输出规范检查报告。

  • 🧩 IOC 组件生成 (create_ioc_page): 专为低码平台设计,自动生成符合 IOC 规范的组件结构(Config/Mock/Vue/Plugin)。

  • 🔍 规范自动验证 (validate_code_standards): 实时检查代码是否符合 M8 开发规范(文件头注释、全局变量使用、样式穿透语法等)。

  • 🤖 AI 配置助手 (get_prompt): 获取最佳 System Prompt,让你的 AI 助手瞬间变身 M8 专家。

Related MCP server: shadcn-vue-mcp

🛠️ 安装与配置

在 IDE (Cursor/VSCode/Windsurf) 的 MCP 配置文件中添加:

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

🧰 工具详解

1. create_page (创建页面)

一站式生成符合 M8 规范的业务页面。

参数说明:

  • module_name (必填): 模块名称(小写下划线,如 user_list

  • vue_version (必填): Vue 版本,"2""3"

  • description (必填): 页面功能描述

  • page_name: 页面名称,默认为 index

  • page_type: 页面类型 (form | list | detail | custom),默认为 custom

  • requirements: 具体需求细节(如:包含搜索框、下拉刷新等)

  • components: 需要使用的组件列表(如 ['em-button', 'em-field']

示例:

"使用 create_page 工具创建请假申请页面:

  • module_name: "leave_apply"

  • vue_version: "2"

  • page_type: "form"

  • description: "请假申请"

  • requirements: "请假类型(单选:事假/病假/年假)、开始日期(日期选择)、结束日期(日期选择)、请假原因(textarea)、提交按钮"

2. create_ioc_page (创建低码组件)

生成符合 M8 低码平台 (IOC) 规范的组件结构。

参数说明:

  • component_name (必填): 组件名 (PascalCase,如 ProductCard)

  • display_name (必填): 中文显示名

  • description (必填): 功能描述

  • config_options: 自定义属性配置列表

  • custom_events: 自定义事件列表

示例:

"使用 create_ioc_page 工具创建商品卡片组件:

  • component_name: "ProductCard"

  • display_name: "商品卡片"

  • description: "展示商品图片、名称、价格,支持点击跳转"

  • config_options: [{"name": "titleColor", "displayName": "标题颜色", "type": "color"}, {"name": "showPrice", "displayName": "显示价格", "type": "boolean", "defaultValue": true}]

  • custom_events: [{"name": "onBuyClick", "displayName": "点击购买"}]

💡 组件复用:开发时优先使用 M8 组件库(em-*

"查询 em-field 组件用法"
"em-popup 有哪些 Props"

3. validate_code_standards (规范验证)

检查已有代码是否符合 M8 规范。

支持检查项:

  • ✅ 全局变量 (Util/Config) 禁止 import

  • ✅ Vue2/Vue3 样式穿透语法 (::v-deep vs :deep())

  • ✅ Vue3 <script setup> 语法强制

  • ✅ 文件头部注释完整性

  • ✅ 样式文件分离 (@import scss)

4. get_prompt (获取 AI 配置)

获取专为 M8 开发优化的 System Prompt。 建议将返回的内容复制到项目的 .cursorrules.windsurfrules 文件中,以提升 AI 的编码准确率。

📚 包含的知识库

  • UI 组件库: 70+ 组件文档(直接问 AI "查询 em-xxx 用法" 即可)

  • 开发规范: 完整的 M8 前端开发规范 (01-project 到 07-router)

  • 最佳实践: Vue2/Vue3 差异化处理方案

Development

# Install dependencies
npm install

# Build the project
npm run build

# Watch for changes
npm run watch

License

MIT

Available Tools

4 tools
create_ioc_pageA

【低码组件生成】生成符合 M8 低码平台规范的组件代码。

🔴 重要:此工具会自动在项目根目录执行 npm run ioc create 命令创建组件!

⚠️ 【最重要】优先使用 em-组件库!

  • 轮播/走马灯:必须使用 em-swipe + em-swipe-item,禁止自行实现轮播

  • 图片展示:必须使用 em-image(支持懒加载、失败占位)

  • 列表/单元格:使用 em-cell / em-cell-group

  • 按钮:使用 em-button

  • 弹窗:使用 em-popup / em-dialog

  • 标签:使用 em-tag

  • 下拉刷新:使用 em-minirefresh

  • 只有在组件库没有匹配组件时,才允许自定义实现!

📋 使用前必读 - 开发流程

  1. 指定项目路径:必须提供 project_path 参数,指向包含 package.json 的项目根目录

  2. 自动创建组件:工具会在项目目录下执行 npm run ioc create ComponentName 创建组件目录结构

  3. 返回生成代码:返回完善后的代码内容,由 AI 助手覆盖写入对应文件

  4. ⚠️ 必须检查 base.js:确保 module_name 与组件文件夹名一致,name 为组件中文名

📁 生成的目录结构(自动创建):

  • js/base.js(🔴 必须检查:name 中文名、module_name 必须=目录名、version)

  • js/config.js(属性/事件配置 - 含详细可配置项)

  • mock/data.js(模拟数据 - 需与 index.vue 的数据结构匹配)

  • index.vue(组件主文件 - 🔴 必须使用 em- 组件库)

  • css/index.scss(样式)

  • plugin/eventgenerate/index.js(事件生成插件)

  • plugin/boxoptions/config.js(容器配置插件)

  • index.js(组件注册入口)

📌 支持的配置项类型:

  • text: 文本输入

  • boolean: 开关

  • color: 颜色选择器

  • number: 数字输入

  • image: 图片URL

  • uploadimage: 图片上传(推荐)

  • select: 下拉选择

  • array: 数组配置(配合 dynamic:true 和 template)

💡 配置设计建议

  • 布局类:showTitle, showIcon, showBorder, layout, columns

  • 样式类:backgroundColor, titleColor, titleSize, borderRadius

  • 交互类:clickable, disabled, loading

  • 数据类:使用 array 类型支持动态列表

ParametersJSON Schema
NameRequiredDescriptionDefault
project_pathYes【必填】目标项目的根目录绝对路径,必须是包含 package.json 的目录。npm run ioc create 命令将在此目录下执行。例如:D:/projects/my-app 或 /home/user/my-app
component_nameYes组件名称,必须使用大驼峰命名法(PascalCase),如 ProductList、UserInfo、OrderDetail。此名称将用于:1. 组件目录名 2. js/base.js 中的 module_name
display_nameYes组件中文名称,将显示在低码平台中,如:商品列表、用户信息、订单详情
descriptionYes组件功能描述,详细说明组件的功能、UI 布局、交互逻辑
authorNo作者名称,默认 developer
config_optionsNo自定义属性配置项列表
custom_eventsNo自定义事件列表(除标准的 onMounted、onClick、onChange 外)
mock_data_structureNoMock 数据结构描述,如:包含 id、name、status、description 字段的列表

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and does well: it discloses that the tool automatically executes 'npm run ioc create' in the project root directory (a critical behavioral trait), warns about automatic component creation, and details the directory structure generated. It mentions important checks (e.g., base.js consistency) but doesn't cover error handling or rate limits, keeping it from a perfect score.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized but not optimally structured: it uses emojis and sections (e.g., '重要', '使用前必读'), which aids readability, but includes extensive details like directory listings and configuration types that might be verbose. Some sentences (e.g., configuration design suggestions) could be trimmed for conciseness, though the front-loaded warnings are effective.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (8 parameters, no annotations, no output schema), the description is largely complete: it covers purpose, usage, behavioral traits, and process steps. However, it lacks details on return values or error handling, which are important for a tool that executes commands and generates code. The absence of an output schema means the description should ideally explain what is returned, but it only hints at '返回生成代码' (return generated code).

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description adds minimal parameter-specific semantics beyond the schema—it emphasizes project_path as '必填' (required) and links component_name to directory naming, but most parameter details (e.g., config_options types, mock_data_structure) are already well-documented in the schema. No significant value is added over the schema's thorough descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: '生成符合 M8 低码平台规范的组件代码' (generate component code compliant with M8 low-code platform specifications). It specifies the verb ('生成' - generate) and resource ('组件代码' - component code), and distinguishes from siblings like create_page (likely for pages) and get_prompt/validate_code_standards (different functions).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit usage guidelines: it states when to use ('优先使用 em-组件库' - prioritize using em-component library), when not to use (only custom implementation when no matching component exists), and alternatives (specific em- components for various UI elements like em-swipe for carousels). It also outlines prerequisites like providing project_path and checking base.js.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

create_pageB

【推荐使用】一站式 M8 页面生成工具。自动完成:1.加载完整规范 2.生成代码 3.验证规范。用户只需描述页面需求即可,无需手动调用其他工具。

ParametersJSON Schema
NameRequiredDescriptionDefault
module_nameYes模块名称(小写下划线格式,如 user_list、order_detail)
page_nameNo页面名称,默认 index
page_typeNo页面类型:form(表单)、list(列表)、detail(详情)、custom(自定义),默认 custom
vue_versionYesVue 版本,必填。请根据项目 package.json 中的 vue 依赖版本填写:2.x.x 填 '2',3.x.x 填 '3'
descriptionYes页面功能描述,如:用户登录页面、商品列表、订单详情等
requirementsNo具体需求描述,如:包含用户名密码输入框、支持下拉刷新分页、显示订单状态等
authorNo作者名称,默认 developer
componentsNo需要使用的组件列表,如 ['em-form', 'em-field', 'em-button']
skip_mockNo是否跳过生成 mock.js,默认 false

TDQS

B3.4/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. While it mentions the three-step automation process (load specs, generate code, validate), it lacks critical behavioral details: whether this creates files/directories, what permissions are needed, whether it overwrites existing files, error handling, or output format. For a complex 9-parameter creation tool with no annotations, this is insufficient transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is efficiently structured in three sentences: recommendation tagline, automation steps, and user guidance. Each sentence adds value - the first establishes priority, the second explains the automated workflow, the third clarifies the user's role. While concise, it could be slightly more front-loaded with the core purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (9 parameters, creation operation) with no annotations and no output schema, the description is moderately complete. It explains the high-level automation workflow but lacks details about what exactly gets created, where outputs go, error conditions, or success indicators. The 100% schema coverage helps, but for a creation tool, more behavioral context would be beneficial.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description doesn't mention any parameters directly, but with 100% schema description coverage, the schema already documents all 9 parameters thoroughly with descriptions, enums, defaults, and requirements. The description's focus on the overall automation workflow provides some context for why these parameters matter, but adds minimal specific semantic value beyond what the schema provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: '一站式 M8 页面生成工具' (one-stop M8 page generation tool) and specifies it '自动完成:1.加载完整规范 2.生成代码 3.验证规范' (automatically completes: 1. loads complete specifications, 2. generates code, 3. validates specifications). It distinguishes from siblings by emphasizing its comprehensive automation approach, though it doesn't explicitly name alternatives.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear usage context with '【推荐使用】' (recommended use) and '用户只需描述页面需求即可,无需手动调用其他工具' (users only need to describe page requirements, no need to manually call other tools). It implies this tool should be used for comprehensive page generation rather than piecemeal approaches, though it doesn't explicitly state when NOT to use it or name specific alternatives among siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_promptA

获取配置给 AI (Cursor/Windsurf) 的最佳 System Prompt,包含核心规范和工具调用指令。建议将其复制到 .cursorrules 或 .windsurfrules 文件中。

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses that the tool retrieves a 'System Prompt' with '核心规范和工具调用指令' (core specifications and tool invocation instructions), implying it's a read-only operation that provides configuration data. However, it doesn't mention behavioral traits like error handling, performance, or any constraints (e.g., rate limits, authentication needs). The description adds basic context but lacks depth for full transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and well-structured in two sentences: the first states the purpose, and the second provides usage advice. It's front-loaded with the core function and avoids unnecessary details. However, it could be slightly more efficient by integrating the advice more seamlessly, but overall, it's clear and wastes no words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (0 parameters, no annotations, no output schema), the description is moderately complete. It explains what the tool does and suggests how to use the output, but it lacks details on the return format (e.g., what the 'System Prompt' looks like) or any error conditions. Without an output schema, the description should ideally hint at the response structure, but it only covers basic context, leaving gaps for full agent understanding.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has 0 parameters, and schema description coverage is 100% (as there are no parameters to describe). According to the rules, with 0 parameters, the baseline score is 4. The description doesn't need to compensate for any parameter gaps, and it appropriately doesn't discuss parameters, focusing instead on the tool's purpose and usage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: '获取配置给 AI (Cursor/Windsurf) 的最佳 System Prompt,包含核心规范和工具调用指令' (Get the best System Prompt configured for AI (Cursor/Windsurf), including core specifications and tool invocation instructions). It specifies the verb '获取' (get) and the resource 'System Prompt', making the purpose understandable. However, it doesn't explicitly differentiate from sibling tools like 'create_ioc_page' or 'validate_code_standards', which appear unrelated, so it doesn't fully address sibling distinction.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides implied usage guidance: '建议将其复制到 .cursorrules 或 .windsurfrules 文件中' (It is recommended to copy it to .cursorrules or .windsurfrules files), suggesting when to use the output. However, it lacks explicit when-to-use vs. when-not-to-use criteria or named alternatives. The guidance is practical but not comprehensive, leaving some ambiguity about optimal usage scenarios.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

validate_code_standardsB

验证给定的代码片段是否符合 M8 开发规范,返回不符合规范的问题列表和修改建议。

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYes需要验证的代码内容
file_typeYes文件类型
vue_versionNoVue 版本,默认 3

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool validates code and returns problem lists with suggestions, but doesn't disclose important behavioral traits like whether this is a read-only operation, what happens with invalid inputs, whether there are rate limits, or what authentication might be required. For a validation tool with zero annotation coverage, this leaves significant gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that clearly states the tool's purpose and output. Every word earns its place - it specifies what's being validated (code snippets), against what standard (M8 development standards), and what's returned (problem lists and modification suggestions). No wasted words or redundant information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 parameters, validation logic) and the absence of both annotations and output schema, the description is minimally adequate. It explains what the tool does and what it returns, but doesn't provide enough context about behavioral aspects or error handling. The lack of output schema means the description should ideally say more about the return format, but it only mentions '问题列表和修改建议' (problem lists and modification suggestions) without detail.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, so the schema already documents all three parameters (code, file_type, vue_version) with their descriptions and constraints. The description doesn't add any parameter-specific information beyond what's in the schema. According to the scoring rules, when schema coverage is high (>80%), the baseline is 3 even with no param info in the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('验证' - validate), the resource ('代码片段' - code snippet), and the purpose ('是否符合 M8 开发规范' - whether it complies with M8 development standards). It distinguishes itself from sibling tools (create_ioc_page, create_page, get_prompt) by focusing on validation rather than creation or retrieval operations.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. While it's clear this is for code validation, there's no mention of prerequisites, typical use cases, or when other tools might be more appropriate. The sibling tools are all creation/retrieval tools, so the distinction is obvious, but no explicit usage context is provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updatesv1.0.20
    • First observedcreate_ioc_page
    • First observedcreate_page
    • First observedget_prompt
    • First observedvalidate_code_standards

TDQS

A3.8/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a distinct, non-overlapping purpose: create_ioc_page generates component code, create_page generates full pages, get_prompt provides system prompts, and validate_code_standards checks code compliance. The descriptions clearly differentiate their roles, with no ambiguity in selection.

Naming Consistency5/5

All tool names follow a consistent snake_case pattern with clear verb_noun structures: create_ioc_page, create_page, get_prompt, validate_code_standards. This uniformity makes the set predictable and easy to understand.

Tool Count4/5

With 4 tools, the count is reasonable for a code generation and validation server, covering key workflows. It might feel slightly thin for broader development tasks, but it's well-scoped for its M8 platform focus, with no redundant tools.

Completeness4/5

The tools cover core M8 development needs: component creation, page generation, prompt setup, and code validation. Minor gaps exist, such as lacking tools for updating or deleting components, but the set supports essential workflows without dead ends.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    B
    quality
    D
    maintenance
    Shadcn-vue MCP Server is a powerful AI-driven tool that helps developers instantly create beautiful, modern UI components through natural language descriptions. It integrates the shadcn-vue component library and tailwindcss, seamlessly connects with mainstream IDEs, and provides a streamlined UI dev
    5
    261 npm
    108
    Apache 2.0
  • F
    license
    B
    quality
    D
    maintenance
    Enables AI-driven frontend component design and code generation from natural language requirements. Supports Vue, React, and Angular with intelligent component decomposition, API design, and complete project generation.
    4
    3
    -
  • A
    license
    A
    quality
    A
    maintenance
    A comprehensive development toolkit with 23 tools covering code quality analysis, development efficiency, and project management. Enables AI-assisted code review, test generation, performance analysis, SQL generation, UI component creation, and automated project documentation.
    24
    180 npm
    37
    MIT