命令行工具文档集成扩展

一个VSCode/Cursor扩展,提供集成的MCP服务器和UI面板,用于检索和显示命令行工具文档。

  • by patelnav
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 patelnav/my-tools-mcp

使用说明

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通信测试

许可证

国际协调委员会