My Tools MCP

🚀 MCP Tool Documentation

This is a VSCode/Cursor extension that integrates a built-in MCP server and a UI panel to retrieve and display documentation for command-line tools. The extension can automatically detect tools in the workspace and provide their documentation through the panel.

✨ Features

• 🔄 Built-in MCP Server

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

• 🔍 Tool Discovery

  • Wrapper 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 retrieval
  • Secure command verification
  • Error handling

• 💻 VS Code Integration

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

🔧 Technical Details

1. VS Code Extension (Backend)

Extension host (src/extension.ts)
├── Activated when VS Code starts
├── Creates an MCP server
│   └── Express + SSE server (port range: 54321 - 54421)
└── Creates a WebView panel

2. MCP Server (Middle Layer)

MCP server (src/server/*)
├── SSE event stream
│   ├── Real-time updates for tool discovery
│   ├── Documentation streaming
│   └── Connection status management
│
└── Tool discovery system
    ├── path-scanner.ts
│   └── Finds tools in the workspace (bin/, node_modules/.bin)
    └── package-scanner.ts
        └── Scans package.json for available tools

3. WebView Panel (Frontend)

React WebView (src/panel/*)
├── UI components
│   └── Displays available tools and their documentation
│
└── SSE client
    ├── Requests available tools
    └── Streams tool documentation

📦 Installation

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 controller
│   │       ├── 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

Steps to Set Up the Development Environment

To start using the MCP tool, follow these steps:

1. Install Dependencies: Use npm or yarn to install the necessary development dependencies.

2. Start the Extension: Open the project in VS Code and start the extension to test its functionality.

3. Configure Server Port (Optional): Adjust the port range of the MCP server as needed and ensure there are no conflicts.

4. Use the Panel: Invoke the MCP tool's functions through the command palette in VS Code to view and manage tool documentation.

📄 License

ISC