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 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
开发设置
- 安装依赖项:
- 开始开发:
# Start webpack in watch mode
pnpm run dev
# Or build for production
pnpm run build
- 启动扩展:
- 在 VSCode 中按 F5 开始调试
- 该扩展将启动 MCP 服务器和 WebView 面板
用法
- 打开命令面板(Cmd/Ctrl + Shift + P)
- 输入“MCP Tools”并选择命令
- WebView 面板将打开并显示可用的工具
- 选择一个工具来查看其文档
技术细节
工具发现
- 包脚本
- 自动检测 npm/yarn/pnpm 脚本
- 显示脚本源和工作目录
- 支持 monorepo 工作区
- 验证脚本存在
- 二进制工具
- 在 node_modules/.bin 中查找工具
- 检测全局工具(git、npm、yarn、pnpm)
- 验证工具存在和权限
- 处理路径解析
文献检索
- 执行帮助命令(-h,--help)
- 获取版本信息
- 处理命令执行错误
- 验证工具名称和参数
- 实施适当的超时
上证通讯
- 实时工具发现更新
- 安全原产地验证
- 连接管理和清理
- 错误处理和报告
- 自动重新连接支持
- 基于事件的流式传输
- 双向消息传递
安全功能
- 工具名称验证
- 命令注入预防
- SSE 连接的来源验证
- 正确的错误处理和报告
- 资源清理
- 连接状态管理
测试
该扩展包括全面的测试:
- 服务器功能的集成测试
- VS Code 扩展测试
- 工具发现测试
- 安全验证测试
- SSE 通信测试
执照
国际学习中心