Stripe × Cloudflareで有料MCP実装を試す

StripeとCloudflareの新SDKを使って有料MCPサーバーを実装する方法を解説。AnthropicのClaudeと連携し、AIアシスタントに有料機能を提供するための実装手順とコード例を紹介します。

広告ここから
広告ここまで

目次

    2025年5月、StripeとCloudflareが有料のMCP (Model Context Protocol) サーバーを作るためのSDKをリリースしました。Claude(Anthropic)がIntegrationsという形でMCPをサポートし始めたのと時を同じくして登場したこの技術を実際に試してみたので、その実装手順と感想をシェアします。

    MCPとは何か

    Model Context Protocol (MCP) は、AIアシスタントやLLMが外部サービスやツールと連携するためのオープンスタンダードです。Anthropicが「AIアプリケーション用のUSB-Cポートのようなもの」と表現しているように、MCPは異なるAIモデルと様々なデータソースやツールを標準化された方法で接続します。

    これまでMCPのサポートはClaude Desktopでのローカルサーバーに限られていましたが、今回のアップデートによって、リモートMCPサーバーとウェブや他のプラットフォームとのシームレスな連携が可能になりました。

    StripeとCloudflareの有料MCPとは

    Stripeは決済処理の第一人者、Cloudflareはエッジコンピューティングと高速なインフラストラクチャの提供者、両者がタッグを組んで提供する新しいSDKは、AIアシスタントが利用できる有料ツールやサービスを簡単に実装できるようにするものです。

    特に興味深いのは、StripeのペイメントインフラをMCPサーバーと統合することで、AIアシスタントを通じて利用できる有料機能を簡単に提供できる点です。これにより、開発者は自分のサービスやAPIをAIアシスタントに公開し、その使用に対して課金することが可能になります。

    実装手順

    実際に有料MCPサーバーを構築する手順を見ていきましょう。

    1. プロジェクトのセットアップ

    まず、Cloudflareのテンプレートを使って基本的なMCPサーバーを作成します。

    npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-authless
    

    このコマンドにより、認証なしの基本的なMCPサーバーのテンプレートが作成されます。

    2. Stripeの統合

    次に、Stripeのエージェントツールキットをインストールします。

    npm i @stripe/agent-toolkit
    

    3. コードの変更

    プロジェクトのsrc/index.tsファイルを編集して、Stripe統合を追加します。

    import { McpAgent } from "agents/mcp";
    import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
    import { z } from "zod";
    import {
      PaymentState,
      experimental_PaidMcpAgent as PaidMcpAgent,
    } from '@stripe/agent-toolkit/cloudflare';
    
    type Bindings = {
      // ここに環境変数などを追加
    }
    
    type Props = {
      userEmail: string;
    };
      
    type State = PaymentState & {};
    
    // 通常のMcpAgentからPaidMcpAgentに変更
    export class MyMCP extends PaidMcpAgent<Bindings, State, Props> {
      server = new McpServer({
        name: "Authless Calculator",
        version: "1.0.0",
      });
      
      async init() {
        // 既存の無料ツール
        this.server.tool(
          "add",
          { a: z.number(), b: z.number() },
          async ({ a, b }) => ({
            content: [{ type: "text", text: String(a + b) }],
          })
        );
        
        // 計算機能(無料)
        this.server.tool(
          "calculate",
          {
            operation: z.enum(["add", "subtract", "multiply", "divide"]),
            a: z.number(),
            b: z.number(),
          },
          async ({ operation, a, b }) => {
            let result: number;
            switch (operation) {
              case "add":
                result = a + b;
                break;
              case "subtract":
                result = a - b;
                break;
              case "multiply":
                result = a * b;
                break;
              case "divide":
                if (b === 0)
                  return {
                    content: [
                      {
                        type: "text",
                        text: "Error: Cannot divide by zero",
                      },
                    ],
                  };
                result = a / b;
                break;
            }
            return { content: [{ type: "text", text: String(result) }] };
          }
        );
        
        // Stripeを使った有料ツール
        this.paidTool(
          'add_numbers',
          {
            a: z.number(),
            b: z.number(),
          },
          ({a, b}) => {
            return {
              content: [{type: 'text', text: `Result: ${a + b}`}],
            };
          },
          {
            priceId: '{{PRICE_ID}}', // Stripeで作成した実際の価格IDに置き換え
            successUrl: 'https://mcp.mysite.com/success',
            paymentReason:
              'You must pay a subscription to add two big numbers together.',
          }
        );
      }
    }
    
    export default {
      fetch(request: Request, env: Env, ctx: ExecutionContext) {
        const url = new URL(request.url);
        if (url.pathname === "/sse" || url.pathname === "/sse/message") {
          // @ts-ignore
          return MyMCP.serveSSE("/sse").fetch(request, env, ctx);
        }
        if (url.pathname === "/mcp") {
          // @ts-ignore
          return MyMCP.serve("/mcp").fetch(request, env, ctx);
        }
        return new Response("Not found", { status: 404 });
      },
    };
    

    4. Stripe API キーの設定

    Stripeとの連携には以下の権限を持つAPIキーが必要です。シークレット API キーでも良いのですが、セキュリティリスクやキーの管理を容易にするために、制限付き API キーを作る方が良いかなと思います。

    • customer: 書き込み権限
    • checkout: 書き込み権限
    • subscription: 読み取り権限
    • meterEvents: 書き込み権限

    5. ユーザー認証

    PaidMcpAgentprops.userEmailを使ってStripeの顧客を識別(または作成)します。2025/05 時点では、@cloudflare/workers-oauth-providerOAuthProviderを利用してユーザーアカウントを紐付ける方法がほぼ唯一の認証方法です。

    テスト環境では、ユーザーに直接メールアドレスを入力してもらう方法でも試せますが、あまりお勧めはしたくないなーと思います。

    6. ローカル開発とテスト

    ローカル開発サーバーを起動してテストします:

    npm run dev
    

    そして、Claude DesktopのMCP設定にローカルサーバーを追加します:

    {
      "mcpServers": {
        "calculator": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "http://localhost:8787/sse" // 本番環境ではリモートURLに変更
          ]
        }
      }
    }
    

    実際に動かしてみた感想

    元々存在していた基本的な計算ツールは問題なく動作しました。これにより、MCPの基本的な設定と機能が正しく実装されていることが確認できました。

    決済が完了されていないと MCP サーバーが判断した場合、決済ページのURLが返ってきます。

    決済を完了させると、ツールが実行されます。

    有料ツールについては、Stripeの決済フローとの連携が肝心です。ユーザーがツールを使おうとすると、Stripeの支払いページにリダイレクトされ、支払いが完了すると、そのツールが使用可能になります。

    今後の可能性

    今回のStripeとCloudflareによる有料MCPサーバーの統合は、AIアシスタントを通じて提供できるサービスの可能性を大きく広げるものです。例えば:

    • 専門的なデータ分析ツール
    • カスタムAPIへのアクセス
    • プレミアムコンテンツへのゲートウェイ
    • 従量課金型の高度なAI機能

    など、様々なビジネスモデルをAIアシスタントの世界に持ち込むことが可能になります。

    まとめ

    StripeとCloudflareによる有料MCPサーバーのSDKは、AI機能の収益化に新たな道を開くものです。実装は比較的シンプルで、既存のStripeのインフラと連携できるため、開発者にとって導入の障壁は低いと言えるでしょう。

    AIの可能性を拡張しながら、持続可能なビジネスモデルを構築したい開発者にとって、この技術は大きな可能性を秘めています。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark