lkl-frontend-mcp-devkit

LKL 大前端团队专用的 MCP 服务器，统一支持：

• H5（PC/H5）：Vue3 + TypeScript + Pinia
• 小程序：Taro + Vue3 + TypeScript + Pinia
• 客户端：Flutter

不知道具体怎么用？

1. 构建：在仓库里执行 yarn → yarn build，得到 build/index.js。
2. 配置：在 Cursor 里打开 设置 (Ctrl+Shift+J) → Tools & Integrations → MCP，添加一个服务器：command 填 node，args 填 ["你的绝对路径/build/index.js"]（例如 D:/projects/ai/lkl-frontend-mcp-devkit/build/index.js）。
3. 使用：重启 Cursor 后，在对话里说「请用 fe_detect_project 探测当前项目」或「帮我对商户钱包写一份前端规格」，AI 就会调用本 devkit 的工具并返回结果。

更详细的步骤与常见问题见同仓库下的 devkit-docs/docs/guide/how-to-use.md，或本地运行 devkit-docs 文档站后访问「如何使用」页。

快速开始

cd lkl-frontend-mcp-devkit
yarn
yarn build

在 Cursor / Cline 等 MCP 客户端中配置该服务器：

• 命令：node
• 参数：<本仓库绝对路径>/build/index.js
  例如：D:/projects/ai/lkl-frontend-mcp-devkit/build/index.js

配置完成后，在对话中即可调用 fe_detect_project、fe_init_project、fe_vue_page_scaffold 等工具。

推荐工作流（先用探测再干活）

1. 项目探测：调用 fe_detect_project，并传入当前工作区根路径（project_root），用于识别 H5/Taro/Flutter 与目录结构。
   • 若不传 project_root，服务器会使用自身进程的当前工作目录，可能并非你的项目，建议由调用方传入工作区根路径。
2. 初始化规格与上下文：fe_init_project → fe_init_context，生成项目规格与前端上下文文档建议。
3. 加功能：fe_add_feature 生成功能规格骨架，再按平台调用对应脚手架（如 fe_vue_page_scaffold、fe_taro_page_scaffold、fe_flutter_page_scaffold）。
4. 质量与提交：开发过程中或提交前使用 fe_code_review、fe_gentest、fe_gencommit、fe_git_work_report。

一键编排入口：fe_start_feature（新功能）、fe_start_bugfix（修 Bug）会按顺序引导上述步骤。

功能概览（当前 V0.1）

• 项目探测：fe_detect_project — 根据 package.json / pubspec.yaml 与顶层目录识别前端平台与结构，并给出各端建议目录。
• 规格与规划：fe_init_project、fe_init_context、fe_add_feature — 项目规格雏形、前端上下文骨架、多端功能规格。
• 三端脚手架：H5（fe_vue_page_scaffold、fe_vue_store_scaffold、fe_vue_api_module）、Taro（fe_taro_page_scaffold、fe_taro_api_module）、Flutter（fe_flutter_page_scaffold、fe_flutter_api_module），输出路径与可复制即用的代码模板（含 *Template、exampleReference）。
• 质量与协作：fe_code_review、fe_gentest、fe_gencommit、fe_git_work_report。
• 工作流编排：fe_start_feature、fe_start_bugfix、fe_estimate、fe_fix_bug。

安装与使用

本地开发或调试：

yarn
yarn build
yarn dlx @modelcontextprotocol/inspector node build/index.js

在 MCP 客户端中配置：

• 命令：node
• 参数：path/to/lkl-frontend-mcp-devkit/build/index.js

或全局安装后：

yarn global add lkl-frontend-mcp-devkit
lkl-frontend-mcp-devkit

项目探测：fe_detect_project

• 用途：根据项目根目录下的 package.json、pubspec.yaml 及顶层目录，自动识别前端平台（H5/Vue、Taro 小程序、Flutter）及项目结构（单仓 / monorepo），并给出各平台建议目录。
• 参数：project_root（可选）— 要探测的项目根目录。建议传入：在 Cursor 等环境中，MCP 进程的当前工作目录往往是 devkit 自身，传入当前工作区根路径可得到正确探测结果。
• 输出：platforms、structure、packageManager、byPlatform（各端证据与 suggestedDirs）等，可作为 fe_init_context、fe_add_feature 的前置输入。

已实现工具：fe_init_project

调用场景

当你或团队成员：

• 有一个新项目需求（例如新业务线前端重构）
• 想快速看清楚：H5、小程序、App 各自要做什么
• 想要一份「前端视角」的规格雏形作为后续细化的起点

可以调用 fe_init_project。

输入参数

• input（可选）：项目需求描述，一句话或一段话均可
• project_name（可选）：项目名称
• platforms（可选）：数组，取值为 h5、miniapp、flutter，缺省时三个都会包含

输出内容

工具会返回一个结构化对象（以 JSON 文本形式嵌入返回）：

• projectName：项目名称
• description：需求原文
• platforms：本次考虑的平台列表
• highLevelDesign：每个平台对应的：
  • 推荐技术栈说明
  • 对应「规范项目」的提示（方便你去查源码与规范）
• suggestedDocs：建议补充的文档路径与用途说明

后续你可以：

• 把这些字段转换成正式的 Markdown 文档
• 再配合后续的 fe_add_feature、脚手架工具继续细化

质量与协作工具

fe_code_review：前端代码审查助手

• 用途：对单段代码进行结构化审查，适配 Vue3/H5、Taro 小程序、Flutter、TS/JS 模块等常见前端场景。
• 建议使用时机：提交前自查 / 代码评审前预检查 / 重构后验证。

调用示例（MCP 工具请求）：

{
  "name": "fe_code_review",
  "arguments": {
    "framework": "vue",
    "focus": "all",
    "code": "<script setup lang=\\\"ts\\\">/* 这里填入待审查的 Vue 组件代码 */</script>"
  }
}

• 输出行为：返回一段审查任务说明 + JSON 模板，上层模型应只输出 JSON 格式的审查结果，包含 summary、score、issues[]、highlights[] 等字段。

fe_gentest：前端测试用例生成助手

• 用途：根据给定代码和测试框架，生成可直接落库的测试文件骨架。
• 支持框架：vitest（默认，适合 Vue3/H5）、jest（适合 Taro/JS）、flutter_test（适合 Flutter）。

调用示例：

{
  "name": "fe_gentest",
  "arguments": {
    "framework": "vitest",
    "code": "export function add(a: number, b: number) { return a + b; }"
  }
}

• 输出行为：返回一段带有测试策略说明的文本，引导上层模型直接输出完整测试文件（包含 import、describe/test 或 testWidgets 等）。

fe_gencommit：提交信息生成助手

• 用途：基于 diff 摘要或自然语言描述，生成符合团队约定（type + emoji + 中文 subject）的 Git commit message。
• 适用场景：本地完成一批修改后，让 AI 帮你总结一次性提交说明。

调用示例：

{
  "name": "fe_gencommit",
  "arguments": {
    "type": "feat",
    "changes": "新增交易列表页面和 trade-list store，接入后端 /trade/list 接口并补充基础单元测试。"
  }
}

• 输出行为：返回一段生成规范说明，上层模型应只输出类似如下的一条 commit message：
  • feat: 🎸 新增交易列表页面和状态管理

fe_git_work_report：Git 工作报告助手

• 用途：帮助从某一天或一段时间的 Git 提交中，提炼出「对业务友好的」中文工作事项列表，用于日报/周报。
• 日期模式：
  • 日报：传入 date
  • 区间：传入 start_date + end_date

调用示例（日报）：

{
  "name": "fe_git_work_report",
  "arguments": {
    "date": "2026-02-03"
  }
}

• 输出行为：返回如何执行 git log/git show 的指引，并约定最终上层模型应输出：
  • 一个包含 range 和 items[] 的 JSON 对象，items 中是多条「做了什么 + 改了哪里 + 达到什么效果」的中文工作事项。