今になって Claude for Desktop で MCP に入門してみた（Claude は Free plan）

情報を追いかけつつも試してはいなかった Claude の「MCP（Model Context Protocol）」を、公式の説明を見つつ軽く試してみました。

●For Claude Desktop Users - Model Context Protocol
 https://modelcontextprotocol.io/quickstart/user

![2025-01-10_23-35-11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/88016ff5-5236-9739-a208-4201e98a3778.jpeg)

Claude は Free plan で使っている状態で進めています。

![2025-01-11_00-21-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/055fa70f-d1a9-8fc1-2bb6-8ad9fb27d183.jpeg)

## 実際に試していく
[上で掲載していた公式の手順](https://modelcontextprotocol.io/quickstart/user)を見つつ試していきます。

### 環境の準備
まず前提として、以下を扱えるようにしておきます。

- [Claude for Desktop](https://claude.ai/download)
- Node.js（npxコマンド）

### Claude for Desktop の設定を書きかえる
公式の情報を見ると、Claude for Desktop の設定を書きかえる話が出てきます。

#### claude_desktop_config.json を開くまで
今回、Windowsアプリで試していますが、アプリ左上から設定を開いていきます。

![2025-01-10_23-41-18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/46456b28-3c72-492f-8f17-3ae954e49ce3.jpeg)

ショートカットキーで「Ctrl ＋ ,（カンマ）」でも OK です。

開いたメニュー左側の「Developer」を選び、その後に「Edit Config」を選択してフォルダを開きます（※ Windows・Mac では、それぞれ以下のフォルダが開きます）。

Windows: %APPDATA%\Claude\
macOS: ~/Library/Application Support/Claude/

![2025-01-10_23-46-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eaf3801e-fbed-58b3-8d5b-ab148c4713cd.jpeg)

そして、フォルダ内の「claude_desktop_config.json」を開きます（※ デフォルトでは、以下の内容になっていました）。

```json
{
  "globalShortcut": ""
}
```

#### claude_desktop_config.json を書きかえる
claude_desktop_config.json の内容を書きかえます。

公式の Windows用の設定は以下のものが例示されています。

![2025-01-10_23-47-20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c409b793-be5f-6184-fb9d-6c79163dcc88.jpeg)

今回のお試しでは、ダウンロードフォルダ内に「mcp」フォルダを仮で作り、以下のようにフォルダ指定をピンポイントにしてみました。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\【Windowsでの自分のユーザー名】\\Downloads\\mcp"
      ]
    }
  }
}
```

Windows での自分のユーザー名を指定するところは、忘れず書きかえておきましょう。

そして、上記を記載した後には Claude for Desktop を再起動します。

#### アプリ再起動後
アプリを再起動した後、上の手順で「アプリ左上から開いていた設定（ショートカットキーでの操作だと Ctrl ＋ , を押下）」を開いてみます。

![2025-01-11_00-00-19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/95d55f6c-8033-258d-4c40-d1da4185cb01.jpeg)

そうすると、このように裏で npx コマンドが実行されたということが分かるような表示になっていました。

#### プロンプトを入力して試す
「Claudeの説明文を書いて、mcpフォルダ内にテキストファイルで保存して」というプロンプトを入力し、実行してみます。

実行後に数回、以下のように権限を求める表示が出るので、許可する操作を行いました。

![2025-01-11_00-05-57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/85099b11-4f28-636e-7b40-c75e21878624.jpeg)

以下が、処理完了後の Claude for Desktop の表示です。

![2025-01-11_00-11-39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/38686a35-0c64-0f89-d4b2-de80a6c32c32.jpeg)

処理が完了した後、今回用に作っていた mcpフォルダ内を見てみると、テキストファイルが １つ生成されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0606d5aa-bca6-8a8d-489c-5172eb7dc0ca.png)

テキストファイルを開いてみると、以下の内容が書き込まれていました。

![2025-01-11_00-10-30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/18b6d811-50d9-2465-1411-fd6717d89716.jpeg)

```
Claudeについて

Claudeは、Anthropic社が開発した高度なAIアシスタントです。自然な対話を通じて、以下のような幅広いタスクをサポートします：

1. 分析と問題解決
- データ分析
- 数学的計算
- ロジカルな思考を要する問題の解決

2. プログラミングサポート
- コードの作成と修正
- デバッグの支援
- プログラミング概念の説明

3. 文章作成と編集
- レポート・論文の作成
- 文章の校正・編集
- クリエイティブな文章作成

4. 教育・学習支援
- 概念の説明
- 学習方法のアドバイス
- 質問への回答

5. その他の機能
- 画像解析
- データの可視化
- プレゼンテーション資料の作成支援

特徴：
- 複数の言語に対応
- 倫理的な判断に基づく応答
- 正確で信頼性の高い情報提供
- 文脈を理解した自然な対話
- ステップバイステップの説明能力

Claudeは常に学習者の立場に立ち、わかりやすい説明を心がけています。また、不確かな情報については、その旨を明確に伝え、より信頼できる情報源への参照を促します。
```

## 【追記】Mac用
上記の Windows用 を試した後、Mac でも同じことをやってみました。

ほとんどの手順が重複するので、差分の一部のみ掲載します。

### 設定を開く動線
設定を開く動線は、Mac の場合は画面左上からになります。

![2025-01-11_00-33-19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/95031120-3957-d53d-353d-7cd221f9cd5e.jpeg)

### claude_desktop_config.json の内容
claude_desktop_config.json の内容は、パスの指定部分のみ微妙な差異があります。

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

```

### ファイル出力後
ファイル出力後のアプリ上の表示と、ローカルのフォルダ内容状態は以下のとおりです。

![2025-01-11_00-39-17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/54a77853-d7ad-b74c-b8f3-a22943659052.jpeg)

![2025-01-11_00-40-33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c913df2a-b421-5b05-4930-cd84d4ba2d49.jpeg)

### 出力された内容
ファイルとして出力されたテキストの内容は、このようになっていました。

![2025-01-11_00-41-12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b5293210-7279-39a4-97d5-2d9814a3c5c8.jpeg)


## 【追記】

VS Code Insider版で MCPサーバーを追加できるようになったみたいで、それを試してみて、さらに GitHub Copilot agent mode で利用してみるというのをやってみました。

●VS Code Insider版の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる - Qiita
　https://qiita.com/youtoy/items/adfeedeedf1309f194ce

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