TypeScript版の FastMCP を少し試す（自作MCPサーバー）

:::note info
もう少し文章を足せば完成、という状態だった記事を、しばらく寝かせてしまっていたので、画面内のキャプチャ画像が少しだけ古いものが混じっているかもしれません（実施した内容・機能には問題は生じないかと思います ← 一部の内容については、記事の最後の部分で補足をしました）
:::

## はじめに

MCP に関するお試しとして、MCPサーバーのクイックスタートに手をつけてみたり、基本的な機能を触ってみたりしています。

- [VS Code の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる（安定版でも利用可能に） - Qiita](https://qiita.com/youtoy/items/adfeedeedf1309f194ce)
- [Claude for Desktop での「Filesystem MCP Server」を使ったファイル操作関連の簡単なお試し - Qiita](https://qiita.com/youtoy/items/87ce4a734cdc0b2de4fd)
- [Googleさんの「Agent Development Kit（ADK）」を使ったエージェント実装を試してみる（公式のクイックスタートの手順 ＋α） - Qiita](https://qiita.com/youtoy/items/1d129272bd2bebc7c0f5)
- [MCP を OpenAI Agents SDK で軽く試してみた時のメモ： OpenAI の SDK で エージェント ＋ MCP - Qiita](https://qiita.com/youtoy/items/13f5038ef45ce6763926)
- [AIエージェント で MCP： OpenAI Agents SDK を使ったお試し【その2】 - Qiita](https://qiita.com/youtoy/items/5f4e477500c23c7dfd56)


### 自作MCPサーバー

その中で公式の TypeScript SDK を使った自作MCPサーバーというのも試していました。

- [シンプルな自作MCPサーバーを VS Code に設定して GitHub Copilot の Agent mode で利用（Node.js で TypeScript を直接扱う） - Qiita](https://qiita.com/youtoy/items/1d46724e40ab96607b18)
- [VS Code で使っていたシンプルな自作MCPサーバーを Claude for Desktop で使う（Node.js ＋ TypeScript SDK） - Qiita](https://qiita.com/youtoy/items/01f8918b378c51989173)

そのような中、MCPサーバーの実装を手軽に行える「FastMCP」というのを見かけて気になっていたので、それを試したという話です。

以下のように、TypeScript版・Python版があるようですが、自分は TypeScript版を試しました。


#### FastMCP（TypeScript版） 

- 【TypeScript版】punkpeye / fastmcp
   - https://github.com/punkpeye/fastmcp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7a7a8736-476c-4da6-8a4a-4226b37f9d60.png)


#### FastMCP（Python版） 

- 【Python版】jlowin/fastmcp: The fast, Pythonic way to build Model Context Protocol servers 🚀
   - https://github.com/jlowin/fastmcp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9016b926-32d2-46c4-9091-6c2e39fd25c5.png)


## 実際に試してみる

実際に試していきます。

### パッケージのインストールとクイックスタート

パッケージのインストールは、[fastmcp](https://www.npmjs.com/package/fastmcp) のみの指定で良いようです。

```zsh
npm install fastmcp
```

また、[Quickstart](https://github.com/punkpeye/fastmcp?tab=readme-ov-file#quickstart) には、以下のコードが書かれていました。

```typescript
import { FastMCP } from "fastmcp";
import { z } from "zod";supports Standard Schema

const server = new FastMCP({
  name: "My Server",
  version: "1.0.0",
});

server.addTool({
  name: "add",
  description: "Add two numbers",
  parameters: z.object({
    a: z.number(),
    b: z.number(),
  }),
  execute: async (args) => {
    return String(args.a + args.b);
  },
});

server.start({
  transportType: "stdio",
});
```

ひとまず、計算をする処理に少しだけ手を加えた以下で試すことにします。

```typescript:app.ts
import { FastMCP } from "fastmcp";
import { z } from "zod";supports Standard Schema

const server = new FastMCP({
  name: "My Server",
  version: "1.0.0",
});

server.addTool({
  name: "add",
  description: "2つの数を足して、さらに5を足す",
  parameters: z.object({
    a: z.number(),
    b: z.number(),
  }),
  execute: async (args) => {
    return String(args.a + args.b + 5);
  },
});

server.start({
  transportType: "stdio",
});
```


#### 公式の MCP の TypeScript SDK を使った場合との比較

[前に MCPサーバーを自作した時、公式の MCP の TypeScript SDK を使って開発した場合](https://qiita.com/youtoy/items/1d46724e40ab96607b18)と比較してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/479dffc3-5f4e-467a-a4b7-bfe3ced58838.png)

以前と今回の実装内容がシンプルすぎて、今のところ差分がほとんどない状況でした。



### Claude for Desktop から使う

#### 設定

あとは Claude for Desktop から利用してみます。

FAQ の部分を見ると、設定が書いてありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d14efeb9-41e4-4031-b0fc-7fb48b3d3e7b.png)

以前、[自分が TypeScript SDK で試した時に、TypeScript のコードを Node.js で直接実行する形で扱えた](https://qiita.com/youtoy/items/01f8918b378c51989173#claude-for-desktop-%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A)ので、今回もそのやり方を用いることにします。

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

#### 動作確認

準備ができたので、Claude for Desktop を使った動作確認をやってみます。

とりあえず、ツールが利用可能になっているかを GUI上で確認してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/060fefdb-62ed-4be8-a53e-5aa07e72715e.png)


問題なく使えそうだったので、「ツールで1と2を足して」というプロンプトを試しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7f54b40f-2171-4069-a427-44cd10b091ed.png)


上記のツール利用を許可する操作をして、以下の結果が得られました。
MCPサーバーを使った処理を、うまく実行できたようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a33e7538-f73b-4529-a879-c1e25839a049.png)


## おわりに

今回、前に使った公式の MCP の TypeScript SDK ではなく、TypeScript版の FastMCP を使って MCPサーバーの自作を試しました。

簡単な MCPサーバーの自作だと、FastMCP を使った効果があらわれなかったので、さらに FastMCP の詳細を見てみたり、さらなる処理の実装を試せればと思います。


### その他

その他、今回の内容を進めている中で見かけて気になったものをメモしてみます。

[FastMCP の Showcase](https://github.com/punkpeye/fastmcp?tab=readme-ov-file#showcase)  の情報になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/46f3272f-f5e3-4e89-8b4e-c6d853ec3460.png)


### 【追記】 記事公開時点での GUI

記事公開時点で、記事に書いた内容を試した際、見た目が変わっていた部分を少しキャプチャしてみました。

例えば、自作MCPサーバーの実行時の許可の画面は、今現在だと以下になっていました（※「リクエスト」の部分は、デフォルトでは閉じられていたのを開いた状態にしています）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/70680c32-ffbc-45bf-aa09-3ceacea82f8e.png)

また、処理実行後のチャット画面は以下になりました（※「add」の部分は、デフォルトでは閉じられていたのを開いた状態にしています）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3324492b-21d3-4c1a-b616-625c4829297c.png)


#### MCPサーバーに関する変更

また新規チャット画面で、利用可能な MCPサーバーを確認できる画面でも変更が入っています。これは、MCPサーバーの機能の ON/OFF ができるようになったことによるものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/65edf6d2-4fbc-431c-bb40-80c5f5a90463.png)

「my-mcp-server」を選ぶと、以下のように「add」の機能の ON/OFF が選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2ae09336-736c-489e-8d77-d288662e87cd.png)

なお、複数の機能を実装している場合、全体の ON/OFF と個々の機能の ON/OFF が行えるようになっています。

例えば「[Filesystem MCP Server（filesystem）](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem)」のほうを見てみると、以下のような ON/OFF の設定を行えるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f920964a-b50d-4bd6-84af-a34767eae571.png)