VSCode にて GitHub Copilot がエージェントモードで使えるようになりました。 MCP もサポートされています。
利用例として playwright-mcp を使って GitHub Copilot Chat から自然言語で Web ブラウザを操作してみました。
- 前提①:GitHub Copilot が利用できること
- 前提②:VSCode 拡張機能「GitHub Copilot」および「GitHub Copilot Chat」がインストールされていること
- VSCode で GitHub Copilot Chat のエージェントモードを有効化
- playwright-mcp をインストール
- GitHub Copilot Chat から playwright-mcp を利用できるようにする
- GitHub Copilot Chat から自然言語で指示を出す
前提①:GitHub Copilot が利用できること
自前の契約にせよ、organization での契約にせよ GitHub Copilot 自体を利用できなければなりません。 https://github.com/settings/copilot から確認できます。
また 2025/04/08 時点では「Editor preview features」を有効化しておく必要があるようです。
GitHub Copilot Free でも 50 回までのチャットリクエストが可能ですが、エージェントモードも利用可能なのかは未確認です。
前提②:VSCode 拡張機能「GitHub Copilot」および「GitHub Copilot Chat」がインストールされていること
VSCode で GitHub Copilot Chat のエージェントモードを有効化
VSCode の設定から「Feature(機能)」>「Chat(チャット)」>「Agent: Enabled」(chat.agent.enabled)にチェックを入れます。
設定項目が表示されない場合は VSCode 自体や、拡張機能が最新版になっているかを確認しましょう。
playwright-mcp をインストール
公式の README に従って、以下のコマンドを実行します。
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
すでに VSCode を起動していた場合は、コマンド実行後に再起動しましょう。
GitHub Copilot Chat から playwright-mcp を利用できるようにする
VSCode で GitHub Copilot Chat を開き、チャット入力欄の右下、モデルの左にあるドロップダウンリストから「Agent(エージェント)」を選択します。
続いて、チャット入力欄の左上の更新マークのボタンをクリックします。
スパナのマークのボタンクリックして playwright の MCP サーバが利用可能になっていれば準備完了です。
GitHub Copilot Chat から自然言語で指示を出す
自然言語でブラウザ操作を指示できるようになりました。
デフォルトではステップごとに操作の確認が入るため、都度その操作を承認する必要があります。