My Tools MCP

🚀 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