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

Last updated at 2025-04-08Posted at 2025-04-08

はじめに

以下の記事を書いた時に作った、自作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 で作ったものです。コードは以下のように、最小限のシンプルなものにしていました。

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 を使ったお試しでした。

●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 の設定を書きかえる」」という部分で書いた内容です。

Claude for Desktop での下準備

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

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

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

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サーバーを使うために設定していた内容は以下でした。

VS Code での設定

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

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

Claude for Desktop での設定

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

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"]
    }
  }
}