Integrated MCP Server

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Used as the backend server technology for the MCP server, providing HTTP and SSE (Server-Sent Events) capabilities

  • Detected as a global tool to provide documentation through the MCP server

  • Detected as a global tool and used to discover package scripts to provide documentation through the 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 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 连接的来源验证
  • 正确的错误处理和报告
  • 资源清理
  • 连接状态管理

测试

该扩展包括全面的测试:

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

执照

国际学习中心

-
security - not tested
F
license - not found
-
quality - not tested

使用 Express 和 SSE 实现安全和动态内容流,促进 VSCode 扩展中命令行工具的实时工具发现和文档检索。

  1. Core Features
    1. Architecture
      1. 1. VS Code Extension (Backend)
      2. 2. MCP Server (Middle Layer)
      3. 3. WebView Panel (Frontend)
    2. Project Structure
      1. Development Setup
        1. Usage
          1. Technical Details
            1. Tool Discovery
            2. Documentation Retrieval
            3. SSE Communication
            4. Security Features
          2. Testing
            1. License
              ID: 2r8d1xr71e