MCP 前端项目助手 (MCP Frontend Project Assistant)

这是一个 Model Context Protocol (MCP) 服务端，专门作为前端项目的 AI 助手。它旨在帮助大型语言模型 (LLM) 理解并操作本地的前端代码库（如 React, Vue, Next.js 等）。

功能特性

• 项目概览 (fe://project-summary)：即时获取项目整体概况，包括使用的框架、依赖项、可用脚本以及配置文件。
• 代码搜索 (fe_search_in_codebase)：使用关键字或正则表达式搜索代码模式，并提供文件上下文预览。
• 运行脚本 (fe_run_script)：安全地执行 npm/pnpm/yarn 脚本并获取输出结果。

安装指南

源码安装

git clone <repository-url>
cd mcp-fe-project-assistant
npm install
npm run build

全局安装 (发布后)

npm install -g mcp-fe-project-assistant

配置说明

Claude 桌面应用

将以下配置添加到你的 claude_desktop_config.json 文件中：

{
  "mcpServers": {
    "fe-assistant": {
      "command": "node",
      "args": ["/path/to/mcp-fe-project-assistant/dist/index.js"],
      "env": {
        "MCP_FE_ROOT_DIR": "/path/to/your/frontend/project",
        "MCP_FE_IGNORED_PATHS": "**/secrets/**,**/private/**"
      }
    }
  }
}

如果是全局安装的方式：

{
  "mcpServers": {
    "fe-assistant": {
      "command": "mcp-fe-project-assistant",
      "env": {
        "MCP_FE_ROOT_DIR": "/path/to/your/frontend/project"
      }
    }
  }
}

工具与资源详情

资源 (Resources)

• fe://project-summary
  • 返回当前前端项目的 JSON 结构化数据及文本摘要。
  • 包含内容：框架检测、依赖列表、可用脚本、配置文件列表。

工具 (Tools)

• fe_search_in_codebase

  • 参数：
    • query (string)：要搜索的关键字或正则表达式。
    • maxResults (number, 可选)：最大结果数量限制（默认 20）。
    • include (string[], 可选)：包含的 glob 模式（默认 src/**/*）。
    • exclude (string[], 可选)：排除的 glob 模式。

• fe_run_script

  • 参数：
    • script (string)：要运行的脚本名称（例如 test, build）。
    • packageManager (string, 可选)：包管理器 npm, pnpm, 或 yarn（若省略则自动检测）。
    • timeoutMs (number, 可选)：超时时间，单位毫秒（默认 300000，即 5 分钟）。

安全提示

本服务端会执行 Shell 命令（如 npm run ...）并读取文件系统。请确保仅在受信任的项目中运行此服务。你可以通过设置环境变量 MCP_FE_ROOT_DIR 来限制其操作范围。

许可

MIT