VS Code で使っていたシンプルな自作MCPサーバーを Claude for Desktop で使う（Node.js ＋ TypeScript SDK）

## はじめに

以下の記事を書いた時に作った、自作MCPサーバーを Claude for Desktop で使ってみるという話です。

●シンプルな自作MCPサーバーを VS Code に設定して GitHub Copilot の Agent mode で利用（Node.js で TypeScript を直接扱う） - Qiita
　https://qiita.com/youtoy/items/1d46724e40ab96607b18

### 上記の記事内で実装していた自作MCPサーバー

上記の記事内で実装していた自作MCPサーバーは、[公式の TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk) で作ったものです。コードは以下のように、最小限のシンプルなものにしていました。

```typescript:app.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "Demo",
  version: "1.0.0",
});

server.tool(
  "add_test",
  "与えられた数値の足し算をする（さらに10を足す）",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b + 10) }],
  })
);

const transport = new StdioServerTransport();
await server.connect(transport);
```

これを流用しつつ、Claude for Desktop との組み合わせを試します。


## 過去にやっていた 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
●今になって Claude for Desktop で MCP に入門してみた（Claude は Free plan） - Qiita
　https://qiita.com/youtoy/items/3ef0af28b530f5c5709c

### Claude for Desktop で MCPサーバーを使うための設定

上記のお試しをした時に、Claude for Desktop で MCPサーバーを使うための設定を行っていました。

具体的には、後から掲載した 2つの記事のうち、[2つ目の記事の「Claude for Desktop の設定を書きかえる」](https://qiita.com/youtoy/items/3ef0af28b530f5c5709c#claude-for-desktop-%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%8B%E3%81%88%E3%82%8B)」という部分で書いた内容です。

#### Claude for Desktop での下準備

ざっくりと書くと、以下のフォルダにある「claude_desktop_config.json」の中身を書きかえれば OK です（※ 以下に直接アクセスしても良いですが、他に Claude for Desktop で GUI操作を行って以下のフォルダを開く方法もあります）。

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

自分の Mac の環境では、前に使った以下の設定が残っていました。

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

## 実際に試す

それでは、自作MCPサーバーを Claude for Desktop で使ってみます。

### VS Code での設定

冒頭の記事内で、VS Code で自作MCPサーバーを使うために設定していた内容は以下でした。

```json: VS Code での設定
{
  "mcp": {
    "servers": {
      "my-mcp-server": {
        "command": "node",
        "args": ["/【ファイルを置いたフォルダの絶対パス】/app.ts"]
      }
    }
  }
}
```

これを、Claude for Desktop の設定に加えます。
書式が少し異なるようなので、その対応を行いつつ進めます。

### Claude for Desktop での設定

Claude for Desktop での設定は以下としました。

```json: claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/【Macでのユーザー名】/Downloads/mcp"
      ]
    },
    "my-mcp-server": {
      "command": "node",
      "args": ["/【ファイルを置いたフォルダの絶対パス】/app.ts"]
    }
  }
}
```

上記の設定をしつつ `/Users/【Macでのユーザー名】/Downloads/mcp` というフォルダも作成しておきます。

### Claude for Desktop で自作MCPサーバーを使ったやりとり

Claude for Desktop を起動します（既に起動させていた場合は再起動します）。

アプリ起動後、以下のように利用可能なツールを確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/34eb9391-b4e0-4eed-a526-b8ccd1b41063.png)

Filesystem MCP Server関連で 11個と、今回追加した自作MCPサーバー関連で 1個のツールが利用可能な状態になっています。

また以下のように、自作MCPサーバーのツールが使えることも表示から確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c3080421-d846-40d8-a699-ca51e9fef227.png)

その後、「ツールを使って1と2を足して」というプロンプトを入力してみました。そうすると、以下のように自作MCPサーバーのツールを使う許可を求められました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a5e1ee05-aa7f-4e24-877a-ea9646dab4b5.png)

ツールの利用を許可すると、以下のように「1と2を足すと3になりますが、この関数は自動的に10を追加するようになっているため、結果は13になりました。」という結果を得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1c4c8916-c0ab-426f-bdce-02e523cd22ae.png)

#### 動作中の様子の動画

動作中の様子の動画も掲載してみます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/JOR1lR6kc_g?si=zN-ICMMce4A1HoGs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

VS Code で試していたシンプルな自作MCPサーバーを、Claude for Desktop でも使うことができました。