Vscode Internal Command MCP Server

🚀 VSCode Internal Command MCP Server

この拡張機能は、FastMCP フレームワークに基づいた VSCode 拡張で、VSCode を MCP (Model Context Protocol) サーバーに変換します。外部クライアントは、HTTP Streaming と Server-Sent Events (SSE) を通じて VSCode の内部コマンドを実行できます。

✨ 主な機能

• 🌐 HTTP Streaming サポート: text/event-stream プロトコルを使用し、リアルタイム通信をサポート
• 🔧 VSCode コマンド実行: 任意の VSCode 内部コマンドをリモートで実行
• 📊 ワークスペース情報取得: 現在のワークスペースの状態とファイル情報を取得
• ⚡ 非同期バックグラウンド実行: 非同期コマンド実行をサポートし、ユーザーインターフェイスをブロックしません
• ⏰ 実行遅延設定: コマンド実行の遅延時間を設定できます
• 🛡️ セキュリティ制御: コマンドのホワイトリスト機能を設定可能
• 📡 リアルタイム状態監視: ステータスバーにサーバーの実行状態を表示
• 🔗 標準 MCP プロトコル: Model Context Protocol 規格と完全に互換性があります
• ⚡ 高性能: FastMCP フレームワークに基づき、並行リクエストとセッション管理をサポート
• 🩺 ヘルスチェック: ビルトインのヘルスチェックエンドポイントがあります

📦 インストール

1. プロジェクトをクローンする

git clone https://github.com/bestk/vscode-internal-command-mcp-server
cd vscode-internal-command-mcp-server

2. 依存関係をインストールする

npm install

3. プロジェクトをコンパイルする

npm run compile

4. VSCode でインストールする

• F5 を押して拡張開発ホストを起動する
• または .vsix ファイルにパッケージ化してインストールする

⚙️ 設定

VSCode の設定でサーバーのパラメータを設定します。

{
    "vscode-internal-command-mcp-server.port": 8080,
    "vscode-internal-command-mcp-server.host": "localhost",
    "vscode-internal-command-mcp-server.autoStart": true,
    "vscode-internal-command-mcp-server.asyncExecution": true,
    "vscode-internal-command-mcp-server.executionDelay": 1000,
    "vscode-internal-command-mcp-server.showAsyncNotifications": false,
    "vscode-internal-command-mcp-server.allowedCommands": [
        "editor.action.formatDocument",
        "workbench.action.files.save",
        "editor.action.clipboardCopyAction"
    ]
}

設定説明

🚀 クイックスタート

サーバーの起動

1. 自動起動: autoStart が true の場合、拡張機能がアクティブになったときに自動で起動します。
2. 手動起動:
   • コマンドパネル: VSCode Internal Command MCP Server: Start Server
   • またはステータスバーの 🚀 VSCode internal command MCP ボタンをクリックする

サーバーのアドレス

• MCP エンドポイント: http://localhost:8080/mcp
• ヘルスチェック: http://localhost:8080/health

状態監視

• ステータスバー表示: 🚀 VSCode internal command MCP 🟢 (実行中) / 🚀 VSCode internal command MCP 🔴 (停止中)
• コマンドパネル: VSCode Internal Command MCP Server: Show Status で詳細な状態を確認できます。

💻 使用例

基本的な使用法

import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const transport = new StreamableHTTPClientTransport(new URL('http://localhost:8080/mcp'), {
    requestInit: {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json, text/event-stream',
        },
    },
});

const client = new Client({
    name: 'vscode-mcp-client',
    version: '1.0.0',
});

// 接続して使用する
await client.connect(transport);

// ツールを呼び出す
const result = await client.callTool({
    name: 'execute_vscode_command',
    arguments: {
        command: 'editor.action.formatDocument',
    },
});

console.log('コマンドの結果:', result);

高度な使用法

# ヘルスチェック
curl http://localhost:8080/health

# ツールを一覧表示する
curl -X POST http://localhost:8080/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list"
  }'

# コマンドを実行する
curl -X POST http://localhost:8080/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "execute_vscode_command",
      "arguments": {
        "command": "workbench.action.files.save"
      }
    }
  }'

🛠️ 利用可能なツール (MCP Tools)

1. execute_vscode_command

VSCode の内部コマンドを実行します。

パラメータ:

{
  command: string;      // VSCode コマンド ID
  arguments?: string[]; // コマンドの引数（オプション）
}

非同期実行の応答例:

{
    "success": true,
    "async": true,
    "taskId": "bg_task_1_1756952250790",
    "message": "コマンド 'composer.cancelComposerStep' はバックグラウンドで実行されるように送信され、1000ms 後に実行されます。",
    "command": "composer.cancelComposerStep",
    "arguments": [],
    "executionDelay": 1000,
    "queueLength": 1,
    "taskStats": {
        "total": 1,
        "pending": 1,
        "running": 0,
        "completed": 0,
        "failed": 0,
        "cancelled": 0
    }
}

2. list_vscode_commands

利用可能なすべての VSCode コマンドを一覧表示します。

パラメータ: なし

戻り値: コマンドのリスト（20 個まで。超える場合は省略表示されます）

3. get_workspace_info

現在のワークスペースの情報を取得します。

パラメータ: なし

戻り値:

{
    name: string; // ワークスペースの名前
    folders: Array<{
        // ワークスペースのフォルダ
        name: string;
        uri: string;
    }>;
    activeEditor: string; // 現在アクティブなエディタのファイルパス
}

🔌 クライアントの接続

公式 MCP SDK を使用する

import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const transport = new StreamableHTTPClientTransport(new URL('http://localhost:8080/mcp'), {
    requestInit: {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json, text/event-stream',
        },
    },
});

const client = new Client({
    name: 'vscode-mcp-client',
    version: '1.0.0',
});

// 接続して使用する
await client.connect(transport);

// ツールを呼び出す
const result = await client.callTool({
    name: 'execute_vscode_command',
    arguments: {
        command: 'editor.action.formatDocument',
    },
});

console.log('コマンドの結果:', result);

Cursor を使用する

Cursor で MCP サーバーを設定します。

{
    "mcpServers": {
        "vscode-internal-commands": {
            "url": "http://localhost:8080/mcp",
            "transport": "http"
        }
    }
}

curl でテストする

# ヘルスチェック
curl http://localhost:8080/health

# ツールを一覧表示する
curl -X POST http://localhost:8080/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list"
  }'

# コマンドを実行する
curl -X POST http://localhost:8080/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "execute_vscode_command",
      "arguments": {
        "command": "workbench.action.files.save"
      }
    }
  }'

🏗️ 技術アーキテクチャ

コアコンポーネント

┌─────────────────────────┐
│   VSCode Extension      │
├─────────────────────────┤
│   FastMcpServer         │ ← FastMCP フレームワークに基づく
├─────────────────────────┤
│   ServerManager         │ ← サーバーの管理と状態
├─────────────────────────┤
│   CommandExecutor       │ ← VSCode コマンドの実行器
├─────────────────────────┤
│ BackgroundTaskExecutor  │ ← バックグラウンドタスクの実行器
├─────────────────────────┤
│   TaskProvider          │ ← VS Code タスクの提供者
└─────────────────────────┘

技術スタック

• フレームワーク: FastMCP - TypeScript MCP サーバーフレームワーク
• プロトコル: Model Context Protocol (MCP)
• 伝送: HTTP Streaming with Server-Sent Events (SSE)
• 検証: Zod Schema 検証
• プラットフォーム: VSCode Extension API
• 非同期実行: setInterval に基づくバックグラウンドタスクキュー

ネットワークプロトコル

• 伝送タイプ: httpStream
• コンテンツタイプ: text/event-stream
• サポートプロトコル: HTTP/1.1
• CORS: デフォルトで有効

非同期実行メカニズム

• タスクキュー: Map データ構造に基づくメモリキュー
• 実行器: setInterval を使用して定期的に実行待ちタスクをチェック
• 状態管理: pending、running、completed、failed、cancelled の状態をサポート
• 遅延実行: 遅延時間を設定でき、指定時間後にタスクが実行されます
• 通知システム: 実行完了通知をオプションで設定できます

🔧 開発

プロジェクト構造

vscode-internal-command-mcp-server/
├── src/
│   ├── extension.ts              # 拡張機能のエントリーポイント
│   ├── fastMcpServer.ts         # FastMCP サーバーの実装
│   ├── serverManager.ts         # サーバーマネージャー
│   ├── commandExecutor.ts       # VSCode コマンドの実行器
│   ├── backgroundTaskExecutor.ts # バックグラウンドタスクの実行器
│   └── taskProvider.ts          # VS Code タスクの提供者
├── out/                         # コンパイル出力
├── package.json                 # 拡張機能の設定と依存関係
├── tsconfig.json               # TypeScript の設定
└── README.md                   # プロジェクトのドキュメント

開発コマンド

# 開発モードでコンパイルする
npm run compile

# 監視モードでコンパイルする
npm run watch

# 開発を開始する
code . # VSCode を開き、F5 を押してデバッグを開始する

デバッグ

1. VSCode でプロジェクトを開く
2. F5 を押して拡張開発ホストを起動する
3. 新しいウィンドウで拡張機能の機能をテストする
4. デバッグコンソールの出力を確認する

🧪 テスト

組み込みテストツールを使用する

1. サーバーを起動した後、コマンド VSCode Internal Command MCP Server: Test MCP Tools を実行する
2. テストするツールを選択する
3. 必要なパラメータを入力する
4. 実行結果を確認する

FastMCP CLI を使用する

# FastMCP 開発ツールでテストする
npx fastmcp dev src/fastMcpServer.ts

# MCP Inspector で確認する
npx fastmcp inspect src/fastMcpServer.ts

🛡️ セキュリティに関する考慮事項

コマンドのホワイトリスト

セキュリティ上の理由から、allowedCommands ホワイトリストを設定することをお勧めします。

{
    "vscode-internal-command-mcp-server.allowedCommands": [
        "editor.action.formatDocument",
        "workbench.action.files.save",
        "workbench.action.files.saveAll",
        "editor.action.clipboardCopyAction",
        "editor.action.clipboardPasteAction"
    ]
}

ネットワークセキュリティ

• デフォルトでは localhost のみを監視し、外部からのアクセスを防ぎます。
• CORS をサポートしていますが、本番環境では適切なオリジン制限を設定することをお勧めします。
• すべてのコマンド実行は VSCode のセキュリティコンテキスト内で行われます。

非同期実行のセキュリティ

• タスクキューはメモリ内で管理され、拡張機能が閉じられると自動的にクリアされます。
• タスクのキャンセルと状態監視をサポートしています。
• 実行に失敗した場合は詳細なエラー情報が提供されます。

📝 更新履歴

v0.0.2 (現在のバージョン)

• ✅ 非同期実行メカニズムを再構築し、バックグラウンドタスクキューを使用するようにしました。
• ✅ 設定のリフレッシュ問題を修正し、設定の変更が即座に反映されるようにしました。
• ✅ タスクの状態管理と監視を最適化しました。
• ✅ エラー処理とログ記録を改善しました。
• ✅ コード構造を簡素化し、冗長なコンポーネントを削除しました。

v0.0.1

• ✅ FastMCP フレームワークに基づいて MCP サーバーを実装しました。
• ✅ HTTP Streaming と SSE をサポートしました。
• ✅ 3 つのコアツール（コマンド実行、コマンドリスト、ワークスペース情報）を実装しました。
• ✅ ステータスバーへの統合とリアルタイム監視を実装しました。
• ✅ ヘルスチェックエンドポイントを実装しました。
• ✅ Zod Schema パラメータ検証を実装しました。
• ✅ TypeScript 5.9+ をサポートしました。

🤝 貢献

Issue と Pull Request の投稿を歓迎します！

開発ガイド

1. プロジェクトを Fork する
2. 機能ブランチを作成する: git checkout -b feature/amazing-feature
3. 変更をコミットする: git commit -m 'Add amazing feature'
4. ブランチをプッシュする: git push origin feature/amazing-feature
5. Pull Request を作成する

📄 ライセンス

MIT License - 詳細は LICENSE ファイルを参照してください。

🙏 謝辞

• FastMCP - 優れた TypeScript MCP フレームワーク
• Model Context Protocol - 標準プロトコル仕様
• VSCode Extension API - 強力な拡張プラットフォーム

📞 サポート

問題が発生した場合や質問がある場合は、以下の手順を試してください。

1. Issues を確認する
2. 新しい Issue を作成する
3. FastMCP のドキュメントを参照する: https://github.com/punkpeye/fastmcp

🚀 VSCode をあなたの MCP サーバーにして、無限の可能性を解き放ちましょう！