MCP対応してわかった、AI時代のショッピングサイトの作り方

2026年現在、AIエージェントがユーザーの代わりに買い物をする流れが着実に進行しています。GoogleのProject Astra、AppleのSiri次世代版、そしてAnthropicのClaude。これらのAIエージェントは、ユーザーから「来週のキャンプ用品を揃えて」と言われれば、自律的に商品を調べ、比較し、購入まで完結しようとしています。

しかし、「人間向けのUI」しか持たないサイトは、AIから使うことができません。この記事では、MitsukeAIをMCP・A2A対応にした実装の裏側で直面した課題と解決策を、技術的な観点から公開します。

1/4

MCPとは + 設計判断

🎯この章の到達ゴール

MCPの基本的な役割を技術的に理解する
複数プロトコル対応の設計判断を知る

MCP（Model Context Protocol）は、Anthropicが2024年11月に公開したオープンプロトコルです。AIエージェントが外部のツール・データソースに接続するための標準仕様として設計されており、現在はLinux Foundationに寄贈されています。

Web UI

人間ユーザーがブラウザで操作する従来の入口

MCP Server

Claude系エージェントが接続するAPI

A2A Endpoint

Google A2A対応エージェント向け

OpenAPI仕様

ChatGPT Custom GPT向け

設計の原則: 既存Web UIは維持

MCP対応を進めるにあたって、最初に決めたことは「人間ユーザーの体験を犠牲にしない」ことです。WebサイトとAPI、両方の入口を提供することを原則としました。

複数プロトコル対応

AIエージェントの世界は現在、プロトコルの群雄割拠状態にあります。MitsukeAIでは、MCP・A2A・OpenAPIの3プロトコルに対応し、Claude・ChatGPT・Geminiのどれからでもアクセス可能にする方針を取りました。

静的な発見メカニズム

/.well-known/配下にDiscoveryエンドポイントを配置しています。AIエージェントがサイトを自動発見できるようにするための仕組みです。

2/4

Streamable HTTP transport実装の落とし穴

🎯この章の到達ゴール

MCP仕様の新旧差分を把握する
Vercel Serverless上での実装課題を知る

古い仕様（2024-11-05）

最初のMCP実装は、JSON-RPC 2.0 over HTTPの単純な実装で十分でした。POSTリクエストを受け取り、JSON-RPCレスポンスを返すだけです。

新しい仕様（2025-03-26）

Claude.aiのMCPコネクタは2025-03-26仕様のStreamable HTTP transportを要求します。追加要件は以下の通りです:

Accept: text/event-streamヘッダへのSSE応答
Mcp-Session-Idヘッダによるセッション管理
GETメソッドでの通知チャネル
DELETEメソッドでのセッション終了
適切なCORS設定

⚠️

特にハマったのがセッション管理です。Vercel Serverless Functionsはリクエストをまたいで状態を保持できないため、セッション情報の保存にUpstash Redisを使いました。

もっとも重要だったのは、プロトコルバージョンの両対応です。Acceptヘッダで分岐する設計にしました。

// Acceptヘッダで応答形式を分岐
if (accept.includes("text/event-stream")) {
  // SSE形式でJSON-RPCレスポンスをラップ
  return buildSSEResponse(result);
} else {
  // 通常のJSON応答
  return NextResponse.json(result);
}

💡

CORS設定ではMcp-Session-IdカスタムヘッダをAccess-Control-Allow-HeadersとAccess-Control-Expose-Headersの両方に含める必要があります。片方だけでは動きません。

3/4

パフォーマンスの戦い

🎯この章の到達ゴール

30秒→3.5秒を実現した3つの改善手法を理解する
AIモデルのコスト最適化手法を知る

最初のひどい数字

MCP対応以前、1回の検索に30秒以上かかっていました。AI提案の生成、EC APIへの問い合わせ、すべてが直列に実行されていたためです。

改善1: Prompt Cachingの活用

Anthropic APIのcache_controlパラメータを活用し、システムプロンプトをキャッシュしました。入力トークンのコストを約1/10に削減しました。

改善2: 2段階出力プロンプト

AI出力を「スケルトン（構造のみ）」と「詳細」の2段階に分け、スケルトンが生成された時点でSSEで即座にクライアントに配信しました。

改善3: モデル切り替え

検索用のストリーミング処理をSonnet 4.6からHaiku 4.5に切り替えました。応答速度が約3倍になり、コストも1/10に。

初回表示: 30秒 → 3.5秒（88%短縮）
AIコスト: ¥0.5/回 → ¥0.05/回（1/10）

パフォーマンス改善の結果

EC APIとの連携

EC API（楽天・Yahoo!ショッピング）との連携では、3つの工夫をしています。

並列化 — Promise.allSettledで楽天・Yahoo!・Amazonの3つを同時にリクエスト。1つが失敗しても他は返ります
非同期化 — AI提案を先に配信し、EC情報は後追いでSSEイベントとして追加
カート追加リンク生成 — 楽天のitemUrlからshopCodeとitemCodeをパースし、カート追加URLを動的に生成

4/4

個人開発でAI時代に対応するには

🎯この章の到達ゴール

AI対応の第一歩として何をすべきかを知る
最小限の実装で最大の効果を得る方法を理解する

構造化APIの公開

OpenAPI仕様を公開するだけで、ChatGPT Custom GPTからすぐに利用可能

Discoveryエンドポイント

/.well-known/ にJSONを置くだけ。AIエージェントが自動発見

ストリーミング応答

SSEで逐次配信。ReadableStreamを返すだけで実装可能

収益化の組み込み

API応答にもアフィリエイトリンクを含めておく

AI時代のショッピングサイトは「人間にもAIにも使いやすい」という両立が求められます。MitsukeAIはPhase 1からPhase 5までの改善を通じて現在の形になりました。特別な技術は使っていません。Next.js、Vercel、Tailwind、Anthropic APIといった既存の技術を、AI時代の要件に合わせて組み合わせ直しただけです。

個人開発者の方も、まずは/.well-known/agent.jsonを置くところから始めてみてください。

MitsukeAIを試してみる

目的や悩みを入力するだけで、AIが最適な商品を提案します。技術の裏側が気になった方も、まずはユーザーとして体験してみてください。

MitsukeAIで商品を探す →