What is My Tools Mcp

my-tools-mcp is a VSCode/Cursor extension that integrates an MCP server and a UI panel for retrieving and displaying command-line tool documentation. It automatically detects tools in your workspace and presents their documentation through a WebView panel.

Use cases

Use cases for my-tools-mcp include retrieving documentation for npm scripts, accessing help commands for global tools like git, and providing real-time updates on tool availability in a monorepo workspace.

How to use

To use my-tools-mcp, install the extension in VSCode. Once activated, it will automatically scan your workspace for command-line tools and display their documentation in the integrated WebView panel. You can access tool information via the command palette or status bar.

Key features

Key features of my-tools-mcp include a built-in MCP server for real-time event streaming, automatic tool discovery from various sources (local binaries, global tools, package scripts), documentation retrieval including help commands and version information, and seamless integration with VS Code.

Where to use

my-tools-mcp can be used in software development environments, particularly where command-line tools are frequently utilized, such as web development, DevOps, and any project that involves package management.

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
• 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