Claude DesktopのMCPサーバーで遊んでみた

はじめに

本記事では、Claude Desktop上でMCPサーバーを使って遊んでみた結果、設定方法、そして少しつまずいたポイントについて解説します。

MCPサーバーとは？

MCPサーバーとは「Model Context Protocol サーバー」の略で、Anthropic社が提唱したオープンソースのプロトコルです。簡単に言うと、「AIにツールを持たせるための標準プロトコル」で、AIがファイル操作やAPI呼び出しなど様々な機能を外部ツールとして取り込めるようにするものです。

今回はClaude Desktopが提供しているMCPサーバーを利用します。 Claude DesktopがHubの役割となり、連携したサービスを呼び出すことが可能になります。

まずは準備

詳しい部分は少し割愛してまずは利用してMCPサーバーを体験しましょう！

最低限準備するもの

• Claude Desktop
• node(v23.11.0←私の環境)

まずはこちらからClaude Desktopのダウンロードをしましょう

下記のコードでnodeのバージョンが出ない方はこちらが参考資料になります。 ※nodeインストールの手法は複数ありますのでご自身の環境に合ったものを採用してください。(本記事はvoltaを利用したもの)

node -v

v23.11.0

MCPサーバーの設定

ここまで準備されたらまずは公式ドキュメントのQuiqStartを参考に利用してみましょう！

まずはClaudeDesktopを開発者モードをONにしましょう

私はすでにONにしているので別画面になりますが同じ画面から開発者モードをONにすることができます。

私たちが設定するのはclaude_desktop_config.jsonになります。

このように書き換えましょう! こちらは公式ドキュメントが用意しているjsonになります。usernameになっているのでこちらはご自身のpathに変更してください

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/Users/username/Downloads"
      ]
    }
  }
}

これで準備OKです。 Claudeを再起動させて動作を確認しましょう。

エラー出てる。。。

ログを見るとspawn npx ENOENTが出ていました。npxの部分をフルパスにすると治るケースがあるみたいです。 https://qiita.com/Skyryo/items/c312ad289697a8795d38

下記のコマンドでnpxがどこにあるのかわかるはずです。

which npx

これで完了です。。

実行してみよう

ここまできたらフロント側から呼び出すだけです！

MCPサーバーについて記事をまとめて.txtとして保存してという指示をしたら実際にまとめた記事を作成してくれました！

これはすごい。。。

他のものも設定してみる！

https://zenn.dev/takna/articles/mcp-server-tutorial-01-install

こちらの記事に複数アプリに接続する方法が記載されているのでこちらを参考に設定を行いましょう！

結論下記のような設定になりました。複数設定するならこれになるのかな？

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "<path-to-directory-1>",
        "<path-to-directory-2>"
      ]
    },
    "notionApi": {
      "command": "npx",
      "args": [
        "-y",
        "@notionhq/notion-mcp-server"
      ],
      "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer YOUR_NOTION_TOKEN\", \"Notion-Version\": \"2022-06-28\"}"
      }
    },
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
      }
    },
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_GITHUB_TOKEN"
      }
    }
  }
}

まとめ(感想)

思ったよりも設定が複雑ではなく楽しく設定できました。 それぞれのアプリを実行してみた感想なんかをまとめます。

Figma

Figmaのデザインベースにコーディングをしてくれました。。。 思っていたよりも精度は高くびっくりです。 しかし、Figmaのdevモードと比較するとかなり見劣りするかなと思いますがLP作成などの叩き台としては申し分なしだと思いました。

Notion

Notionに記載している内容などを要約等することができました。

→NotionAIには劣るが別途で契約しなくても。。。？

Github

issueの作成、PRのレビューができました。

コーディングというより、業務効率UPに貢献できそうです！

他にもSlack、Asana,Googleサービス系も提供しているようなのでがっつりそちらに舵を切ったほうが便利そうですね!

参考資料

• https://qiita.com/mr_noppo/items/d3bca0ad2a5d4bd9fcc7(nodeインストール)
• https://zenn.dev/tomo0108/articles/6b472b4c9cacfa(mcpサーバーとは？)
• https://note.com/k1mu/n/n726a4a8c7685(mcpサーバーとは？)
• https://zenn.dev/takna/articles/mcp-server-tutorial-01-install(導入事例複数)
• https://modelcontextprotocol.io/introduction(公式ドキュメント)