Visual Studio Code InsidersからMCP Serverを使えるようにしてみた

概要

VS Code Insidersの機能としてMCP Serverが利用できるようになっていました。
本記事では拡張機能をインストールせずにVS Code InsidersでMCP Serverを利用する方法をご紹介します。

この記事で分かること

• VS Code InsidersでMCP Serverをセットアップする方法
• GitHubCopilotのエージェントモードからMCP Serverを使う方法

はじめに

VS Code Insidersとは？MCP Serverとは？という疑問については、下記の記事をご参照ください。

VS Code Insidersのインストール方法
https://zenn.dev/ncdc/articles/eb1fc13c001031

MCP Serverの概要
https://zenn.dev/aimasaou/articles/96182d46ae6ad2

---

既にCursorやWindsurf、ClineなどMCPに対応したエディタや拡張機能は存在しますが、
１つの選択肢としてVS Code InsidersからMCP Serverを利用する方法をご紹介します。

事前準備

• VS Code Insidersのインストールが終わっていること

セットアップ

今回はこちらのMCP Serverを追加してみます。
https://github.com/microsoft/playwright-mcp

1. エディタの検索バーで「settings.json」と入力

2. MCP Serverのインストール先に応じて、ワークスペース/ユーザー用のsettings.jsonを開く

• 特定のリポジトリのみで有効にしたいMCP Serverの場合
  → ワークスペースのsettings.json

• すべてのリポジトリで有効にしたい場合
  → ユーザーのsettings.json

3. MCP ServerのREADME.mdを参考にして下記のフォーマットで設定を追加

"mcp": {
  "servers": {
      "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

4. エディタ上に表示された「Start」を選択

その後、「Running」という表示に切り替わればセットアップ完了です👏

最後に、今回導入したMCP Serverが動作するかをAgent Modeを使って確認します

まとめ

今回はVS Code InsidersでMCP Serverを利用する方法をご紹介しました。
MCPに対応したエディタや拡張機能は様々ありますが、それぞれで使い勝手や細かいクセなどは異なる部分もあったりします。
ぜひVS CodeでもAgent x MCPの開発を試してみてください！