项目简介

vue-hook-optimizer MCP Server 是一个基于 Model Context Protocol (MCP) 标准构建的后端服务，它扩展了 Vue Hook Optimizer 工具的功能，使其可以通过 MCP 协议与支持 MCP 的客户端（如 LLM 应用）进行交互。该服务器主要提供代码分析工具，帮助开发者分析和优化 Vue 和 React 组件的代码结构。

主要功能点

代码分析服务: 提供一个 'analyze' 工具，用于分析 Vue 和 React 组件的代码，识别组件中变量和方法之间的关系。
优化建议: 分析结果包含代码优化的建议，帮助开发者改进代码质量。
Mermaid 图表可视化: 分析结果以 Mermaid 流程图的形式呈现，更直观地展示组件内部依赖关系。
MCP 标准协议: 遵循 Model Context Protocol 标准，方便集成到各种支持 MCP 的 LLM 客户端。
Stdio 传输协议: 使用 Stdio 作为默认传输协议，易于部署和使用。

安装步骤

克隆仓库

git clone https://github.com/zcf0508/vue-hook-optimizer
cd vue-hook-optimizer

安装依赖
```
pnpm install
```
构建 MCP Server
```
pnpm build mcp
```

服务器配置

MCP 服务器配置 (JSON) 描述了如何启动和连接到 MCP 服务器。对于 'vue-hook-optimizer-mcp-server'，您可以使用以下配置：

{
  "serverName": "vue-hook-optimizer",
  "command": "node",
  "args": [
    "./packages/mcp/dist/index.js"
  ],
  "transmission": "stdio"
}

配置项说明:

serverName: MCP 服务器的名称，这里设置为 "vue-hook-optimizer"。
command: 启动 MCP 服务器的命令，由于 'vue-hook-optimizer-mcp-server' 是一个 Node.js 应用，所以这里使用 'node'。
args: 传递给启动命令的参数，'./packages/mcp/dist/index.js' 指定了 MCP 服务器入口文件路径。
transmission: MCP 客户端与服务器通信的传输协议，这里使用 'stdio' (标准输入输出)。

基本使用方法

启动 MCP 服务器: 使用上述配置在 MCP 客户端中启动 'vue-hook-optimizer-mcp-server'。

调用 'analyze' 工具: 在 MCP 客户端，向 'vue-hook-optimizer' 服务器发送 JSON-RPC 请求，调用 'analyze' 工具，并提供以下参数：

{
  "jsonrpc": "2.0",
  "method": "analyze",
  "params": {
    "filepath": "/path/to/your/component.vue",  //  要分析的 Vue 或 React 组件文件路径 (必需)
    "framework": "vue"                             //  组件框架类型，可选 "vue" 或 "react"，默认为 "vue"
  },
  "id": 1
}

参数说明:

filepath: 要分析的 Vue 或 React 组件文件的绝对或相对路径。
framework: 指定组件使用的框架，可选值为 '"vue"' 或 '"react"'，默认为 '"vue"'。如果未指定，服务器会尝试自动检测。

接收分析结果: MCP 服务器将返回 JSON-RPC 响应，其中 'result.content' 字段包含分析结果，包括 Mermaid 图表和优化建议，以文本形式呈现。客户端可以将 Mermaid 文本渲染为图表，并将优化建议展示给用户。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息