WebMCP 如何融入使用者歷程

Alexandra Klepper

發布日期：2026 年 5 月 18 日

說明影片	網頁	擴充功能	Chrome 狀態	意圖
GitHub	來源試用		總覽	實驗意圖

WebMCP 的用途非常廣泛，本文將說明如何實作 WebMCP，以支援使用者和代理程式。您可以從使用者和服務專員的角度，瞭解這個程序，並根據關鍵使用者歷程 (CUJ)，選擇合適的工具來提供支援。

協助使用者購物

零售商店開發人員非常適合使用 WebMCP。雖然在某些情況下，使用者可能想親自挑選商品，例如尋找缺少的收藏品，但在其他情況下，使用者只是想完成任務。這可能是每週的購物清單、派對規劃，或是重新訂購喜愛的商品。

這些購物 CUJ 的使用者是 Jesse。Jesse 不想花時間在各類別中搜尋，只為找到確切想要的商品。因此，他會依賴瀏覽器代理程式來滿足購物需求，更快找到想要的商品，並快速結帳。

支援購物歷程

傑西決定為孩子的 10 歲生日派對採買用品。派對主題是外太空，Jesse 已經擬好購物清單。有些用品可能需要從專門的雜貨店購買，有些則要從大型商店購買，有些則要從派對用品專賣店購買。

Jesse 向瀏覽器代理程式提出要求：「在兩到三間當地商店中，找出購物清單上產品的最佳價格。幫我建立願望清單，以便完成結帳。如果找不到某些產品，請告訴我。」

Jesse 提出這個問題時，做了一些假設。包括不會在多個購物車中加入相同商品。如果兩家商店都有某項商品，服務專員會判斷哪家商店的價格較低，並將商品加入該商店的購物車。Jesse 也假設 Springfield 的當地商店是她所在地的商店。

無論您是當地商家 Space Shoppe 的開發人員，需要為孩子推薦大量派對用品，還是大型連鎖雜貨店的開發人員，都可以建構工具來支援 Jesse 的代理程式。

• search_products()，讓 Jesse 找出符合購物清單期望的類別項目。例如 productType="wall-decorations"、category="planets" 和 age="child"。
• add_to_wishlist()，讓 Jesse 先查看所有商品，再將商品加入購物車。
• 如果 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)，讓 Jesse 先查看所有商品，再將商品加入購物車。
• delivery(method="pickup")

服務專員回覆 Jesse：「我們已找到你 3 月 7 日訂購的切達起司削皮器，並將一包加入購物車。要繼續結帳嗎？」 Jesse 接著就能快速在 Example Grocery Company 結帳，只訂購切達起司削皮器，或是繼續瀏覽及購買其他產品。

協助使用者填寫表單

自動填入是相當實用的瀏覽器功能，如果部署正確，表單的放棄率可降低 75%。我們建議您建構支援自動填入的表單，但如果使用 WebMCP，完成率還能進一步提升。

WebMCP 可協助使用者代理程式快速且正確地填寫長表單。 在接下來的章節中，我們會引導 Charlie 填寫各種複雜的表單。

管理工作

查理是律師事務所的 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 工具。

<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>

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 順利完成使用者歷程，不必詳細瞭解網站結構。

活動服務要求

Charlie 和 Jesse 將於 9 月結婚，他們想聘請餐飲服務供應商。他們所在地區有數十家餐飲服務供應商，因此想確保每項要求都包含必要資訊，且要求的是相同類型的服務。

Charlie 向代理提出以下要求：

「請為我們在 2026 年 9 月 8 日的婚禮，詢問位於 Springfield 的外燴業者。我們需要 100 位賓客的素食菜單。其中兩位賓客有飲食限制，需要特別餐點，包括猶太潔食和無麩質餐點。我們只提供啤酒和葡萄酒。」

新增下列工具，協助 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 向代理提出以下要求：

「請幫我找布魯克林區的公寓，步行 10 分鐘內可達 A 列車站，且 1 小時內可抵達翠貝卡。公寓必須至少有三間臥室和洗碗機，如果屋內或大樓內有洗衣機和烘乾機就更好了。我們的預算為 $4500 美元。」

在房源網站中加入方便仲介使用的篩選條件，協助 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 間臥室和洗碗機)。代理程式會傳回地圖，其中包含連結至特定房源的圖釘，以及與翠貝卡區的總距離。如果房源提供洗衣機和烘乾機等選用功能，圖釘會以不同顏色顯示。

預訂旅程

達娜和妻子羅莎里奧打算前往德國柏林度假。達娜希望找到符合條件的飯店，提供舒適的住宿體驗，且價格在可負擔範圍內。達娜向服務專員提出要求：「請幫我找幾間德國柏林的飯店，每晚價格低於 $300 美元，且附設游泳池和早餐。」

您是旅遊預訂服務的開發人員，希望為使用者提供超值旅遊優惠：

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

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

代理人為 Dana 找出三間符合條件的飯店，並詢問：「要顯示更多選項嗎？還是有其他條件需要考慮？」

提供意見

您認為哪些類型的使用者歷程可從 WebMCP 受惠？是否有其他功能可以加入 API，以符合您的期望？如果您試用這些 API 並有任何意見，歡迎與我們分享。

• 閱讀 WebMCP 說明、提出問題並參與討論。
• 在 Chrome 狀態中查看 Chrome 的實作情形。
• 加入搶先體驗計畫，提前瞭解新 API 並加入我們的郵寄清單。
• 如要對 Chrome 的實作方式提供意見，請回報 Chromium 錯誤。