短歌投稿サイトUtakataのMCPサーバーを作ってみた

最近Web開発業界で、「MCPサーバー」というものが注目されている。自社で管理している任意の情報システムと生成AIツールを連携できるような仕組みとして、活用の可能性が模索されているようだ。

簡単に実装できそうな様子があったので、まずはプライベートで実験してみたいと思って、自作の短歌投稿サイトUtakataと連携するMCPサーバーを作ってみた。

MCPサーバーの構築に興味はあるが、やり方がよく分からないような方の参考になるように、作り方を紹介してみる。

今回やったこと

UtakataのRailsアプリケーションに、ユーザーごとの短歌の一覧をJSONの配列で返すAPIを作成する
ローカル環境で動作するMCPサーバーを構築し、ユーザーごとの短歌の一覧を取得するToolを作成する
Claude DesktopにMCPサーバーを登録し、AIとのチャットでユーザーの投稿短歌についてやりとりできるようにする

GitHub リポジトリ

今回作ってみたMCPサーバーの実装を、動作確認できる形でGitHubに公開している。

Utakataにユーザーごとの短歌一覧APIを作成

今回のユースケースでは、MCPサーバーから、連携するアプリケーションのAPIをリクエストして情報を取得する仕組みだ。

そのためのAPIをまず用意する必要がある。以下のようなJSONの配列を返すAPIを作ってみた。

GET /api/users/:user_id/posts

[
  {
    "id": 25401,
    "published_at": "2021-05-15T17:39:00.000+09:00",
    "tanka_text": "片耳にマスクをかけて池の面をながれる風に呼応している",
    "likes_count": 32
  },
  {
    "id": 23563,
    "published_at": "2021-03-29T13:45:16.888+09:00",
    "tanka_text": "人びとの残りをもとめ散る花の上を歩いてゆく鳩の群れ",
    "likes_count": 17
  }
]

RailsでのAPIの実装方法の紹介は今回の本筋でないので省略するが、興味がある方はGitHubに公開されているUtakataの実装を参考にしてみて欲しい。

MCPサーバーの実装

公式のSDKが用意されているので、これを使って開発するのがお手軽だ。現状5種類の言語に対応されているようで、今回はtypescript-sdkを用いて、Node.js環境で動作するように実装する。

SDKのREADMEで、Resources, Tools, Promptsという3つの概念が紹介されていて、使い分けの理解が難しい印象があるが、試行錯誤してみて、Claude Desktopと連携して使う用途では、Toolとして作っておくのがお手軽に実行できて良さそうだった。

index.jsのファイルを作成し、以下のように、 fetch-user-tanka のToolを実装する。

Node.jsのfetchでUtakataのAPIから情報取得し、JSONの配列を整形して以下のようなテキストをアウトプットする仕組みだ。

# ユーザーID: 5 の短歌一覧（最新順）

- 片耳にマスクをかけて池の面をながれる風に呼応している（投稿日時: 2021-05-15T17:39:00.000+09:00、いいね数: 32）
- 人びとの残りをもとめ散る花の上を歩いてゆく鳩の群れ（投稿日時: 2021-03-29T13:45:16.888+09:00、いいね数: 17）

MCPサーバーの動作確認

MCP Inspectorという便利なツールが公式で用意されていて、ローカルで動作確認できる。

npx @modelcontextprotocol/inspector node index.js

Claude Desktopとの連携

MCPサーバーの動作確認ができたら、あとは生成AIツールと連携して使ってみるだけだ。MCPサーバーとの連携に対応している任意のツールと連携可能だが、今回はClaude Desktopと連携して使ってみる。この記事ではMacの環境で確認した結果を紹介する。

まずは、Claudeのデスクトップアプリケーションをインストールする。

公式ドキュメントに記載の方法を参考に連携設定する。Macの場合、Claudeのアプリケーション内の設定ではなく、Macのヘッダーメニューの「Claude > Settings > Developer」から該当メニューに辿り着く必要がある。「Get Started」ボタンを押すと設定ファイルが ~/Library/Application Support/Claude/claude_desktop_config.json のように作成されるので、エディタで編集してMCPサーバーとの連携設定を追加する。

{
  "mcpServers": {
    "utakataTankaReader": {
      "command": "/Users/fuyu77/.nodenv/shims/node",
      "args": [
        "/Users/fuyu77/mcp-utakata/index.js"
      ]
    }
  }
}