Claude Media
Claude Code mcp-server-devプラグインでMCPサーバーを作る
Claude CodeMCPチュートリアル

Claude Code mcp-server-devプラグインでMCPサーバーを作る

mcp-server-devは、build-mcp-server・build-mcp-app・build-mcpbの3スキルでMCPサーバー作りを案内するプラグインです。入口の質問と3スキルの使い分けをまとめます。

読了目安 約12分

mcp-server-devは、MCPサーバーの設計から実装までをClaude Codeに案内させるプラグインです。中身は3つのスキルで、入口のbuild-mcp-serverが使い道を聞き取り、必要に応じてbuild-mcp-app(チャット内UI)とbuild-mcpb(ローカル配布)へ引き継ぎます。「どの形で作るか」を先に決める作りなので、SDKの使い方より前の迷いを減らしたい人向けです。

3つのスキルは何を分担するか

3つのスキルは一続きの構築経路をつくります。役割は次のとおりです。

スキル役割向く場面
build-mcp-server役割入口。用途を聞き取り、配備形態とツール設計を決めて振り分ける向く場面最初の1回は必ずここ
build-mcp-app役割チャット内に表示するフォームや選択画面などのUIウィジェットを足す向く場面平文のテキストでは足りない操作がある
build-mcpb役割ローカルのstdioサーバーをランタイムごと1ファイルに固める向く場面ローカルのファイルやデスクトップアプリに触る
振り分け

入口スキルが勧める4つの道

  • リモートHTTP

    クラウドAPIを包むときの既定の推奨です。入口のスキル内で雛形まで作ります。

  • MCPアプリ

    UIウィジェットが要るとき。build-mcp-appに引き継ぎます。

  • MCPB

    ローカルのマシンに触る必要があるとき。build-mcpbに引き継ぎます。

  • ローカルstdioの試作

    個人用や試作向け。雛形は作りますが、MCPBへの移行メモを添えます。

導入と起動のしかた

公式マーケットプレイスのプラグインは/plugin install 名前@claude-plugins-officialの形で入れます。mcp-server-devもこの形式に当てはまります。

/plugin install mcp-server-dev@claude-plugins-official

セッション内の/plugin installは、すぐには入れずに/pluginパネルの詳細画面を開き、範囲を選んでからインストールする流れです。インストール後に/pluginパネルを閉じると読み込まれます。反映されないときは/reload-pluginsを実行します。公式マーケットプレイスは、対話セッションを初めて起動したときにClaude Code側が追加します。

起動は2通りです。「MCPサーバーを作るのを手伝って」と頼めば、入口スキルが反応します。直接呼ぶなら、プラグイン名を前に付けた形になります。

/mcp-server-dev:build-mcp-server

プラグインに同梱されたスキルは、プラグイン名:スキル名の形で呼び出します。

build-mcp-serverが最初に聞くこと

入口スキルは、コードを書く前に聞き取りをします。SKILL.mdは「最初の仕事は発見であって、コードではない」と明言し、質問への回答が揃うまで雛形づくりに入らない作りです。聞く項目は5つあります。

  1. 何につなぐか(クラウドAPI、ローカルのプロセスやファイル、ハードウェアなど)
  2. 誰が使うか(自分とチームだけか、インストールする誰でもか)
  3. 公開するアクションの数
  4. 呼び出しの途中でユーザー入力や豊富な表示が要るか
  5. 上流サービスの認証方式(なし・APIキー・OAuth)

最初のメッセージで答えが出ていれば、聞き直さずに推奨へ進む指示になっています。つまり依頼文に「Slackのような社内SaaSのAPIを包みたい。利用者は社内全員。操作は10個ほど」と書いておくほうが、やり取りが短く済みます。

配備形態の選び方

聞き取りの結果から、入口スキルは1つの道を推します。既定はリモートのstreamable-HTTPサーバーです。URLを追加するだけで使え、1つの配備が全員に届き、OAuthのリダイレクトも扱えるためです。Claude Desktop、Claude Code、Claude.aiなど複数の面で動く点も理由に挙がっています。

npxやuvxで起動するローカルstdioは、配布に向かない試作用です。利用者側に適切なランタイムが要り、更新も押し込めないからです。

ツールの切り分け

もう1つの分岐がツール設計です。15個に満たない操作なら、操作ごとに1ツールを割り当てます。数十から数百の操作がある大きなAPIは、検索用と実行用の2ツールにまとめる型を勧めています。

search_actions  自然言語の意図に合う操作を、ID・説明・引数スキーマ付きで返す
execute_action  IDと引数を渡して操作を実行する

全ツールを並べるとコンテキストが膨らむため、よく使う3〜5個だけ専用ツールに昇格させる混成案も載っています。フレームワークは、TypeScriptなら公式SDK(@modelcontextprotocol/sdk)、PythonならFastMCP 3.xが候補です。

build-mcp-appでUIを足す判断

MCPアプリは、通常のMCPサーバーにUIリソースを加えたものです。ツールとリソースとワイヤプロトコルは同じで、UI層が上に載るだけです。ただしUIは目的ではありません。テキストで足りるなら作らず、ウィジェットを足す目安は次の5つです。

  • Claudeが推測しにくい構造化入力がある(フォーム)
  • Claudeが順位付けできない一覧から選ばせたい(ファイル、連絡先、レコード)
  • 破壊的または課金を伴う操作の確認が要る
  • 出力が空間的・視覚的(グラフ、地図、差分)
  • 長い処理の進捗を見せたい

先にElicitationで足りないか見る

ここが見落としやすい分岐です。はい・いいえの確認、短い選択肢、フラットなフォームなら、MCP仕様のElicitation(サーバーからの入力要求)で足ります。UIコードは不要です。大きな検索可能リスト、見た目のプレビュー、グラフ、リアルタイムの進捗は、Elicitationでは扱えずウィジェット側の領分とされています。

入口スキルは、Elicitationの対応状況にも注意を促しています。ホスト側の対応は広がっている途中で、Claude Codeでは2.1.76以降です。SDKはクライアントが対応を宣言していないと例外を投げるため、機能の有無を確認する分岐と代替の流れを併せて書く、という指示です。Claude Code側でこの入力要求を受けて処理する方法は、Elicitationフックの解説にまとめています。

ツールとUIは別々に登録する

ウィジェット付きのツールは、2つの登録でできています。ツール側は_meta.ui.resourceUriで表示するUIを宣言し、戻り値はHTMLでなくテキストやJSONです。HTMLは別のリソースとして登録します。

registerAppTool(server, "pick_contact", {
  description: "Open an interactive contact picker",
  annotations: { title: "Pick Contact", readOnlyHint: true },
  inputSchema: { filter: z.string().optional() },
  _meta: { ui: { resourceUri: "ui://widgets/contact-picker.html" } },
}, async ({ filter }) => {
  const contacts = await db.contacts.search(filter);
  return { content: [{ type: "text", text: JSON.stringify(contacts) }] };
});

リソースのMIMEタイプはtext/html;profile=mcp-appで、これによってホストが、ソースの表示ではなくiframeの対話UIとして描画します。Claude向けの設定には、ウィジェット専用のヘルパーツールをClaudeのツール一覧から隠すvisibility: ["app"]や、外部ドメインを宣言するCSP設定があり、既定ではすべて遮断です。

build-mcpbでローカルサーバーを固める

MCPBは、ローカルのMCPサーバーをランタイムごと1ファイルにまとめる形式です。利用者はNodeやPythonを入れずに、そのファイルを入れるだけで使えます。中身はzipで、manifest.json、server/、icon.pngが並びます。ホストはmanifest.jsonを読み、server.mcp_config.commandをstdioのMCPサーバーとして起動します。コードの観点では、ローカルstdioサーバーと変わりません。

向く場面と向かない場面

向くのは、ローカルのファイルを読む、デスクトップアプリを動かす、localhostのサービスと話す、OSの機能を使う、のようにユーザーのマシン上で動く必要があるサーバーです。クラウドAPIを叩くだけなら、スキル自身が「MCPBの衣装を着たリモートサーバー」と呼んで、リモートHTTPを選ぶよう戻します。MCPBはあくまで配布の第二の選択肢で、ディレクトリへの掲載にはリモートが推奨されています。

作成から配布まで

ビルドはNodeならバンドルしてからmcpb pack、Pythonなら依存をserver/vendorにまとめてから同じくmcpb packです。確認と署名のコマンドは次の並びで載っています。

npx @anthropic-ai/mcpb init
npx @anthropic-ai/mcpb validate
npx @anthropic-ai/mcpb pack
npx @anthropic-ai/mcpb sign dist/local-files.mcpb

installは.mcpbファイルをClaude Desktopへドラッグして行います。マニフェストの書き方と配布の経路は、Desktop Extensions(.mcpb)の解説で詳しく扱っています。

落とし穴

MCPBにはサンドボックスがない

マニフェストにpermissionsブロックはなく、サーバーはユーザーと同じ権限で動きます。パスの検証、ROOTの外へ出さない処理、起動するコマンドの許可リスト化は、すべて自分のツール内で書く必要があります。

作ったサーバーを試して出すまで

入口スキルの最終段は、テストと公開です。ローカルのサーバーはCloudflareのトンネル経由でURLを作り、claude.aiの設定からカスタムコネクタとして追加すると、実際のClaudeで試せます。Claudeは接続時にclientInfo.nameとしてclaude-aiを名乗ります。そのあと審査基準のチェックリスト(読み書きツールの分離、必須のアノテーション、名前の制限、プロンプトインジェクションの規則)を通し、Anthropicのディレクトリへ提出する流れです。

MCPアプリのディレクトリ提出には、OAuthか認証なし(none)の認証と、ツールのアノテーション、3〜5枚のPNGスクリーンショットが必要です。固定のベアラートークンは自分たち専用の配備でしか使えず、掲載の妨げになります。

既存のMCP解説との使い分け

SDKでツールを定義してClaude Codeに接続するところまでの実装手順は、MCPサーバー自作ガイドにあります。mcp-server-devは、その手前の「リモートかMCPBかMCPアプリか」の判断と、ツール設計の型に重点を置いたプラグインです。作ったサーバーをプラグインに同梱して配る場合の起動やツール名の付き方は、プラグイン同梱のMCPサーバーが受け持ちます。プラグイン自体の探し方と入れ方はマーケットプレイスの解説を参照してください。同じMCPサーバー作りを別のスキルで進めるmcp-builderスキルとは、入口が違うだけで検索意図が隣り合います。

要するに、実装の細部を調べる段階ならSDKの手順書、形を決める段階ならこのプラグインです。迷うときは入口スキルに用途を一文で渡し、返ってきた推奨と理由を見てから、引き継ぎ先のスキルへ進む順序が無理がありません。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →