ECサイトの商品検索をAIに公開する

「〇〇を探して」に商品一覧で答え、購入までの操作は通常UIに残す構成です。

ライブデモ

対応環境では search_products ツールが登録されます。未対応の環境では、同じ検索フォームが通常UIとして動きます。

Live tool

search_products

対応状況を確認中
input{"type":"object","properties":{"query":{"type":"string","description":"商品名のキーワード"},"maxPrice":{"type":"integer","description":"価格上限 (円)。未指定なら上限なし"}},"required":["query"],"additionalProperties":false}
result

入力例を選ぶか、フォームから実行できます。

実装コード

価格帯の指定を任意で受けられます。数値の範囲は検証してから処理に渡し、返す商品データは公開情報だけにします。

JavaScriptImperative API
await document.modelContext.registerTool({
  name: "search_products",
  title: "商品を検索",
  description:
    "販売中の商品をキーワードと価格帯で検索する。カート投入や購入は行わない。",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "商品名のキーワード" },
      maxPrice: { type: "integer", description: "価格上限 (円)。未指定なら上限なし" },
    },
    required: ["query"],
    additionalProperties: false,
  },
  annotations: { readOnlyHint: true },
  execute: async ({ query, maxPrice }) => {
    if (typeof query !== "string" || query.length > 60) {
      throw new Error("queryには60文字以内の文字列を指定してください。");
    }
    if (maxPrice !== undefined && (typeof maxPrice !== "number" || maxPrice < 1)) {
      throw new Error("maxPriceは1以上の整数で指定してください。");
    }
    return searchProducts(query, maxPrice);
  },
});

安全設計

  • 検索は読み取り専用。カート投入・購入はしない
  • 在庫数や仕入れ価格など、公開すべきでない値は返さない
  • 購入は通常UIのカートと決済フローで、人間が確認して実行する
  • 未対応ブラウザでは、同じ検索フォームを通常UIとして使える
次の行動

あなたのサイトを診断する

公開URLから、WebMCPの導入候補を確認できます。

対応を診断