Claude Desktopを試してみた

# 背景・目的
以前、下記の通りMCPについて基本を整理しました。今回はClaude Desktopでクライアント側でMCPの動作を確認してみます

https://qiita.com/zumax/items/95f25d05fe3b9f4da990

# まとめ
下記にFilesystem MCP Serverの特徴をまとめました

|特徴|説明|
|:--|:--|
|概要|ファイルシステム操作用のMCPを実装する Node.js サーバー|
|機能|・Read/write files<BR>・Create/list/delete directories<BR>・Move files/directories<BR>・Search files<BR>・Get file metadata|
|License|MITライセンス|

# 概要
## アーキテクチャ
以前まとめた下記の通り、MCPはMCPホスト、MCPサーバ、データソースの3層で構成されています。

https://qiita.com/zumax/items/95f25d05fe3b9f4da990#general-architecture

- MCPホストは、Claude DespktopやIDEなどMCPプロトコルを通じてデータにアクセスするプログラム、AIツール
    - MCPクライアントは、MCPサーバと1:1接続するプログラム
    - LLMは、MCPホスト側に存在します
- MCPサーバは、MCPプロトコルを通じて機能を提供するプログラム
- データソースは、MCPサーバよりアクセス可能なローカルファイル、社内DBは、クラウド上のREST APIなど

## Filesystem MCP Server

下記について整理します。

https://modelcontextprotocol.io/quickstart/user

- ファイルシステム操作用のMCPを実装する Node.js サーバー
- 下記の機能を有します
    - Read/write files
    - Create/list/delete directories
    - Move files/directories
    - Search files
    - Get file metadata

### Usage with Claude Desktop
- claude_desktop_config.json に以下を追加します
- サンドボックス化されたディレクトリを /projects にマウントすることで、サーバーに提供できる
- ro フラグを追加すると、そのディレクトリはサーバーによって読み取り専用になる
- Docker

```json
{
  "mcpServers": {
    "filesystem": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--mount", "type=bind,src=/Users/username/Desktop,dst=/projects/Desktop",
        "--mount", "type=bind,src=/path/to/other/allowed/dir,dst=/projects/other/allowed/dir,ro",
        "--mount", "type=bind,src=/path/to/file.txt,dst=/projects/path/to/file.txt",
        "mcp/filesystem",
        "/projects"
      ]
    }
  }
}
```

- NPX
```json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    }
  }
}
```

### License
MITラインセンス



# 実践
## Claude Desktopで試す
下記を元に試します。
https://modelcontextprotocol.io/quickstart/user


下記を使用します。

https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem

下記の構成になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/b4ba5e37-5059-495c-9e32-9a6a5e258806.png)



### 事前準備
1. 事前に[Claude Desktop](https://modelcontextprotocol.io/quickstart/user)をダウンロードしておきます

1. nodeにパスを通します
    ```bash
    % which node
    /usr/local/opt/node@20/bin/node
    % 
    % sudo ln -s /usr/local/opt/node@20/bin/node /usr/local/bin/node
    ```

### セットアップ

1. Claude Desktopを開きます
1. Claude＞設定をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/e3eb418d-ade9-489b-b949-42935de89c6e.png)

1. 「開発者」＞「構成を編集」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/dcf8972b-9143-47b7-b72a-260edd8ef07b.png)

1. claude_desktop_config.jsonが作成されます
1. 下記を入力します
    ```json
    {
      "mcpServers": {
        "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "/Users/username/Desktop",
            "/path/to/other/allowed/dir"
          ]
        }
      }
    }
    ```
1. Claude Desktopを再起動します
1. 下記のように設定されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/5a9d79a3-e57f-4868-9eb9-cba0421e5e8c.png)

1. 「filesystem」が追加されていました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/c33b8cf1-9b88-4dba-9cdb-323f58486de2.png)

1. 「filesystem」をクリックすると、有効/無効が選択できます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/196152ac-8141-416d-9af0-f6a532e252c5.png)

1. 次を「デスクトップに、claude_test.txtファイルを作成し、今日の日付（JST）を入力して」とプロンプトを入力します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/c065912c-02e2-401b-930d-06a26c1404cf.png)

1. ポップアップが表示されるので、許可します（どちらでも問題ありません。）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/38621983-992f-444c-be6f-efa52f8b8ead.png)

1. できました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a5c60d23-5126-467f-904e-669100ae2038.png)

1. ファイルもできました。（日時を指定すればよかったです）
    ```bash
    % ls -l claude_test.txt 
    -rw-r--r--@ 1 XXXX  XXXX  25  5 31 17:35 claude_test.txt
    % cat claude_test.txt 
    2025年5月31日（土）
    % 
    ```

# 考察
今回は、Claude Desktopを試してみました。次回はMCPさーばをためしてみｍ

# 参考

https://qiita.com/zumax/items/95f25d05fe3b9f4da990

https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem