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: DeepSeek MCP Server
建築
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 Panel2. 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 tools3. 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