Integrated MCP Server

MCP工具文档

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

核心功能

• 🔄 内置MCP服务器

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

• 🔍 工具发现

- 打包脚本（npm、yarn、pnpm） - 本地二进制文件（node_modules/.bin） - 全局工具（git、npm、yarn、pnpm） - Monorepo工作区支持

• 📚 文献检索

- 帮助命令执行（-h，--Help） - 版本信息获取 - 安全命令验证 - 错误处理

• 💻 VS代码集成

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

建筑

1.VS代码扩展（后端）

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工具”并选择命令
3. WebView面板将打开并显示可用工具
4. 选择一个工具以查看其文档

技术细节

工具发现

• 软件包脚本

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

• 二进制工具

- 在node_modules/.bin中查找工具 - 检测全局工具（git、npm、yarn、pnpm） - 验证工具是否存在和权限 - 处理路径分辨率

文献检索

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

SSE通信

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

安全功能

• 工具名称验证
• 命令注入预防
• SSE连接的源验证
• 正确的错误处理和报告
• 资源清理
• 连接状态管理

测试

扩展包括全面的测试：

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

许可证

国际协调委员会