s平面の左側

左側なので安定してます(制御工学の話は出てきません)

playwright-mcp を使って GitHub Copilot Chat から自然言語でブラウザを操作する

VSCode にて GitHub Copilot がエージェントモードで使えるようになりました。 MCP もサポートされています。

github.blog

利用例として playwright-mcp を使って GitHub Copilot Chat から自然言語で Web ブラウザを操作してみました。

前提①: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 から自然言語で指示を出す

自然言語でブラウザ操作を指示できるようになりました。

デフォルトではステップごとに操作の確認が入るため、都度その操作を承認する必要があります。

GitHub Copilot 上で「Google で「playwright mcp」で検索し、トップに表示されたページを開いて内容を要約してください。」という指示を入力し、GitHub Copilot がその結果を返している画面のスクリーンショット

GitHub Copilot 上で「Google 検索結果のトップ 10 ページのタイトルと URL を JSON 形式で出力してください。」という指示を入力し、GitHub Copilot が実際に JSON 形式で出力している画面のスクリーンショット