MCP Apps で「AIと対話しながら買い物できるECショップ」を作ってみた

ユーザー：春物の洋服が欲しいな
AI：春物の商品を検索しますね。
    → [商品一覧View: 春タグの商品がカードグリッドで表示]

ユーザー：このジャケットとシャツをカートに入れて
AI：カートに追加しました。
    → [カートDrawer: 商品・合計金額・購入ボタン表示]

ユーザー：購入する
AI：注文が確定しました。
    → [注文確認View: 注文ID・明細表示]

ユーザー：そういえば、前に買った洋服ってどれだっけ？
AI：購入履歴をお見せしますね。
    → [購入履歴View: 過去に買った商品がカードグリッドで表示]

ユーザー：前に買った服にマッチする春物を提案して
AI：購入履歴を見ると、きれいめ・通勤系がお好みのようですね。
    こちらはいかがでしょうか。
    → [商品一覧View: きれいめ×春の商品が表示]

【従来のMCPサーバー】
ユーザー → LLM → MCP Server → テキスト結果 → LLM → テキスト応答

【MCP Apps】
ユーザー → LLM → MCP Server → テキスト結果 + resourceUri
                                                ↓
                              ホスト（ChatGPT等）が resourceUri のHTMLを取得
                                                ↓
                              iframe内にリッチUIを表示
                                                ↓
                              View内から app.callServerTool() で他ツール呼出

mcp-apps-sample/
├── app/api/mcp/route.ts            # Next.js API Route（MCPエンドポイント）
├── src/
│   ├── tools/
│   │   ├── products.ts             # 商品検索・一覧・詳細ツール
│   │   ├── cart.ts                 # カート操作ツール
│   │   └── orders.ts               # 注文・購入履歴ツール
│   ├── resources.ts                # MCP Resources（View HTML配信）
│   ├── data/mock.ts                # モックデータ（商品 + 注文履歴）
│   └── server.ts                   # MCP Server 初期化
├── views/                          # React View ソースコード
│   ├── shared/styles.css           # デザインシステム
│   ├── product-catalog/App.tsx     # 商品一覧View
│   ├── cart/App.tsx                # カートView
│   ├── order/App.tsx               # 注文確認View
│   └── purchase-history/App.tsx    # 購入履歴View
├── scripts/
│   └── embed-views.mjs             # ビルド済HTMLをTSファイルに埋め込み
├── vite.config.ts                  # Vite設定（singlefile出力）
└── package.json

views/*.tsx (React)
    ↓ Vite + vite-plugin-singlefile
dist/views/*.html (単一HTMLファイル)
    ↓ scripts/embed-views.mjs
src/view-html.ts (HTMLを文字列としてexport)
    ↓ registerAppResource()
MCP Resource として配信

// src/tools/products.ts
import { registerAppTool } from "@modelcontextprotocol/ext-apps/server";
import { z } from "zod";
import { RESOURCE_URIS } from "../resources.js";

export function registerProductTools(server: McpServer) {
  registerAppTool(
    server,
    "search_products",
    {
      title: "商品検索",
      description: "キーワード、カテゴリ、タグで商品を検索します。",
      inputSchema: {
        keyword: z.string().optional().describe("検索キーワード"),
        category: z.string().optional().describe("カテゴリ名で絞り込み"),
        tags: z.array(z.string()).optional()
          .describe("タグで絞り込み（AND条件）。例: [\"春\", \"アウター\"]"),
      },
      _meta: {
        ui: { resourceUri: RESOURCE_URIS.productCatalog },  // ← このViewで結果を表示
      },
    },
    async ({ keyword, category, tags }) => {
      // 検索ロジック（省略）
      const data = { count: results.length, products: summary };
      return {
        structuredContent: data,           // ← ChatGPT向け（後述）
        content: [{
          type: "text",
          text: JSON.stringify(data, null, 2),
        }],
      };
    },
  );
}

// views/product-catalog/App.tsx（抜粋）
import { useState, useEffect } from "react";
import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";

function App() {
  const [products, setProducts] = useState<Product[]>([]);

  // ツール結果をパースする共通ハンドラ
  const handleToolResult = (params: any) => {
    // 1. structuredContent（ChatGPT経由）を優先チェック
    const sc = params?.structuredContent;
    if (sc && typeof sc === "object" && sc.products) {
      setProducts(sc.products);
      return;
    }
    // 2. content テキスト（標準MCP）をフォールバック
    const text = params?.content?.find(
      (c: { type: string }) => c.type === "text",
    ) as { text: string } | undefined;
    if (text) {
      try {
        const data = JSON.parse(text.text);
        if (data.products) setProducts(data.products);
      } catch { /* ignore */ }
    }
  };

  const { app, isConnected } = useApp({
    appInfo: { name: "ec-shop", version: "1.0.0" },
    capabilities: {},
    onAppCreated: (app) => {
      app.ontoolresult = handleToolResult;
    },
  });

  // ホストのテーマ（ダークモード等）を自動適用
  useHostStyles(app, app?.getHostContext());

  // フォールバック: 直接 postMessage をリスン（ext-apps のスキーマ検証をバイパス）
  useEffect(() => {
    const handler = (event: MessageEvent) => {
      if (event.source !== window.parent) return;
      const msg = event.data;
      if (!msg || msg.jsonrpc !== "2.0") return;
      if (msg.method !== "ui/notifications/tool-result") return;
      handleToolResult(msg.params);
    };
    window.addEventListener("message", handler, { passive: true });
    return () => window.removeEventListener("message", handler);
  }, []);

  // フォールバック: window.openai（ChatGPT固有API）
  useEffect(() => {
    const openai = (window as any).openai;
    if (openai?.toolOutput) handleToolResult(openai.toolOutput);
  }, []);

  // View内から別のツールを呼び出す
  const addToCart = async (productId: string) => {
    const result = await app.callServerTool({
      name: "add_to_cart",
      arguments: { productId, quantity: 1 },
    });
    // カート更新のUIフィードバック
  };

  return (
    <div>
      <div className="grid">
        {products.map(p => (
          <ProductCard key={p.id} product={p} onAddToCart={addToCart} />
        ))}
      </div>
    </div>
  );
}

import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  root: path.resolve(__dirname, "views"),
  plugins: [react(), viteSingleFile()],
  build: {
    outDir: path.resolve(__dirname, "dist/views"),
    rollupOptions: {
      input: path.resolve(__dirname, `views/${process.env.VIEW}/index.html`),
    },
  },
});

import { registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
import { VIEW_HTML } from "./view-html.js";

const views = [
  { name: "商品一覧", uri: "ui://ec-shop/product-catalog.html", key: "productCatalog" },
  { name: "カート", uri: "ui://ec-shop/cart.html", key: "cart" },
  { name: "注文確認", uri: "ui://ec-shop/order.html", key: "order" },
  { name: "購入履歴", uri: "ui://ec-shop/purchase-history.html", key: "purchaseHistory" },
];

export function registerResources(server: McpServer) {
  const baseUrl = getBaseUrl(); // e.g. "https://mcp-apps-sample.vercel.app"
  const uiMeta = {
    prefersBorder: true,
    domain: baseUrl,
    csp: {
      connectDomains: [baseUrl],
      resourceDomains: [baseUrl],
    },
  };

  for (const view of views) {
    registerAppResource(server, view.name, view.uri,
      { mimeType: RESOURCE_MIME_TYPE, _meta: { ui: uiMeta } },
      async () => ({
        contents: [{ uri: view.uri, mimeType: RESOURCE_MIME_TYPE, text: VIEW_HTML[view.key], _meta: { ui: uiMeta } }],
      }),
    );
  }
}

export const orders: Order[] = [
  {
    id: "ORD-000001",
    items: [
      { productId: "fashion-003", productName: "テーラードジャケット（スプリング）", quantity: 1, unitPrice: 14800 },
      { productId: "fashion-001", productName: "リネンブレンドシャツ", quantity: 2, unitPrice: 5980 },
    ],
    totalAmount: 26760,
    status: "delivered",
    createdAt: "2025-10-15T10:30:00Z",
  },
  {
    id: "ORD-000002",
    items: [
      { productId: "fashion-021", productName: "カシミヤブレンドコート", quantity: 1, unitPrice: 34800 },
      { productId: "fashion-024", productName: "ウールマフラー（カシミヤ混）", quantity: 1, unitPrice: 8980 },
    ],
    totalAmount: 43780,
    status: "delivered",
    createdAt: "2025-12-01T14:00:00Z",
  },
  {
    id: "ORD-000003",
    items: [
      { productId: "fashion-028", productName: "レザースニーカー", quantity: 1, unitPrice: 12800 },
      { productId: "fashion-027", productName: "スリムフィットデニムパンツ", quantity: 1, unitPrice: 6980 },
    ],
    totalAmount: 19780,
    status: "shipped",
    createdAt: "2026-02-20T09:00:00Z",
  },
];

registerAppTool(server, "get_purchase_history", {
  title: "購入履歴",
  description: "過去に購入した商品の一覧を取得します。商品名、カテゴリ、タグ、購入日が含まれるため、好みの分析やコーディネート提案に活用できます。",
  _meta: { ui: { resourceUri: RESOURCE_URIS.purchaseHistory } },
}, async () => {
  const purchasedProducts = orders.flatMap((order) =>
    order.items.map((item) => {
      const product = products.find((p) => p.id === item.productId);
      return {
        productId: item.productId,
        name: item.productName,
        price: `¥${item.unitPrice.toLocaleString()}`,
        category: product?.category ?? "不明",
        tags: product?.tags ?? [],           // ← LLMがここを読む
        imageUrl: product?.imageUrl ? `${baseUrl}${product.imageUrl}` : undefined,
        purchasedAt: order.createdAt,
        orderId: order.id,
      };
    }),
  );
  const data = { totalOrders: orders.length, purchasedProducts };
  return {
    structuredContent: data,
    content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
  };
});

get_purchase_history の結果：
  fashion-003: tags = ["春", "アウター", "オフィスカジュアル", "きれいめ", "通勤"]
  fashion-001: tags = ["春", "トップス", "オフィスカジュアル", "リネン"]
  fashion-021: tags = ["冬", "アウター", "きれいめ", "通勤", "カシミヤ"]
  ...

→ LLMの分析：「きれいめ・通勤・オフィスカジュアル系が好み」
→ search_products({ tags: ["春", "きれいめ"] }) で提案

/* 解決策: SDKが width: fit-content を設定しても幅が縮まないようにする */
html {
  min-width: 100vw;
}

// app/api/mcp/route.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { WebStandardStreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js";

async function handleMcpRequest(request: Request): Promise<Response> {
  const transport = new WebStandardStreamableHTTPServerTransport({
    sessionIdGenerator: undefined,  // ステートレス（Vercel Serverless向け）
    enableJsonResponse: true,       // SSEではなくJSONレスポンス
  });

  const server = new McpServer(
    { name: "ec-shop", version: "1.0.0" },
    { capabilities: {} },
  );

  registerProductTools(server);
  registerCartTools(server);
  registerOrderTools(server);
  registerResources(server);

  await server.connect(transport);
  const response = await transport.handleRequest(request);
  return addCorsHeaders(response);
}

ウィジェット CSP がこのテンプレートに設定されていません
ウィジェットドメインがこのテンプレートに設定されていません

✗ ツール: _meta.ui = { resourceUri, csp, domain }  ← NG
✓ ツール: _meta.ui = { resourceUri }                ← OK
✓ リソース: _meta.ui = { domain, csp, prefersBorder } ← CSP/domainはここ

// ツールの戻り値: content と structuredContent の両方を返す
const data = { count: results.length, products: summary };
return {
  structuredContent: data,                              // ← ChatGPT用
  content: [{ type: "text", text: JSON.stringify(data, null, 2) }], // ← Claude等用
};

1. ontoolresult（ext-apps標準）
   → Claude Desktop等で動作。structuredContentはスキーマ検証で空になる可能性あり。

2. 直接 postMessage リスナー（ext-appsのスキーマ検証をバイパス）
   → window.addEventListener("message") で ui/notifications/tool-result を直接処理。
   → structuredContent がそのまま届く。

3. window.openai.toolOutput（ChatGPT固有API）
   → ChatGPTが提供する専用API。ページロード時にツール結果がセットされている。

// View側の3つのデータ受信経路

// 経路1: ext-apps SDK経由（標準）
const { app } = useApp({
  onAppCreated: (app) => {
    app.ontoolresult = handleToolResult;
  },
});

// 経路2: postMessage直接リスン（ext-appsスキーマ検証バイパス）
useEffect(() => {
  const handler = (event: MessageEvent) => {
    if (event.source !== window.parent) return;
    const msg = event.data;
    if (msg?.jsonrpc === "2.0" && msg.method === "ui/notifications/tool-result") {
      handleToolResult(msg.params);
    }
  };
  window.addEventListener("message", handler, { passive: true });
  return () => window.removeEventListener("message", handler);
}, []);

// 経路3: ChatGPT固有API
useEffect(() => {
  const openai = (window as any).openai;
  if (openai?.toolOutput) handleToolResult(openai.toolOutput);
}, []);