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

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