MCP Vscode Commands

🚀 MCP VSCode Commands Extension

この拡張機能は、AI（Cursor 内の Claude など）が Model Context Protocol (MCP) を介して直接 VSCode のコマンドを実行できるようにするものです。

✨ 主な機能

• 🔧 VSCode コマンドの実行: MCP を通じて、VSCode のすべての組み込みコマンドや拡張機能のコマンドを実行できます。
• 📋 利用可能なコマンドの一覧表示: 動的にすべての利用可能なコマンドを取得し、フィルタリングもサポートします。
• 🔄 自動設定: Cursor MCP の設定を自動的に行い、手動での操作は不要です。
• 🎯 動的ポート: ポートを自動的に割り当て、衝突を回避します。
• 🔒 安全な実行: 完全なエラー処理と結果のシリアル化を行います。
• ⚡ SSE 接続: Server-Sent Events をベースにした最新の通信方式を採用しています。

🏗️ アーキテクチャ

graph TB
    subgraph "Cursor"
        LLM["AI Assistant<br/>(Claude)"]
    end
    
    subgraph "VSCode Extension"
        SSE["SSE Server<br/>(Dynamic Port)"]
        MCP["MCP Handler"]
        Commands["VSCode<br/>Commands"]
    end
    
    subgraph "Auto Config"
        Config["~/.cursor/<br/>mcp.json"]
    end
    
    LLM <-->|"MCP over SSE"| SSE
    SSE <--> MCP
    MCP <-->|"API Calls"| Commands
    SSE -.->|"Auto Update"| Config
    
    style LLM fill:#e1f5fe
    style SSE fill:#e8f5e9  
    style MCP fill:#fff3e0
    style Commands fill:#f3e5f5
    style Config fill:#fce4ec

🚀 ワークフロー

1. VSCode 拡張機能の起動 → 利用可能なポートを自動的に割り当て、SSE サーバーを起動します。
2. 自動設定 → ~/.cursor/mcp.json の設定を更新します。
3. Cursor の接続 → SSE を通じて MCP サーバーに接続します。
4. コマンドの実行 → AI が直接 VSCode のコマンドツールを使用できるようになります。

🛠️ MCP ツール

vscode.executeCommand

指定された VSCode コマンドを実行します。

• パラメータ: commandId (必須), args (オプション)
• 例: ファイルの整形、設定の開き、ファイルの保存など

vscode.listCommands

すべての利用可能な VSCode コマンドをリストします。

• パラメータ: filter (オプション) - フィルタリング文字列を指定します。
• 返り値: フィルタリングされたコマンドのリスト

📦 インストールと使用方法

🎯 クイックスタート

graph LR
    A["📦 インストール<br/>npm install<br/>npm run compile"] 
    B["📄 パッケージング<br/>npx vsce package"]
    C["🔌 拡張機能のインストール<br/>Install from VSIX"]
    D["▶️ 起動<br/>Start MCP Server"]
    E["✅ 完了<br/>Cursor で使用可能"]
    
    A --> B
    B --> C
    C --> D
    D --> E
    
    style A fill:#fff3e0
    style B fill:#e8f5e9
    style C fill:#e1f5fe
    style D fill:#f3e5f5
    style E fill:#e8f5e9

📋 詳細手順

1. クローンと依存関係のインストール

git clone https://github.com/louisfghbvc/mcp-vscode-commands.git
cd mcp-vscode-commands
npm install

2. コンパイルとパッケージング

# TypeScript のコンパイル
npm run compile

# 拡張機能のパッケージング
npx vsce package

3. VSCode/Cursor へのインストール

• VSCode または Cursor を開きます。
• 拡張機能ページ (Ctrl/Cmd + Shift + X) を開きます。
• "..." メニューをクリックし、"Install from VSIX..." を選択します。
• 生成された .vsix ファイルを選択します。

4. MCP サーバーの起動

• コマンドパネル (Ctrl/Cmd + Shift + P) を開きます。
• Start MCP Server を実行します。
• 拡張機能は自動的に以下の操作を行います。
  • 🔍 利用可能なポートを検索します。
  • 🚀 SSE サーバーを起動します。
  • ⚙️ ~/.cursor/mcp.json を更新します。
  • ✅ 成功メッセージを表示します。

5. Cursor での使用

• Cursor を再起動します。
• AI が VSCode のコマンドツールを使用できるようになりました！

💻 使用例

自然言語による指令

現在のファイルを整形してください

すべてのエディタ関連のコマンドをリストしてください

workbench.action.openSettings を実行して設定を開いてください

新しいターミナルを作成してください

直接の MCP ツール呼び出し

エディタ関連のコマンドをリストする

{
  "name": "vscode.listCommands",
  "arguments": {
    "filter": "editor"
  }
}

現在のファイルを整形する

{
  "name": "vscode.executeCommand",
  "arguments": {
    "commandId": "editor.action.formatDocument"
  }
}

パラメータ付きのコマンドを実行する

{
  "name": "vscode.executeCommand",
  "arguments": {
    "commandId": "vscode.open",
    "args": ["file:///path/to/file.txt"]
  }
}

⚙️ 設定オプション

VSCode の設定で以下のオプションを設定できます。

• mcpVscodeCommands.autoStart: MCP サーバーを自動的に起動するかどうか (デフォルト: true)
• mcpVscodeCommands.logLevel: ログレベル (デフォルト: info)

📚 よく使うコマンド

📝 エディタ操作

• editor.action.formatDocument - ファイルを整形する
• editor.action.organizeImports - インポートを整理する
• editor.action.commentLine - 行をコメントアウトする
• editor.action.duplicateSelection - 選択した内容を複製する

💾 ファイル操作

• workbench.action.files.save - 現在のファイルを保存する
• workbench.action.files.saveAll - すべてのファイルを保存する
• workbench.action.files.newUntitledFile - 新しいファイルを作成する

🔍 ナビゲーション操作

• workbench.action.quickOpen - ファイルを迅速に開く
• workbench.action.showCommands - コマンドパネルを表示する
• workbench.action.gotoSymbol - シンボルにジャンプする

🖥️ ターミナル操作

• workbench.action.terminal.new - 新しいターミナルを開く
• workbench.action.terminal.toggleTerminal - ターミナルを切り替える

🧪 テストとデバッグ

SSE 接続のテスト

# 自動スキャンとテスト
node examples/test-sse-server.js

# 特定のポートをテスト
node examples/test-sse-server.js 3000

# ポート範囲をスキャン
node examples/test-sse-server.js scan 3000 8000

設定の確認

# Cursor MCP の設定を表示
cat ~/.cursor/mcp.json

VSCode 開発者コンソール

VSCode Developer Tools を開いて詳細なログを確認します。

🔧 拡張機能コマンド

• Start MCP Server - MCP サーバーを起動し、自動的に設定します。
• Stop MCP Server - MCP サーバーを停止し、設定をクリアします。
• Show MCP Server Status - サーバーの状態と URL を表示します。

📁 ファイル構造

mcp-vscode-commands/
├── src/
│   ├── extension.ts          # VSCode 拡張機能のメインファイル
│   ├── mcp-sse-server.ts     # SSE ベースの MCP サーバー
│   ├── types.ts              # TypeScript の型定義
│   └── tools/                # MCP ツールの実装
├── examples/
│   ├── README-MCP-Setup.md   # 詳細な設定ガイド
│   ├── basic-usage.md        # 基本的な使用例
│   ├── cursor-config.json    # Cursor の設定例
│   └── test-sse-server.js    # SSE テストツール
└── .github/workflows/        # GitHub Actions の自動化

❓ トラブルシューティング

サーバーが起動しない場合

• VSCode 開発者コンソールのエラーメッセージを確認します。
• ポートが他のプログラムによって使用されていないことを確認します。
• 拡張機能を再インストールします。

Cursor が接続できない場合

• Cursor を再起動します。
• ~/.cursor/mcp.json ファイルが正しいことを確認します。
• MCP サーバーが動作していることを確認します。

コマンドの実行が失敗する場合

• コマンド ID が正しいことを確認します。
• コマンドが特定のコンテキストを必要とするかどうかを確認します。
• エラーメッセージを確認して詳細を取得します。

🤝 貢献

Issues と Pull Requests の投稿を歓迎します！

📄 その他のリソース

• 📖 詳細な設定ガイド
• 🛠️ 使用例
• 🌐 MCP 公式ドキュメント
• 📚 VSCode コマンドのリファレンス

📝 ライセンス

MIT License

AI アシスタントと VSCode を完璧に連携させましょう！ 🚀✨