MCPサーバーをClaude Desktopに読み込めない問題を解決した

https://qiita.com/kaisumi/items/3c9ffc40d008637834df

↑の記事で公式チュートリアルのMCPサーバーも読み込めなかったので調査した（以下がエラー画面）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/e50b27c9-389f-44dd-a366-63c9dbd4bc1b.png)

## 結論から
Node Version Managerを使っていたので、npxを見つけられなかった模様。
なので、zsh上で`which npx`をして出力される文字列を`claude_desktop_config.json`の`command`に書き込む必要があった。（私の場合は`nodenv`を使用していたので、以下のように修正した）
```diff_json
{
  "mcpServers": {
    "filesystem": {
-      "command": "npx",
+      "command": "/Users/username/.nodenv/shims/npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/Users/username/Downloads"
      ]
    }
  }
}
```
## 調査の過程
https://modelcontextprotocol.io/docs/tools/debugging

↑に従って進めた。
### Nodeバージョン調査
![node_version.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/1294edfc-4e6b-48d2-ab24-ed35fa4b26fc.jpeg)

### MCP Inspector
ずっと気になっていた調査用ツールをいよいよ使ってみた

https://modelcontextprotocol.io/docs/tools/inspector

![open_inspector.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/f229c566-3547-4dec-8867-80c5f527e77f.jpeg)

`Connect`してみると、特にエラーもなく接続できた。

![connect_mcp_server.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/e70b6d24-2d8b-4f4e-9a24-003b600126c2.jpeg)

![スクリーンショット 2025-04-22 9.01.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/96eddab8-725b-4157-b849-fce441bff52c.png)

`List Tools`からツール一覧が表示され、各機能を使えるようになっている。

![スクリーンショット 2025-04-22 9.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/e7fa1a9f-2f3c-4d86-b49a-e620fd095880.png)

問題なく使えているようだ。

### Claude Desktopでデバッグする
https://modelcontextprotocol.io/docs/tools/debugging#debugging-in-claude-desktop

#### Checking server status

該当のアイコンが表示されなかったので、ログを見てみることにする。

#### Viewing logs
`mcp-server-filesystem.log`の中身を見てみる
```
2025-04-22T00:15:39.736Z [filesystem] [info] Initializing server...
2025-04-22T00:15:39.772Z [filesystem] [info] Server started and connected successfully
2025-04-22T00:15:39.774Z [filesystem] [info] Message from client: {"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"claude-ai","version":"0.1.0"}},"jsonrpc":"2.0","id":0}
env: node: No such file or directory
2025-04-22T00:15:39.779Z [filesystem] [info] Server transport closed
2025-04-22T00:15:39.779Z [filesystem] [info] Client transport closed
2025-04-22T00:15:39.779Z [filesystem] [info] Server transport closed unexpectedly, this is likely due to the process exiting early. If you are developing this MCP server you can add output to stderr (i.e. `console.error('...')` in JavaScript, `print('...', file=sys.stderr)` in python) and it will appear in this log.
2025-04-22T00:15:39.779Z [filesystem] [error] Server disconnected. For troubleshooting guidance, please visit our [debugging documentation](https://modelcontextprotocol.io/docs/tools/debugging) {"context":"connection"}
2025-04-22T00:15:39.780Z [filesystem] [info] Client transport closed
```
`env: node: No such file or directory`これが怪しい。

Claudeに聞いてみたところ、`npx`の場所を見つけられていない可能性があるとのこと。
`which node`した結果を`command`に指定してClaude Desktopを再起動したら読み込まれていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/7368bae8-1de8-49f6-8d01-31c5d858870a.png)

## 動作確認
https://modelcontextprotocol.io/quickstart/user#4-try-it-out
### Can you write a poem and save it to my desktop?
![スクリーンショット 2025-04-22 9.55.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/47a22478-f8ef-4de7-891e-05ea125e1a24.png)
確認画面が出るのはありがたい。
![スクリーンショット 2025-04-22 9.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/6a1ee18d-3a88-41de-97c6-3d72d082fc78.png)
テキストファイルが出力された模様。

![スクリーンショット 2025-04-22 9.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/bad898b3-e335-4c32-8ad6-f5fec3d303e1.png)
ポエムができた。

### What are some work-related files in my downloads folder?
![スクリーンショット 2025-04-22 9.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/2c57af07-4749-4ae6-a450-8b32a0c7b5d9.png)

### Can you take all the images on my desktop and move them to a new folder called “Images”? 
![スクリーンショット 2025-04-22 10.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/5add8c7e-7e45-45e7-a28b-23c69898f2eb.png)
一つずつツールを呼び出して実現して行っている様子。
![スクリーンショット 2025-04-22 10.03.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/ec548218-0409-454e-9cca-f5a793808adf.png)
![スクリーンショット 2025-04-22 10.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/97070ef4-38a6-4097-a208-9fb9d3f7ee06.png)
`Desktop`フォルダ内のすべての画像ファイルが`Images`フォルダに移動された。

## まとめ
チュートリアルのMCPサーバーをClaude Desktopに読み込めないのはさすがに凹んでいたので、解決できてよかった。InspectorはMCPサーバーを自作した際にもそのでき栄えを簡単にチェックできるので、今後も活用したい。