VS Code の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる（安定版でも利用可能に）


:::note info
【追記】 [March 2025 (version 1.99) のアップデート](https://code.visualstudio.com/updates/v1_99)で、Insider版でなくても Agent mode や MCPサーバーを扱う機能が使えるようになりました
（記事執筆時は Insider版でしか扱えなかったので、Insider版を使った流れを書いてますが、今は安定版で同じことができます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e2c64579-d7bd-476a-b8a5-c5e7cc1e3bd0.png)

VS Code No安定版を最新にして、Agent mode が選択できない場合は、設定から Agent mode の機能を有効化してください。
:::


## はじめに

↓このポストに書いていた話に関する内容です。

https://x.com/youtoy/status/1907095837253272016

最初に「VS Code Insider版の設定から MCPサーバーの設定を追加できる」という情報を見かけたのは、上記で引用しているポストでした。

また、検索をしてみると日本語や英語の記事も書かれているようでした。
以下は、その一例です。

●Visual Studio Code + Model Context Protocol (MCP) Servers - the first look - DEV Community
　https://dev.to/thangchung/visual-studio-code-model-context-protocol-mcp-servers-the-first-look-18nb

![2025-04-02_01-09-25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/698a1356-6cd8-4494-bd83-de167887ec2c.jpeg)


### 余談： MCP を軽く試した時の記事

余談ですが MCP は以前、しばらく積みネタにした後に、以下の記事に書いた Claude for Desktop で利用するという内容から着手したことがあるものです。

●今になって Claude for Desktop で MCP に入門してみた（Claude は Free plan） - Qiita
　https://qiita.com/youtoy/items/3ef0af28b530f5c5709c



## 試してみる

実際に試してみます。

### MCP関連の設定

#### MCP関連の設定を開く


MCP関連の設定を開きます。

経路は複数あるみたいですが、自分は左下のアイコンから設定を開き、たどっていきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6be1de96-d6a2-4d7b-a7b5-10d3ca1bba9e.png)

設定を開いたら「mcp」というキーワードで検索します。
そうすると、以下のように 3つの関連項目が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c9394b2c-fc89-4941-8e22-09573c556ca8.png)

その一番上の以下にある項目で、「setting.json で編集」の部分をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a05dd577-ee49-41fc-a98a-d8274d1e90f8.png)

#### setting.json での該当項目

そうすると、以下の設定が出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f6b350bc-2f00-42b0-9f96-5896aa82941b.png)

デフォルトで書かれている内容は以下のとおりです。

```json
{
    "mcp": {
    
        "inputs": [],
        "servers": {
            "mcp-server-time": {
                "command": "python",
                "args": [
                    "-m",
                    "mcp_server_time",
                    "--local-timezone=America/Los_Angeles"
                ],
                "env": {}
            }
        }
    }
}
```

#### setting.json の内容を決める

デフォルトで書かれている内容を、今回のお試し用の内容に変更してみます。

具体的には、冒頭で紹介していた英語の記事の、以下の部分をもとにしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7fb6d233-9ebf-401b-8a75-0dd389615795.png)

それを、[前に Claude for Desktop で試した内容（自分の過去のお試しの内容）](https://qiita.com/youtoy/items/3ef0af28b530f5c5709c)の情報と合わせるような形です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9e4542be-82aa-42d0-ab60-d74bb28141d8.png)


#### setting.json の内容の書きかえ

具体的には、以下のような内容にしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b32c0df8-799a-45a1-8363-5a049bb1b8b5.png)


[前に Claude for Desktop で試した時](https://qiita.com/youtoy/items/3ef0af28b530f5c5709c)の設定とは、少しだけ書式が違っていたりします。

```json
{
    "mcp": {
        "servers": {
            "filesystem": {
                "command": "npx",
                "args": [
                    "-y",
                    "@modelcontextprotocol/server-filesystem",
                    "/Users/【Macでのユーザー名】/Downloads/temp"
                ],
            }
        }
    }
}
```

この VS Code Insider版での設定と合わせて、上記設定に記載したパスに該当するフォルダを作っています。


### MCPサーバーの起動

その後、以下から MCPサーバーを起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ddb7c1c0-d807-43c3-ab1f-0befbf1bd049.png)



### GitHub Copilot agent mode から試す

現状、VS Code Insider版でプレビュー版で提供されている「[GitHub Copilot agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)」から試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bbdca3a0-90c2-4c13-81ed-0d7954fff724.png)


VS Code Insider版で GitHub Copilot のチャットを開き、そしてメニューを変更してエージェントに切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7a1470ae-d08c-41fd-b737-14f6b461e81e.png)



まずは「フォルダのパスは？」と雑に聞いてみました。

そうすると、前に Claude for Desktop で試した時と同様に、アクセス権・実行権限の設定に関する操作を求められました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5f4f9a44-2504-4c55-88a8-2f1e89ba34e5.png)

それを許可した後に（※ 上の画像は許可した後の状態）、フォルダの情報が出てきましたが、表示的に分かりにくいものになってしまいましたｗ


次に「GitHub Copilot agent mode の概要を、tempフォルダ内にテキストファイルで保存して。」という内容を試しました。

また、アクセス権・実行権限の設定に関する操作を求められ、それを許可すると以下のようにファイルを作成したという返答が返ってきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4bb823da-0ae7-47cf-94ed-f2df5cb8cf1e.png)

今回、MCPサーバーの設定で書いていたフォルダを Finder で開くと、以下のようにテキストファイルが作成されているのが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/09011cc5-0e54-44c3-81f6-feeecef42b33.png)

ちなみに、テキストの中身は以下の通りでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/831478b0-859d-4891-b197-76cf127869a5.png)

## おわりに

「VS Code Insider版の設定で MCPサーバーを追加し、さらに GitHub Copilot agent mode でそれを利用してみる」という内容が、意図通りに行えたのを確認できました。


## 【追記】 シンプルな自作MCPサーバーのお試し

その後、「すごくシンプルな自作MCPサーバーのお試し（[公式の TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk) を利用した MCPサーバーの実装など）」をやってみました。

https://x.com/youtoy/status/1908728284814467092
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3d3a79e9-1454-48bd-b1a3-6cb839c9fa09.png)


### 【追記2】 試した内容の記事

自作MCPサーバーを試した流れを記事に書きました。


●シンプルな自作MCPサーバーを VS Code に設定して GitHub Copilot の Agent mode で利用（Node.js で TypeScript を直接扱う） - Qiita
　https://qiita.com/youtoy/items/1d46724e40ab96607b18