MCP Tools Documentation

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

Install dependencies:

pnpm install

Start development:

# Start webpack in watch mode
pnpm run dev

# Or build for production
pnpm run build

Launch the extension:

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

Usage

Open the command palette (Cmd/Ctrl + Shift + P)
Type "MCP Tools" and select the command
The WebView panel will open and display available tools
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