VS Code で「Fetch MCP Server」を使う（GitHub Copilot agent mode で利用）

## はじめに

VS Code での GitHub Copilot agent mode で、「[modelcontextprotocol/servers/src](https://github.com/modelcontextprotocol/servers/tree/main/src
)」にある MCPサーバーを試してみるシリーズの 3つ目です。

### 過去のお試しの一部

これまで試した内容は記事に書いていて、以下がその一部です。

- 【試した MCPサーバー】 [Filesystem MCP Server](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem)
   - [VS Code の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる（安定版でも利用可能に） - Qiita](https://qiita.com/youtoy/items/adfeedeedf1309f194ce)
- 【試した MCPサーバー】 [Sequential Thinking MCP Server](https://github.com/modelcontextprotocol/servers/tree/main/src/sequentialthinking)
   - [VS Code で「Sequential Thinking MCP Server」を使う（GitHub Copilot agent mode で利用） - Qiita](https://qiita.com/youtoy/items/92cb8a0cd845043229dc)



### 今回試す MCPサーバー

今回試すのは、以下の「Fetch MCP Server」です。

●servers/src/fetch at main · modelcontextprotocol/servers
　https://github.com/modelcontextprotocol/servers/tree/main/src/fetch


## 下準備

これまでと同様、[以前の記事に書いていた VS Code での下準備](https://qiita.com/youtoy/items/adfeedeedf1309f194ce#mcp%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)を行います。具体的には以下の内容です。

- setting.json に設定を書く
- MCPサーバーを起動する

詳細は、[以前の記事の「MCP関連の設定」の部分](https://qiita.com/youtoy/items/adfeedeedf1309f194ce#mcp%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)をご参照ください。

### 今回の設定内容

setting.json に書く設定は、公式の内容を VS Code用に少し変更したものです。

#### 公式の内容

公式で、uvx・pythonコマンドを使った例は以下となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b1abe6d4-e2e0-4940-88eb-314f1bfeed6a.png)

今回、uvx を使ったやり方を試します。
そのため、uvコマンドが使えるようにしておいてください（以下は、自分が uv を導入した時に書いた記事です）。

●uv を今さらながら使い始めてみる（Python のパッケージ管理など） - Qiita
　https://qiita.com/youtoy/items/ce1e4602b09980f329dc


#### 自分が VS Code で設定した内容

VS Code で設定した内容は、以下のとおりです。

```json
{
  "mcp": {
    "servers": {
      "fetch": {
        "command": "uvx",
        "args": ["mcp-server-fetch"]
      }
    }
  }
}
```

## Fetch MCP Server の処理を試す

それでは、Fetch MCP Server を使った処理を試します。


### 用いたプロンプト1

モデルは「GPT-4o」にして、以下のプロンプトで「過去に自分が書いた Qiita の記事の要約、要約の英語版の作成」を依頼しました。

> 【プロンプト】
https://qiita.com/youtoy/items/92cb8a0cd845043229dc に書いてあることを fetch で取得して、短くまとめて、また英語版のまとめも合わせて出して


### 実行結果


実行結果は、以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/975973cd-066c-4381-a2be-53f498fcb0d4.png)

日本語版・英語版の要約を得ることができました。


### 用いたプロンプト2

さらに、多段階の情報取得が可能かを試してみます。

#### 「GPT-4o」でのお試し

モデルは「GPT-4o」にして、以下のプロンプトを用いてみました。

> 【プロンプト】
https://qiita.com/youtoy/items/92cb8a0cd845043229dc をfetchで取得して、この記事で最初に登場するQiitaの記事のURLを抽出して、さらにそのURLをfetchで取得して、2番目に取得したほうの内容の要約を出して


1度での実行完了とはならず、追加の「確認して」というプロンプトを送った後、2段目の情報を取得できました（ただし、2回目も記事内の最初の URL の内容の要約を出す方向になっていましたが）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a60184d2-03e6-4487-a05c-1d4c7a76c603.png)


#### 「Claude 3.7 Sonnet」でのお試し

次に同じプロンプトで、モデルは「[Claude 3.7 Sonnet](https://www.anthropic.com/claude/sonnet)」に変えて試してみました。


今度は、2回目の fetch も自動で進めてくれて、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f57b8f88-2502-423a-8440-87cf0f06965e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2f267173-1c10-42ef-8b19-35e6f7fcf9d5.png)


2回目で取得した記事の以下の部分が回答に登場していたりと、異なる 2つの記事の両方の内容が取得できていることが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5498345f-2cf4-43dd-abef-1f5a22d6d1c4.png)


#### 「GPT-4o」でのお試し 2回目

先ほど「GPT-4o」を用いてうまくいかなかったものは、再現するものか、何度か試すとうまくいくこともあるのかが気になって、「GPT-4o」を用いたお試しを再度やってみました。

結果は以下のとおりで、今回は自動で 2回目の fetch も実行してくれました（ただし、記事内で登場している 2つ目の Qiita の記事を取得した形になりました ← プロンプトのせいかも？）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6a71f15e-d3ba-498d-8d97-c52883bf936d.png)


## おわりに

VS Code で「Fetch MCP Server」を使った Qiitaの記事の取得と、取得した内容の要約を試しました。
また、取得した記事内の URL を使って、さらに URL にアクセスした内容取得を行ってもらうことも試しました。

モデルによって意図したとおりの挙動とならないこともありましたが、概ね想定通りの処理が行われた結果となりました。

MCPサーバーで試してないものが他にも色々あるので、さらにお試しを続けられればと思います。