MCPツールドキュメント

VSCode/Cursor拡張機能は、統合されたMCPサーバーとUIパネルを提供し、コマンドラインツールのドキュメントを取得・表示します。この拡張機能はワークスペース内のツールを自動的に検出し、WebViewパネルを通じてドキュメントを提供します。

コア機能

🔄組み込みMCPサーバー
- Express + SSE サーバー (ポート 54321-54421)
- 安全なオリジン検証
- 自動ポート選択
- 接続管理とクリーンアップ
- リアルタイムイベントストリーミング
🔍ツールの発見
- パッケージスクリプト (npm、yarn、pnpm)
- ローカルバイナリ (node_modules/.bin)
- グローバルツール（git、npm、yarn、pnpm）
- Monorepo ワークスペースのサポート
📚ドキュメントの取得
- ヘルプコマンドの実行 (-h, --help)
- バージョン情報の取得
- 安全なコマンド検証
- エラー処理
💻 VS Code 統合
- ReactベースのWebViewパネル
- ステータスバーの統合
- コマンドパレットのサポート
- ワークスペースパス検出

Related MCP server: Nexus MCP Bridge for VSCode

建築

1. VS Code拡張機能（バックエンド）

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サーバー（中間層）

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パネル（フロントエンド）

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

プロジェクト構造

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

開発セットアップ

依存関係をインストールします:

pnpm install

開発を開始:

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

拡張機能を起動します。

VSCodeでF5を押してデバッグを開始します
拡張機能はMCPサーバーとWebViewパネルの両方を起動します

使用法

コマンドパレットを開く（Cmd/Ctrl + Shift + P）
「MCPツール」と入力してコマンドを選択します
WebViewパネルが開き、利用可能なツールが表示されます。
ツールを選択してドキュメントを表示

技術的な詳細

ツールの発見

パッケージスクリプト
- npm/yarn/pnpm スクリプトを自動検出します
- スクリプトのソースと作業ディレクトリを表示します
- モノレポワークスペースをサポート
- スクリプトの存在を検証する
バイナリツール
- node_modules/.bin 内のツールを検索します
- グローバルツール（git、npm、yarn、pnpm）を検出します
- ツールの存在と権限を検証する
- パス解決を処理する

ドキュメントの取得

ヘルプコマンドを実行します (-h、--help)
バージョン情報を取得します
コマンド実行エラーを処理する
ツール名と引数を検証します
適切なタイムアウトを実装する

SSEコミュニケーション

リアルタイムツール検出の更新
安全なオリジン検証
接続管理とクリーンアップ
エラー処理とレポート
自動再接続のサポート
イベントベースのストリーミング
双方向メッセージパッシング

セキュリティ機能

ツール名の検証
コマンドインジェクション防止
SSE接続のオリジン検証
適切なエラー処理と報告
リソースのクリーンアップ
接続状態管理

テスト

拡張機能には包括的なテストが含まれています。

サーバー機能の統合テスト
VS Code拡張テスト
ツール検出テスト
セキュリティ検証テスト
SSE通信テスト

ライセンス

ISC

Integrated MCP Server