GoodVibes Frontend Engine MCP 服务器

使用说明

• 项目简介
  • GoodVibes Frontend Engine MCP 服务器是一个完整的 MCP 服务端实现，负责通过 MCP 协议向客户端提供前端代码分析相关的工具集（如组件树、堆叠上下文、响应式断点、事件流、布局层级、溢出诊断、无障碍分析等）的注册、启动与执行。
  • 服务端设计为一个可扩展的工具集合，具备工具注册、工具执行、会话管理、能力声明，以及支持多种传输协议（如标准输入/输出等）以供 LLM 客户端接入。
• 主要功能点
  • 核心 MCP 服务端：实现 ListTools/CallTool 的 JSON-RPC 通信，注册并分发 14 套前端分析工具及扩展插件。
  • 扩展扩展点：前端引擎包含大量工具实现（组件树、堆叠上下文、响应式断点、组件状态、渲染触发、布局层级、溢出诊断、无障碍、尺寸策略、事件流、Tailwind 冲突、客户端边界、错误边界等），并通过 L2/L3 的扩展层进行编排。
  • 本地化运行：以 stdio 等传输方式运行 MCP 服务器，方便在 Claude/LLM 环境中对接。
• 安装步骤
  • 安装 Node.js 18 及以上环境（若仓库包含构建步骤，请按项目 README 的指引安装依赖并编译）。
  • 将仓库代码部署到本地或服务器环境中，确保能够执行服务器入口文件。
  • 构建/编译（如有）：执行项目提供的构建命令，将 TypeScript 源码编译为可执行的 JS 文件。
• 服务器配置（MCP 客户端需要的启动信息）
  • server name: frontend-engine
  • command: node
  • args: ["dist/plugins/server.js"] 备注：实际路径取决于构建产物输出位置，请以最终部署产物路径为准；客户端通过该命令启动后即可通过 MCP 协议与服务器交互。
  • 说明：该配置仅用于客户端建立连接，MCP 客户端不需要进入服务器实现细节，服务器端会暴露工具清单和工具执行入口。
• 基本使用方法
  • 启动服务器后，客户端发送 ListTools 请求获取可用工具清单。
  • 使用 CallTool 请求调用某个工具，传入工具名称及参数，服务器返回工具执行结果或错误信息。
  • 客户端可通过相同的 MCP 机制注册/注册工具、查询状态、获取执行日志等。
  • 如需进行本地化开发调试，可参考仓库中扩展与核心模块的实现方式，确保工具注册、执行和响应符合 MCP 规范。