Fakestore MCP

🚀 FakeStore MCP - モデルコンテキストプロトコル電子商取引デモ

このプロジェクトは、モデルコンテキストプロトコル（MCP）をFakeStore APIと統合した完全な電子商取引アプリケーションです。Next.js、TypeScript、およびMCP TypeScript SDKを使用して構築されています。

🚀 ライブデモ: https://fakestore-mcp.vercel.app

🎥 動画説明: https://www.youtube.com/watch?v=be9B8M1Ow88

🚀 クイックスタート

セットアップ手順

前提条件

• Node.js 18+
• npmまたはyarn

開発

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

アプリケーションは http://localhost:3000 で利用できます。

✨ 主な機能

コア機能

• ✅ セッション管理によるユーザー認証
• ✅ カテゴリーブラウジングとソート機能を備えた商品カタログ
• ✅ 商品の追加/削除/数量管理機能を備えたショッピングカート
• ✅ 即時フィードバックを提供する楽観的UI更新
• ✅ 1440pでテストされたデスクトップデザイン

📦 インストール

セットアップ手順

前提条件

• Node.js 18+
• npmまたはyarn

開発

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

アプリケーションは http://localhost:3000 で利用できます。

📚 ドキュメント

アーキテクチャ

UIファースト開発

1. フェーズ1：FakeStore APIを直接統合した動作可能なUIを構築し、UXの課題を探る
2. フェーズ2：実証済みの機能をラップするMCPサーバーレイヤーを追加
3. 結果：まず動作する製品を作成し、その後抽象化レイヤーとリファクタリングを行う

主要な設計決定

• コンポーネントアーキテクチャ：明確に分離されたモジュール式Reactコンポーネント
• ステート管理：カートにはReact Context、永続化にはlocalStorageを使用
• エラーハンドリング：包括的なエラー境界とユーザーフィードバック
• TypeScript：信頼性を高めるため、全体に厳格な型付けを使用
• 楽観的更新：バックグラウンド同期で即時のUIフィードバックを提供
• デスクトップ専用：簡潔にするため、レスポンシブなモバイルデザインは範囲外と想定

技術スタック

• フロントエンド：Next.js 15、TypeScript、Tailwind CSS、shadcn/ui、React Context + localStorage
• MCPサーバー：MCP TypeScript SDK
• MCPクライアント：MCPサーバーとやり取りするマネージャークラス
• API：FakeStore API（唯一の外部API）、トークン認証、RESTfulエンドポイント

MCPサーバー

MCPサーバーは、標準化されたツールを通じてすべての機能を提供します。

認証

• login - ユーザー認証
• logout - セッション終了

商品

• get_products - カテゴリーフィルタリングで商品を閲覧
• get_categories - 利用可能なカテゴリーのリストを取得

カート操作

• add_to_cart - 商品をカートに追加
• remove_from_cart - 商品を削除
• get_cart - カートの詳細内容を表示
• clear_cart - ショッピングカートを空にする

Cursor IDE統合

AIアシスタント → MCPクライアント → /api/mcpエンドポイント → FakeStore API
                                 ↓
            ツールの応答 ← カート状態 ← データベース更新

MCPサーバーは、すべてのカート操作を標準化されたツールとして公開し、AIアシスタントがプログラムでショッピングカートとやり取りできるようにします。

{
  "mcp": {
    "servers": {
      "fakestore": {
        "endpoint": "https://fakestore-mcp.vercel.app/api/mcp",
        "protocol": "http"
      }
    }
  }
}

MCPクライアントは、ツールを表示し、それらを消費できる状態にする必要があります。

フロー

ユーザー体験

1. 商品を閲覧 - カテゴリーをナビゲートし、商品詳細を表示（認証不要）
2. カートに追加 - 認証されていない場合はログインモーダルが表示される
3. 認証 - 必要に応じてデモ資格情報でユーザーがログインする
4. カート管理 - 即時のUIフィードバックで商品を追加/削除する
5. 楽観的更新 - UIが即時に更新され、バックグラウンドで同期される

従来の電子商取引サイトでは、ログインはチェックアウトまで延期されます。このデモではチェックアウト機能がなく、APIのカートは userId をベースにしているため、この動作はカートのCTAに移されています。

APIレベルでの永続化がないため、セッションは セッション管理 によってMCPレベルで保持されます。ハードリフレッシュ（Ctrl+F5）すると、セッションとカートはAPIの値にリセットされます。ページをリフレッシュせずにログアウトしてログインすると、カートセッションは保持されます。この動作は意図的なものです。

技術的なフロー

ユーザーアクション → Reactコンポーネント → カートコンテキスト → 楽観的UI更新
                                     ↓
            バックグラウンド同期 → FakeStore API → 状態調整

デモ資格情報

ログインダイアログには、簡単なテスト用の使用可能なアカウントが含まれています。

追加機能

• 評価、価格、またはレビュー数で商品をソート

• レコメンデーション:

従来の電子商取引システムでは、レコメンデーションは販売データに基づいています。このデモでは、カートにない商品を表示しています。

注意事項

• 最後の時点で、クライアント側のデバウンスが削除されました。各クリックはサーバーアクションに対応します。本番環境では、クライアントアクションをポーリングし、デバウンス時間を設定して単一のアクションとして送信する必要があります。時間制約のため、この最適化は元に戻されました。