MCP Tools 文档

这是一个 VSCode/Cursor 扩展，它提供了一个集成的 MCP 服务器和 UI 面板，用于检索和显示命令行工具的文档。该扩展能够自动检测工作区中的工具，并通过 WebView 面板提供它们的文档。

核心特性

• 🔄 内置 MCP 服务器

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

• 🔍 工具发现

  • 包脚本 (npm, yarn, pnpm)
  • 本地二进制文件 (node_modules/.bin)
  • 全局工具 (git, npm, yarn, pnpm)
  • 支持 monorepo 工作区

• 📚 文档检索

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

• 💻 VS Code 集成

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

架构

1. VS Code 扩展（后端）

Extension Host (src/extension.ts)
├── Activates when VS Code starts
├── Creates MCP Server
│   └── Express + SSE Server (54321-54421 port range)
└── Creates WebView Panel

2. MCP 服务器（中间层）

MCP Server (src/server/*)
├── SSE Event Stream
│   ├── Real-time tool discovery updates
│   ├── Documentation streaming
│   └── Connection state management
│
└── Tool Discovery System
    ├── path-scanner.ts
    │   └── Finds tools in workspace (bin/, node_modules/.bin)
    └── package-scanner.ts
        └── Scans package.json for available tools

3. WebView 面板（前端）

React WebView (src/panel/*)
├── UI Components
│   └── Shows available tools and their docs
│
└── SSE Client
    ├── Requests available tools
    └── Streams tool documentation

项目结构

my-tools-mcp/
├── src/                      # Source code
│   ├── extension.ts          # Extension entry point
│   ├── env.ts               # Environment configuration
│   ├── server/              # Built-in MCP server
│   │   ├── index.ts         # Server setup and SSE handling
│   │   └── controllers/     # Tool discovery and execution
│   │       ├── docs/        # Documentation controllers
│   │       ├── path-scanner.ts    # Tool discovery
│   │       └── package-scanner.ts # Package.json scanning
│   ├── panel/              # WebView UI (React)
│   │   ├── index.tsx      # WebView entry point
│   │   ├── App.tsx        # Main React component
│   │   └── components/    # UI components
│   ├── types/             # Shared TypeScript types
│   └── lib/               # Shared utilities
├── dist/                  # Compiled output
└── src/__tests__/        # Test files

开发环境设置

1. 安装依赖项：

pnpm install

1. 启动开发：

# Start webpack in watch mode
pnpm run dev

# Or build for production
pnpm run build

1. 启动扩展：

• 在 VSCode 中按 F5 开始调试
• 扩展会同时启动 MCP 服务器和 WebView 面板

使用方法

1. 打开命令面板 (Cmd/Ctrl + Shift + P)
2. 输入 "MCP Tools" 并选择命令
3. WebView 面板将打开并显示可用工具
4. 选择一个工具以查看其文档

技术细节

工具发现

• 包脚本

  • 自动检测 npm/yarn/pnpm 脚本
  • 显示脚本源和工作目录
  • 支持 monorepo 工作区
  • 验证脚本存在性

• 二进制工具

  • 在 node_modules/.bin 中查找工具
  • 检测全局工具 (git, npm, yarn, pnpm)
  • 验证工具存在性和权限
  • 处理路径解析

文档检索

• 执行帮助命令 (-h, --help)
• 获取版本信息
• 处理命令执行错误
• 验证工具名称和参数
• 实现适当的超时

SSE 通信

• 实时工具发现更新
• 安全来源验证
• 连接管理和清理
• 错误处理和报告
• 自动重新连接支持
• 基于事件的流
• 双向消息传递

安全特性

• 工具名称验证
• 防止命令注入
• 对 SSE 连接进行来源验证
• 适当的错误处理和报告
• 资源清理
• 连接状态管理

测试

该扩展包括全面的测试：

• 服务器功能集成测试
• VS Code 扩展测试
• 工具发现测试
• 安全验证测试
• SSE 通信测试

许可证

ISC