MCP AppsのECショップにApps SDKの他の機能も試してみた

registerAppTool(
  server,
  "search_products",
  {
    title: "商品検索",
    description: "キーワード、カテゴリ、タグで商品を検索します",
    inputSchema: { /* ... */ },
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: false,
    },
  },
  async ({ keyword, category, tags }) => { /* ... */ },
);

registerAppTool(
  server,
  "checkout",
  {
    title: "注文確定",
    description: "カートの商品を注文確定します",
    annotations: {
      readOnlyHint: false,
      destructiveHint: true,   // 取り消せない操作
      openWorldHint: false,
    },
  },
  async () => { /* ... */ },
);

function ProductModal({ product, onClose, onAddToCart, loading }: ProductModalProps) {
  const inChatGPT = isChatGPT();

  const askAI = () => {
    sendFollowUpMessage(`「${product.name}」について教えてください`);
  };

  const openProductPage = () => {
    openExternal(`https://www.google.com/search?q=${encodeURIComponent(product.name)}`);
  };

  return (
    <div style={{
      position: "fixed", inset: 0,
      background: "rgba(0,0,0,0.5)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 50,
    }}>
      <div style={{
        background: "var(--color-background-primary)",
        borderRadius: "var(--border-radius-lg)",
        padding: 16, maxWidth: 360, width: "90%",
      }}>
        {/* 商品画像 */}
        <ProductThumb productId={product.id} imageUrl={product.imageUrl} tags={product.tags} />

        {/* 商品情報 */}
        <h2>{product.name}</h2>
        <p className="price">{product.price}</p>

        {/* アクションボタン */}
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="btn btn--primary btn--sm" onClick={() => onAddToCart(product.id)}>
            + Cart
          </button>
          {inChatGPT && (
            <button className="btn btn--sm" onClick={askAI}>{"AIに相談"}</button>
          )}
          {inChatGPT && (
            <button className="btn btn--sm" onClick={openProductPage}>{"外部サイト"}</button>
          )}
        </div>
      </div>
    </div>
  );
}

export function sendFollowUpMessage(prompt: string, scrollToBottom = true): boolean {
  const api = getOpenAI();
  if (!api?.sendFollowUpMessage) return false;
  api.sendFollowUpMessage({ prompt, scrollToBottom });
  return true;
}

const askAI = () => {
  sendFollowUpMessage(
    `「${product.name}」について、どんなコーディネートに合うか教えてください。`
  );
};

// モーダル内のボタン
{inChatGPT && (
  <button className="btn btn--sm" onClick={askAI}>
    {"AIに相談"}
  </button>
)}

export function openExternal(href: string, redirectUrl?: string): boolean {
  const api = getOpenAI();
  if (!api?.openExternal) return false;
  api.openExternal({ href, redirectUrl });
  return true;
}

const openProductPage = () => {
  openExternal(
    `https://www.google.com/search?q=${encodeURIComponent(product.name)}`
  );
};

{inChatGPT && (
  <button className="btn btn--sm" onClick={openProductPage}>
    {"外部サイト"}
  </button>
)}

export function getLocale(): string {
  const env = getOpenAI() as Record<string, unknown> | null;
  if (env) {
    const locale = env?.locale;
    if (typeof locale === "string") return locale;
  }
  return navigator.language || "ja-JP";
}

const locale = getLocale();
const isEn = !locale.startsWith("ja");

// 在庫表示の切り替え
<span className={`badge ${outOfStock ? "badge--error" : "badge--success"}`}>
  {isEn
    ? outOfStock ? "Out of stock" : "In stock"
    : product.stock}
</span>