🚀 MCP 工具文档

MCP 工具是一款 VSCode/Cursor 扩展，它集成了内置的 MCP 服务器与 UI 插面板，可用于检索和显示命令行工具文档。该扩展能自动检测工作区中的工具，并通过插面板展示其文档，极大提升了开发者获取工具信息的效率。

🚀 快速开始

要开始使用 MCP 工具，请按照以下步骤进行：

1. 安装依赖项： 使用 npm 或 yarn 安装必要的开发依赖项。

2. 启动扩展： 在 VS Code 中打开项目，然后启动扩展以测试功能。

3. 配置服务器端口（可选）： 根据需要调整 MCP 服务器的端口范围，并确保没有冲突。

4. 使用插面板： 在 VS Code 中通过命令 palette 调用 MCP 工具的功能，查看和管理工具文档。

✨ 主要特性

• 🔄 内置 MCP 服务器

  • Express + SSE 服务器（端口范围：54321 - 54421）
  • 安全来源验证
  • 自动端口选择
  • 连接管理和清理
  • 实时事件流

• 🔍 工具发现

  • 包装脚本（npm、yarn、pnpm）
  • 本地二进制文件（node_modules/.bin）
  • 全局工具（git、npm、yarn、pnpm）
  • 单体仓库工作区支持

• 📚 文档检索

  • 帮助命令执行 (-h, --help)
  • 版本信息获取
  • 安全命令验证
  • 错误处理

• 💻 VS Code 集成

  • React 基于 WebView 插面板
  • 状态栏集成
  • 命令 palette 支持
  • 工作区路径检测

🔧 技术细节

架构

1. VS Code 扩展（后端）

扩展宿主 (src/extension.ts)
├── VS Code 启动时激活
├── 创建 MCP 服务器
│   └── Express + SSE 服务器（54321-54421 端口范围）
└── 创建 WebView 插面板

2. MCP 服务器（中间层）

MCP 服务器 (src/server/*)
├── SSE 事件流
│   ├── 工具发现实时更新
│   ├── 文档流式传输
│   └── 连接状态管理
│
└── 工具发现系统
    ├── path-scanner.ts
    │   └── 在工作区中查找工具（bin/，node_modules/.bin）
    └── package-scanner.ts
        └── 扫描 package.json 以获取可用工具

3. WebView 插面板（前端）

React WebView (src/panel/*)
├── UI 组件
│   └── 显示可用工具及其文档
│
└── SSE 客户端
    ├── 请求可用工具
    └── 流式传输工具文档

项目结构

my-tools-mcp/
├── src/                      # 源代码
│   ├── extension.ts          # 扩展入口点
│   ├── env.ts               # 环境配置
│   ├── server/              # 内置 MCP 服务器
│   │   ├── index.ts         # 服务器设置和 SSE 处理
│   │   └── controllers/     # 工具发现和执行
│   │       ├── docs/        # 文档控制器
│   │       ├── path-scanner.ts    # 工具发现
│   │       └── package-scanner.ts # package.json 扫描
│   ├── panel/              # WebView UI（React）
│   │   ├── index.tsx      # WebView 入口点
│   │   ├── App.tsx        # 主 React 组件
│   │   └── components/    # UI 组件
│   ├── types/             # 共享 TypeScript 类型
│   └── lib/               # 共享工具
├── dist/                  # 编译输出
└── src/__tests__/        # 测试文件

📄 许可证

ISC