WebMCP 如何融入使用者歷程

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

發布日期：2026 年 5 月 18 日

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 日訂購的 Cheddar Peelers，我已將一組套裝組合加入購物車，要繼續結帳嗎？" 接著，Jesse 就能快速從 Example Grocery Company 結帳，只訂購 Cheddar Peelers，或繼續瀏覽及購買其他產品。

協助使用者填寫表單

自動填入是相當實用的瀏覽器功能，如果部署得當，表單的放棄率可降低 75%。我們建議您使用自動填入功能建立表單，但您也可以透過 WebMCP 進一步提高完成率。

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

管理工作

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 工具。

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

活動服務要求

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

Charlie 向代理提出以下要求：

「請為我們在 2026 年 9 月 8 日的婚禮，尋找位於史普林菲爾德的餐飲服務供應商。我們希望為 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 要和家人搬到新城市，需要找一間公寓。所有房源網站都會列出不同資訊，有些網站會顯示相片，有些網站則提供多種篩選條件，包括價格、臥室、浴室和其他功能。部分房源會顯示確切位置，其他房源則可能只列出鄰近區域。

Dana 向代理提出以下要求：

「Show me apartments available to rent in Brooklyn that are less than a 10 minute walk of an A train station, and less than one hour to Tribeca. 公寓必須至少有三間臥室和洗碗機。住宅單位內或建築物內有洗衣機和烘衣機就太好了。我們的預算是 $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 間臥室和洗碗機)。代理程式會傳回地圖，其中包含連結至特定房源的圖釘，以及與翠貝卡之間的總距離。如果房源提供洗衣機和烘乾機等選用功能，圖釘會顯示不同顏色。

預訂旅程

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

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

搜尋

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

套用篩選器

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

代理程式回傳三間符合條件的飯店，並詢問：「要顯示更多選項嗎？還是有其他考量因素？"

提供意見

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