MCP Tools Documentation

View original on GitHub 

A VSCode/Cursor extension that provides an integrated MCP server and UI panel for retrieving and displaying command-line tool documentation. The extension automatically detects tools in your workspace and provides their documentation through a WebView panel.

Core Features

• 🔄 Built-in MCP Server

  • Express + SSE server (ports 54321-54421)
  • Secure origin validation
  • Automatic port selection
  • Connection management and cleanup
  • Real-time event streaming

• 🔍 Tool Discovery

  • Package scripts (npm, yarn, pnpm)
  • Local binaries (node_modules/.bin)
  • Global tools (git, npm, yarn, pnpm)
  • Monorepo workspace support

• 📚 Documentation Retrieval

  • Help command execution (-h, —help)
  • Version information fetching
  • Secure command validation
  • Error handling

• 💻 VS Code Integration

  • React-based WebView panel
  • Status bar integration
  • Command palette support
  • Workspace path detection

Architecture

1. VS Code Extension (Backend)

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 Server (Middle Layer)

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 Panel (Frontend)

React WebView (src/panel/*)
├── UI Components
│   └── Shows available tools and their docs
│
└── SSE Client
    ├── Requests available tools
    └── Streams tool documentation

Project Structure

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

Development Setup

1. Install dependencies:

pnpm install

2. Start development:

# Start webpack in watch mode
pnpm run dev
 
# Or build for production
pnpm run build

3. Launch the extension:

• Press F5 in VSCode to start debugging
• The extension will start both the MCP server and WebView panel

Usage

1. Open the command palette (Cmd/Ctrl + Shift + P)
2. Type “MCP Tools” and select the command
3. The WebView panel will open and display available tools
4. Select a tool to view its documentation

Technical Details

Tool Discovery

• Package Scripts

  • Automatically detects npm/yarn/pnpm scripts
  • Shows script source and working directory
  • Supports monorepo workspaces
  • Validates script existence

• Binary Tools

  • Finds tools in node_modules/.bin
  • Detects global tools (git, npm, yarn, pnpm)
  • Validates tool existence and permissions
  • Handles path resolution

Documentation Retrieval

• Executes help commands (-h, —help)
• Fetches version information
• Handles command execution errors
• Validates tool names and arguments
• Implements proper timeouts

SSE Communication

• Real-time tool discovery updates
• Secure origin validation
• Connection management and cleanup
• Error handling and reporting
• Automatic reconnection support
• Event-based streaming
• Bi-directional message passing

Security Features

• Tool name validation
• Command injection prevention
• Origin validation for SSE connections
• Proper error handling and reporting
• Resource cleanup
• Connection state management

Testing

The extension includes comprehensive tests:

• Integration tests for server functionality
• VS Code extension tests
• Tool discovery tests
• Security validation tests
• SSE communication tests

License

ISC