WebMCP 如何融入用户体验历程

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

Published: May 18, 2026

WebMCP 有许多可能的用途。在本文档中，您将了解如何实现 WebMCP，以支持用户及其代理。您将从用户和客服人员的角度了解此过程，并获得有关可用于支持 关键用户历程 (CUJ) 的工具的建议。

帮助用户购物

零售商店的开发者非常适合使用 WebMCP。虽然在某些情况下，用户可能希望亲自挑选商品，例如寻找其收藏品中缺失的一件，但在其他情况下，用户只是需要完成任务。这可能是他们的每周购物清单、派对策划或重新订购喜爱的商品。

在这些购物 CUJ 中，我们的用户是 Jesse。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>

购买汽车

Charlie 打算购买一辆二手车。他非常关心一些功能，例如汽车类型、座位数和首选燃料。其他功能（例如汽车颜色和备用摄像头等便利设施）则不太重要。Charlie 向代理询问：“你能帮我找一辆家用车吗？它必须有 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, ... })

质保服务申请

Charlie 想要为他的电视提交质保服务申请。他进入了订购电视的网站的主页。他立即向代理说明了自己的意图：

“前往支持页面，为我的电视提交质保服务申请。屏幕无法打开。序列号是 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 向代理询问：

“请向我展示布鲁克林可供出租的公寓，这些公寓距离 A 线地铁站步行不到 10 分钟，距离翠贝卡不到 1 小时。公寓必须至少有三间卧室和一个洗碗机。如果公寓内或大楼内有洗衣机和烘干机就更好了。我们的预算是 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 计划前往德国柏林度假。Dana 希望找到符合其条件的酒店选项，以经济实惠的价格提供舒适的住宿。Dana 向代理询问：“请在德国柏林找到几家每晚价格低于 300 美元、带游泳池且包含早餐的酒店。”

您是旅行预订服务的开发者，旨在为用户找到优惠的旅行套餐：

搜索

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

应用过滤器

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

Dana 的代理返回了三家符合条件的酒店，并询问：“您想让我向您展示更多选项吗？或者您还有其他需要考虑的条件吗？”

分享您的反馈

您认为哪些类型的用户历程可以从 WebMCP 中受益？是否可以向 API 添加其他功能来满足您的期望？ 如果您尝试使用这些 API 并有反馈，我们很乐意倾听。