ユーザー ジャーニーにおける WebMCP の役割

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

公開日: 2026 年 5 月 18 日

商品の解説 ウェブ 拡張機能 Chrome ステータス インテント
GitHub オリジン トライアル オリジン トライアル 表示 テストの目的

WebMCP には多くの用途があります。このドキュメントでは、ユーザーとそのエージェントをサポートするために WebMCP を実装する方法について説明します。このプロセスをユーザーとエージェントの視点から説明し、重要なユーザー ジャーニー（CUJ）をサポートするために提供できるツールの推奨事項を示します。

ユーザーの購入をサポートする

小売店のデベロッパーは WebMCP の有力な候補です。コレクションの欠けているピースを見つけるなど、ユーザーがアイテムを手動で選択したい状況もありますが、タスクを完了するだけでよい状況もあります。たとえば、毎週の食料品リスト、パーティーの計画、お気に入りの購入品の再注文などです。

これらのショッピング CUJ のユーザーは Jesse です。Jesse は、探しているものを正確に見つけるためにカテゴリを横断して検索するのに時間をかけたくありません。代わりに、ブラウザ エージェントを利用してショッピングのニーズを満たし、欲しいものをより早く見つけて、より早くチェックアウトできるようにしています。

ショッピング ジャーニーをサポートする

ジェシーは、子供の 10 歳の誕生日パーティーの用品を買いに行くことにしました。パーティーのテーマは宇宙で、ジェシーはすでに買い物リストを作成しています。一部の用品は専門店から、一部は大型店から、一部はパーティー用品の専門店から購入する必要があるかもしれません。

Jesse はブラウザ エージェントに「ショッピング リストにある商品の最安値を 2、3 軒の地元の店舗で調べて」と依頼します。ほしいものリストを作成して、購入手続きを完了できるようにしてください。見つからない商品がありましたら、お知らせください。」

Jesse はこの質問をする際に、いくつかの前提条件を立てています。たとえば、エージェントが同じ商品を複数のカートに追加しないこと、2 つの店舗に商品がある場合、エージェントがどちらの費用が安いかを判断してそのカートに追加することなどです。また、Jesse は、スプリングフィールドにある店舗を「地元の店舗」と想定しています。

地元企業の Space Shoppe のデベロッパーとして、子供向けのパーティー用品を大量に推奨する場合でも、大規模な食料品チェーンのデベロッパーでも、Jesse のエージェントをサポートするツールを構築できます。

  • search_products(): Jesse が買い物リストの期待を満たすカテゴリ内の候補アイテムを見つけるため。たとえば、productType="wall-decorations"、category="planets"、age="child" など。
  • add_to_wishlist() で、カートに追加する前にすべてのアイテムを確認します。
  • Jesse が特定金額以下のすべての商品をリクエストした場合は、refine_search(priceRange = "0-49.99") などの検索を絞り込むツールを提案できます。

リピート購入をサポートする

Jesse は Example Grocery Company のチーズスティックが好きですが、ブランド名を思い出せません。Jesse はエージェントに「先月買ったチーズスティックを再注文できますか？」と尋ねます。

定期購入サービスを提供していない場合でも、エージェントと協力して、お客様が同じ商品を再度注文できるようにすることができます。Example Grocery Company のデベロッパーとして、次のようなツールを提供できます。

  • get_order_history(startdate="",enddate="",)。注文日と配送ステータスを含む商品の詳細を返します。
  • add_to_wishlist(productId="XYZ", quantity = 1) で、カートに追加する前にすべてのアイテムを確認します。
  • delivery(method="pickup")

エージェントは Jesse に「3 月 7 日のチェダー ピールズのご注文を確認いたしました。1 つのパッケージをカートに追加しました。Would you like to proceed to checkout?（お支払い手続きに進みますか？）" Jesse は、Example Grocery Company で簡単に購入手続きを済ませて Cheddar Peelers だけを注文することも、引き続き他の商品を閲覧して購入することもできます。

フォームの入力を簡単にする

自動入力は非常に便利なブラウザ機能であり、正しく実装すればフォームの離脱率を 75%削減できます。自動入力に対応したフォームを作成することをおすすめしますが、WebMCP を使用すれば、完了率をさらに高めることができます。

WebMCP を使用すると、ユーザーのエージェントが長いフォームをすばやく正確に入力できます。次のセクションでは、チャーリーがさまざまな複雑なフォームに記入する様子を説明します。

作業を管理する

チャーリーは法律事務所の IT 部門で働いており、新しいウェブサイトを設計するよう請負業者に依頼しました。経費とタイムシートの管理は非常に面倒でした。特に、弁護士のタイムシートとは異なる要件があるため、

あなたは業務管理ソフトウェア会社に勤務しており、すべてのベンダーと弁護士が正しいコンテキストでタイムシートを入力できるようにして、会社が適切な部門に適切な金額を請求できるようにしたいと考えています。WebMCP ツールを追加して、Charlie の請負業者と弁護士がエージェントを使用して毎日のタイムシート タスクを入力できるようにします。

<form toolname="add-to-timesheet"
  tooldescription="Report billing task and time to add to the timesheet."
  toolautosubmit>

  <fieldset>
    <label for="date">Date</label>
    <input name="date" type="datetime-local" toolparamdescription="Date of work.">

    <label for="task_category">Task category</label>
    <select id="task_category" name="task_category"
    toolparamdescription="Type of task completed per time block">
      <option value="admin">Admin</option>
      <option value="billing">Billing</option>
      <option value="client">Client meetings or communication</option>
      <option value="development">Development</option>
    </select>

    <label for="minutes_worked">Minutes working on the task</label>
    <input type="number" id="minutes_worked" name="minutes_worked" min="30" max="600"
      toolparamdescription="Minutes worked on this date and task, with a minimum of 30 and maximum of 600."
      placeholder="60">

    <label for="work_details">Details</label>
    <input name="work_details"
      toolparamdescription="Additional details of work completed, for managerial review.">

  </fieldset>
  <button type="submit">Update timesheet</button>
</form>

車を購入する

チャーリーは中古車を探しています。車の種類、座席数、希望する燃料など、特に重視する機能がいくつかあります。車の色やバックカメラなどの設備は、それほど重要ではありません。チャーリーはエージェントに「ファミリーカーを探してくれませんか？7 人乗りで、レギュラー ガソリンを使用し、過去 10 年間のモデルである必要があります」と依頼します。

ウェブサイトに必須フィールドと任意フィールドを含むフォームがすでに存在する場合は、フォームを WebMCP ツールに変換するのに 2 つの手順しか必要ありません。

HTML

<form toolname="search_cars"
  tooldescription="Search for cars based on various criteria such as type, seats, year, fuel, and features."
  toolautosubmit>

  <fieldset>
    <label for="car_type">Car Type</label>
    <select id="car_type" name="car_type" toolparamdescription="Type of car">
      <option value="">Any</option>
      <option value="family">Family Car</option>
      <option value="suv">SUV</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="seats">Min Seats</label>
    <input type="number" id="seats" name="seats" min="1" max="9"
      toolparamdescription="Minimum number of seats required"
      placeholder="7">

    <label for="min_year">Minimum Year</label>
    <input type="number" id="min_year" name="min_year" min="1900" max="2026"
      toolparamdescription="Find cars made after a specific year"
      placeholder="2016">
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>

    <label for="fuel_type">Fuel Type</label>
    <select id="fuel_type" name="fuel_type" toolparamdescription="Preferred fuel type">
      <option value="">Unleaded regular</option>
      <option value="">Unleaded premium</option>
      <option value="diesel">Diesel</option>
      ...
    </select>

    <div>
      <input type="checkbox" id="has_ac" name="has_ac" value="true"
        toolparamdescription="Check if air conditioning is required">
      <label for="has_ac">Air Conditioning (AC)</label>
    </div>
  </fieldset>

  <button type="submit">Search Cars</button>
</form>

JavaScript

search_cars({car_type, seats, min_year, fuel_type, has_ac, ... })

保証請求

チャーリーさんはテレビの保証請求を希望しています。テレビを注文したウェブサイトのメインページに移動します。すぐにエージェントに意図を伝えます。

「サポートページに移動して、テレビの保証請求を行ってください。画面がオンにならない。シリアル番号は XYZ-987 です。残りの情報は保存済みの情報を使用します。」

WebMCP ツールを使用するエージェントが補償請求手続きを開始し、必要な情報をすべて入力します。エージェントが追加情報を必要とする場合は、お客様にその情報をエージェントに提供していただくか、フォームに手動で入力して送信していただくよう依頼します。

  • start_claim_process() をクリックして、適切なフォームに移動します。
  • populate_product_details(serial_number, purchase_date) をクリックして、特定の商品と日付の情報を入力します。
  • describe_issue(issue_description) を使用して、ユーザーのプロンプトから障害の説明を長文テキスト フィールドに入力します。
  • populate_contact_info(name, email, phone)

このケースでは、WebMCP ツールを提供することで、ユーザーは保証請求フォームの場所を理解しなくても、エージェントのサポートを受けながらウェブサイトを操作できます。Charlie は、ウェブサイトの構造を詳しく理解しなくても、ユーザー ジャーニーを完了できました。

イベント サービスのリクエスト

チャーリーとジェシーは 9 月に結婚式を挙げる予定で、ケータリング業者を雇いたいと考えています。この地域には数十のケータリング業者がおり、各リクエストに必要な情報が含まれていて、同じタイプのサービスを求めていることを確認したいと考えています。

Charlie はエージェントに次のように尋ねます。

「2026 年 9 月 8 日の結婚式で、スプリングフィールドを拠点とするケータリング業者について問い合わせを送信してもらえますか？100 人分のベジタリアン メニューを希望しています。ゲストのうち 2 人は食事制限があるため、コーシャ料理やグルテンフリー料理などの特別な食事が必要です。ビールとワインのみを含めてください。」

次のツールを追加して、Charlie のエージェントがケータリング会社に問い合わせを送信できるようにします。

  • start_event_request()
  • create_wedding_reception(guests=100,date="September 8, 2026")
  • add_dietary_restrictions(restrictions=["kosher","gluten-free"], guests = 2)
  • select_drink_package(package = "Light")
  • submit_event_request()

ユーザーが情報をフィルタできるようにする

複雑なフィルタを備えたアイテムの大きなコレクションがあるサイトは数多くあります。何百、何千ものリスティングがあり、それぞれにユーザーが探している可能性のある独自の機能の組み合わせがあります。たとえば、住宅賃貸ウェブサイト、ホテル予約サイト、チケット販売サイトなどがあります。

このセクションでは、Dana が自分の好みに合ったオプションを見つけるのを手伝います。

関連性の高い住宅物件を見つける

ダナさんは家族と一緒に新しい街に引っ越すため、アパート・マンションを探しています。すべてのホームサイトにさまざまな情報が掲載されており、写真が掲載されているサイトもあれば、価格、寝室、浴室、その他の機能など、さまざまな種類のフィルタが用意されているサイトもあります。正確な住所が記載されているリスティングもあれば、近隣地域のみが記載されているリスティングもあります。

Dana はエージェントに次のように尋ねます。

「ブルックリンで、A 線の駅から徒歩 10 分以内、トライベッカまで 1 時間以内の賃貸アパートを探して。アパート・マンションには少なくとも 3 つのベッドルームと食器洗い機が必要です。室内または建物内に洗濯機と乾燥機があると便利です。予算は 4,500 ドルです。」

Dana のエージェントが適切で関連性の高い賃貸物件を見つけられるようにするには、物件掲載サイトにエージェント向けのフィルタを追加します。

search(
  max-price=4500,
  location="Brooklyn",
  features=["dishwasher"],
  rooms=3,
  optionalFeatures=["washer-dryer"]
)

フィルタを適用する

apply_filters(
  transit="train",
  max_time="1 hour",
  destination="Tribeca"
)

エージェントはこれらの関数を使用して物件のメタデータを解析し、結果がすべての要件（3 ベッドルーム、食洗機など）を満たしていることを確認します。これに対し、エージェントは、特定のリスティングにリンクするピンと、トライベッカからの合計距離を含む地図を返します。リスティングにオプション機能（洗濯機や乾燥機など）がある場合は、ピンの色が異なります。

旅行の予約

ダナさんと妻のロザリオさんは、ドイツのベルリンへの旅行を計画しています。ダナさんは、予算内で快適に過ごせるホテルを探しています。ダナさんはエージェントに「ドイツのベルリンで、1 泊 300 ドル以下で、プールと朝食が含まれているホテルをいくつか探して」と依頼します。

あなたは、お得な旅行情報を探しているユーザー向けの旅行予約サービスのデベロッパーです。

検索

search_hotels(location = "Berlin", guests = 2)

フィルタを適用する

filter_search_results(max_price=300,amenities=["pool","restaurant"])

エージェントは条件を満たす 3 つのホテルを提示し、「他にもオプションを表示しますか？それとも、他に考慮すべき条件はありますか？」と尋ねます。

フィードバックをお寄せください

WebMCP はどのようなユーザー ジャーニーに役立つと思いますか？API に追加してほしい機能はありますか？これらの API を試してフィードバックをお寄せください。