はじめに
以下の記事を書いた時に作った、自作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"]
}
}
}
上記の設定をしつつ /Users/【Macでのユーザー名】/Downloads/mcp というフォルダも作成しておきます。
Claude for Desktop で自作MCPサーバーを使ったやりとり
Claude for Desktop を起動します（既に起動させていた場合は再起動します）。
アプリ起動後、以下のように利用可能なツールを確認できました。
Filesystem MCP Server関連で 11個と、今回追加した自作MCPサーバー関連で 1個のツールが利用可能な状態になっています。
また以下のように、自作MCPサーバーのツールが使えることも表示から確認できました。
その後、「ツールを使って1と2を足して」というプロンプトを入力してみました。そうすると、以下のように自作MCPサーバーのツールを使う許可を求められました。
ツールの利用を許可すると、以下のように「1と2を足すと3になりますが、この関数は自動的に10を追加するようになっているため、結果は13になりました。」という結果を得られました。
動作中の様子の動画
動作中の様子の動画も掲載してみます。
VS Code で試していたシンプルな自作MCPサーバーを、Claude for Desktop でも使うことができました。
Views: 0
