0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@LemonCake

【完全保存版】MCP サーバー開発 2026 年最新ガイド — 設計・実装・公開・収益化まで一気通貫

0
Posted at

この記事は MCP サーバー開発の全体像を 1 ページで把握できる「完全保存版」です。本記事の後半で紹介する有料化には @lemon-cake/x402-server を使います。

この記事でわかること

  • MCP（Model Context Protocol）の全体像と 2026 年時点の最新仕様
  • 0 から MCP サーバーを実装して npm に公開するまでの完全な流れ
  • Claude Desktop / Cursor / Windsurf / Cline で動かす設定方法
  • Glama / MCP Registry / Smithery への登録手順
  • AI エージェント向けに有料化して収益化する設計
  • よくあるトラブルとデバッグ方法

目次

  1. MCP とは何か
  2. 仕様（2026 年版）
  3. 開発環境セットアップ
  4. 最小実装
  5. 実用的な MCP サーバーの設計
  6. npm 公開
  7. 各クライアントでの動作確認
  8. マーケットプレイス登録
  9. 収益化
  10. デバッグ・トラブルシューティング

1. MCP とは何か

MCP（Model Context Protocol） は Anthropic が 2024 年 11 月に発表した、AI モデルと外部ツール・データソースを接続するためのオープンプロトコル。

従来:
  ChatGPT Plugin / GPTs   ← OpenAI 専用
  Claude Tool Use         ← Claude 専用
  各 IDE のエクステンション ← IDE 専用

MCP:
  1 つの MCP サーバー → Claude / Cursor / Windsurf / Cline 全部で動く

重要な特徴：

  • オープン標準（仕様公開）
  • stdio / SSE / HTTP の 3 つの transport
  • JSON-RPC 2.0 ベース
  • tools / resources / prompts の 3 種類の機能

2. 仕様（2026 年版）

サーバーが提供する 3 種類の機能

Tools（関数呼び出し）

AI が「実行する」もの。検索、計算、ファイル操作など。

{
  name: "search_company",
  description: "法人番号から企業情報を取得",
  inputSchema: {
    type: "object",
    properties: {
      corporateNumber: { type: "string", pattern: "^\\d{13}$" }
    },
    required: ["corporateNumber"]
  }
}

Resources（読み取り専用データ）

AI が「読む」もの。ファイル、データベース、API レスポンスのキャッシュなど。

{
  uri: "file:///docs/manual.md",
  name: "User Manual",
  mimeType: "text/markdown"
}

Prompts（プロンプトテンプレート）

AI が「使う」もの。再利用可能なプロンプト雛形。

{
  name: "code_review",
  description: "コードレビューを依頼するプロンプト",
  arguments: [
    { name: "language", required: true },
    { name: "code", required: true }
  ]
}

Transport の選び方

Transport 用途 速度
stdio ローカル CLI / デスクトップアプリ 最速
SSE リモートサーバー（streaming） 中
HTTP リモートサーバー（リクエスト/レスポンス） やや遅

個人開発の MCP は stdio が一般的。リモート公開するなら HTTP。

3. 開発環境セットアップ

# Node.js 18+ が必要
node -v  # v18.0.0 以上

# プロジェクト作成
mkdir my-mcp-server && cd my-mcp-server
npm init -y

# 必要なパッケージ
npm install @modelcontextprotocol/sdk
npm install -D typescript @types/node tsx

package.json の例：

{
  "name": "my-mcp-server",
  "version": "0.1.0",
  "type": "module",
  "bin": {
    "my-mcp-server": "dist/index.js"
  },
  "scripts": {
    "build": "tsc",
    "dev": "tsx watch src/index.ts"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

4. 最小実装

src/index.ts：

#!/usr/bin/env node
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";

const server = new Server(
  { name: "my-mcp-server", version: "0.1.0" },
  { capabilities: { tools: {} } }
);

// Tool 一覧
server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [{
    name: "hello",
    description: "Greet someone",
    inputSchema: {
      type: "object",
      properties: {
        name: { type: "string", description: "Name to greet" }
      },
      required: ["name"]
    }
  }]
}));

// Tool 実行
server.setRequestHandler(CallToolRequestSchema, async (req) => {
  if (req.params.name === "hello") {
    const name = req.params.arguments?.name as string;
    return {
      content: [{ type: "text", text: `Hello, ${name}!` }]
    };
  }
  throw new Error("Unknown tool");
});

// 起動
const transport = new StdioServerTransport();
await server.connect(transport);

これで最小の MCP サーバーが完成。

5. 実用的な MCP サーバーの設計

5.1 Tools 設計の原則

❌ 1 つの巨大な tool
{
  name: "search_everything",
  description: "Search anything"
}

✅ 役割が明確な小さい tool
{
  name: "search_company_by_name",
  description: "Search company info by name from gBizINFO"
},
{
  name: "search_company_by_number",
  description: "Search company info by corporate number"
}

AI エージェントは「名前から description で tool を選ぶ」ため、description は具体的に書くことが重要。

5.2 入力バリデーション

zod を使うと型安全に検証できます：

import { z } from "zod";

const SearchSchema = z.object({
  query: z.string().min(1).max(100),
  limit: z.number().int().min(1).max(100).default(10)
});

server.setRequestHandler(CallToolRequestSchema, async (req) => {
  if (req.params.name === "search") {
    const args = SearchSchema.parse(req.params.arguments);
    // args.query と args.limit は型安全
  }
});

5.3 エラーハンドリング

try {
  const result = await externalApi.call(args);
  return {
    content: [{ type: "text", text: JSON.stringify(result) }]
  };
} catch (error) {
  return {
    isError: true,
    content: [{
      type: "text",
      text: `エラー: ${error.message}\n対処: API キーを確認してください`
    }]
  };
}

isError: true を返すと AI が「失敗した」と認識して、リトライや代替手段を選びます。

5.4 認証情報の扱い

環境変数経由で受け取る：

const API_KEY = process.env.MY_SERVICE_API_KEY;
if (!API_KEY) {
  console.error("MY_SERVICE_API_KEY is required");
  process.exit(1);
}

claude_desktop_config.json 側で：

{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "my-mcp-server"],
      "env": {
        "MY_SERVICE_API_KEY": "..."
      }
    }
  }
}

6. npm 公開

6.1 build スクリプト

{
  "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
  },
  "files": ["dist", "README.md", "LICENSE"]
}

6.2 README に書くべきこと

# my-mcp-server

[1 行で何ができるか]

## Installation

```bash
npm install -g my-mcp-server

Claude Desktop Setup

{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "my-mcp-server"]
    }
  }
}

Tools

  • tool_name_1: 説明 + 例
  • tool_name_2: 説明 + 例

### 6.3 公開

```bash
npm login
npm publish

初回は 2FA 設定が必須（Granular Access Token + WebAuthn）。

7. 各クライアントでの動作確認

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "my-mcp-server"]
    }
  }
}

Claude Desktop を Cmd+Q → 再起動。

Cursor

Cmd + Shift + P → Cursor Settings → MCP → 上記と同じ JSON を貼り付け。

Windsurf

~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "my-mcp-server"]
    }
  }
}

Cline (VS Code 拡張)

VS Code の Cline 拡張から「MCP Servers」設定を開いて JSON を追加。

8. マーケットプレイス登録

MCP Registry（公式）

https://registry.modelcontextprotocol.io/ にプルリクで登録。

Glama

https://glama.ai/mcp/servers → サブミットフォーム。Inspector で動作確認できると採用率が上がる。

Smithery

https://smithery.ai/ → 自動収集される。READMEを充実させると優先表示される。

mcp.so

https://mcp.so/ → 中華圏で人気の MCP 一覧サイト。

LobeHub

https://lobehub.com/ja/mcp → AI チャット系のクライアント経由で発見される。

9. 収益化

ここからが本記事の重要パート。MCP を作るだけではなく収益化する設計。

9.1 課金モデルの選択肢

Option 1: 完全無料                    → 収益なし、貢献活動
Option 2: GitHub Sponsors / Patreon  → 気まぐれな寄付（月 $0-20）
Option 3: 自前で Stripe 実装           → 18 時間 + AI エージェント非対応
Option 4: x402 マイクロペイメント       → 5 分実装、AI エージェント対応 ⭐

9.2 x402 による有料化

@lemon-cake/x402-server を使った場合：

import { x402Middleware } from "@lemon-cake/x402-server";

// MCP の tool 実行前に支払い検証
server.setRequestHandler(CallToolRequestSchema, async (req) => {
  // 支払い確認
  const paid = await x402Middleware.verify({
    serviceId: "your-service-id",
    pricePerCallUsd: 0.001,
    paymentHeader: req.params._meta?.payment,
  });
  if (!paid) return { isError: true, content: [{ type: "text", text: "Payment required" }] };

  // 通常のロジック
  return await handleTool(req);
});

9.3 Provider 登録

lemoncake.xyz/sellers で 5 ステップ：

  1. 会社情報
  2. ウォレット
  3. API endpoint
  4. 価格設定（リアルタイム収益シミュレーター付き）
  5. 税情報（任意）

9.4 サブスクプラン

自分自身も Pro 以上に加入すると経理が自動化されます：

プラン 月額 機能
Free ¥0 基本のみ
Pro ¥4,980 + freee/MF 自動仕訳、適格請求書自動発行
Business ¥14,800 + JPY オフランプ（USDC→円→銀行口座）

月 $100（≒¥15,000）以上稼ぐようになったら Pro 加入が損益分岐。

10. デバッグ・トラブルシューティング

10.1 MCP Inspector

公式デバッグツール。stdio で動くサーバーをブラウザから叩ける：

npx @modelcontextprotocol/inspector npx my-mcp-server

10.2 ログの場所

Client ログパス
Claude Desktop ~/Library/Logs/Claude/mcp-server-*.log
Cursor ~/.cursor/logs/
Windsurf ~/.codeium/windsurf/logs/

10.3 よくあるエラー

エラー 原因 対処
Cannot find module npm 公開時のファイル漏れ files に dist を追加
process.exit(1) で落ちる 必須 env 未設定 env 確認
Tool 一覧に出ない capabilities 設定漏れ { tools: {} } を追加
stdin/stdout への console.log stdio 通信を壊す console.error を使う

10.4 stdout への出力禁止

stdio transport では stdout が通信路なので、デバッグログは必ず stderr へ：

// ❌ 通信が壊れる
console.log("Debug info");

// ✅ stderr へ
console.error("Debug info");

まとめ

ステップ 所要時間
1. 開発環境セットアップ 10 分
2. 最小実装 30 分
3. 実用機能の実装 4〜10 時間
4. npm 公開 30 分
5. 各クライアント確認 1 時間
6. マーケットプレイス登録 1 時間
7. x402 有料化 10 分
合計 約 1 営業日 + 検討時間

MCP は「個人開発者が AI エージェント時代に作るべきもの」の筆頭です。1 日で公開・有料化まで完走できる速度感がポイントです。

参考リンク

試したい人へ

英語の Glama Playground が苦手な人は、以下のコマンドで日本のターミナルから動かせます：

npx -y pay-per-call-mcp@latest
# → 8 つのデモ API がすぐ使えます

設定不要、課金なし、サインアップ不要。

よくある質問（FAQ）

Q. MCP と OpenAI の Function Calling の違いは？
A. Function Calling は OpenAI/Anthropic ごとに別仕様。MCP は両方に対応する共通プロトコルです。1 つの MCP サーバーで両方のクライアントから使えます。

Q. プログラミング初心者でも MCP 作れますか？
A. TypeScript で API を書ける必要があります。Claude Code を使えば学習しながら作れますが、最低限 Node.js + npm の基礎は必要です。

Q. 自作 MCP が他のクライアント（Gemini など）で動きますか？
A. MCP 対応を表明している全クライアント（Claude / Cursor / Windsurf / Cline / Continue.dev など）で動きます。Gemini は現時点で MCP 未対応です。

Q. 1 ヶ月で何個 MCP 作れますか？
A. 1 日 4-8 時間使えれば、月 3-5 個は作れます。最初の 1 個は 1 週間かかりますが、2 個目以降はテンプレ化できます。

Q. ストックや GitHub スターを増やすコツは？
A. README に「使い方」を 3 つ以上書くこと、AI エージェント向けの description を具体的に書くこと、デモ動画を README に貼ること、の 3 つが効きます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?