AI

WebMCP：超越屏幕抓取

到目前为止，智能体被迫像数字幽灵一样浏览网络——使用计算机视觉或脆弱的DOM抓取来猜测按钮的作用。这既缓慢、昂贵，又容易产生幻觉。

admin

• 6 min read
WebMCP：超越屏幕抓取
AI编程/Vibe Coding 遇到问题需要帮助的，联系微信 ezpoda，免费咨询。

到目前为止，智能体被迫像数字幽灵一样浏览网络——使用计算机视觉或脆弱的DOM抓取来猜测按钮的作用。这既缓慢、昂贵，又容易产生幻觉——直到现在。

Web MCP（模型上下文协议）由Google和Microsoft的工程师共同开发，现在在Chromium 146.0.7672.0或更高版本上提供早期预览，这是一个革命性的提案，允许我们构建智能体原生的页面，并改变网站与世界互动的方式。

在本文中，我将深入探讨我如何将一个受Airbnb启发的预订网站转变为智能体就绪平台，展示代码、架构和性能数据，以证明使用WebMCP的好处。

1、问题：当前网络智能体的"视觉税"

当今天智能体帮助你在网络上寻找东西时，它通常必须处理整个页面的DOM树或读取屏幕截图。这种"视觉税"由成千上万个HTML、CSS和元数据令牌组成，而这些令牌实际上是智能体不需要的。

WebMCP用正式合同取代了这一点。

通过将结构化函数直接暴露给浏览器的模型上下文，我们允许智能体完全绕过UI，并与应用程序的核心逻辑交互。

None
智能体抓取 vs WebMCP

2、案例研究："AirBird"（预订市场）

在Magic Patterns的帮助下，我创建了一个名为"AirBird"的预订市场，这是一个基于React的Web应用，并集成了WebMCP命令式API。与声明式API（使用HTML属性处理简单表单）不同，命令式API允许与应用程序状态进行深度集成——更多关于交互类型的信息在这里。

None
Airbird主页

3、完整的智能体工具集

为了让AirBird能够完全被智能体导航，我实现了六个原子工具：

  1. search_listings：入口点。设置位置、日期和客人数量。
  2. get_available_listings：发现工具。返回可见属性的结构化JSON列表。
  3. filter_listings：精度工具。按价格、设施和房间数量优化结果。
  4. select_listing：导航器。将应用状态移动到特定属性的详情页面。
  5. reserve_listing：动作工具。完成预订并触发确认流程。
  6. go_back_home：重置工具。将智能体返回主搜索网格。

以下是实现的两个工具示例。

3.1 发现模式：get_available_listings

网络智能体的最大障碍是看到结果。如果智能体调用搜索工具，它如何知道找到了什么？我实现了一个发现工具，返回当前可见列表的结构化JSON有效负载。

{
  name: 'get_available_listings',
  description: 'Get the list of property listings currently visible after search/filters.',
  inputSchema: { type: 'object', properties: {} },
  execute: () => {
    // Return structured data, not HTML
    const results = filteredListings.map(listing => ({
      id: listing.id,
      title: listing.title,
      price: listing.price,
      rating: listing.rating
    }));
    return { 
      content: [{ 
        type: 'text', 
        text: `Found ${results.length} results: ${JSON.stringify(results)}` 
      }] 
    };
  }
}

3.2 高保真动作：reserve_listing

我没有让智能体点击预订按钮并希望它起作用，而是提供了一个明确的预订工具。该工具处理业务逻辑（计算费用、检查日期）并返回结构化确认。

{
  name: 'reserve_listing',
  description: 'Complete the reservation for the selected property.',
  inputSchema: {
    type: 'object',
    properties: {
      checkIn: { type: 'string', description: 'YYYY-MM-DD' },
      checkOut: { type: 'string', description: 'YYYY-MM-DD' },
      guests: { type: 'number' }
    },
    required: ['checkIn', 'checkOut', 'guests']
  },
  execute: (params) => {
    if (!selectedListing) return { content: [{ type: 'text', text: 'Error: No listing selected.' }] };
    
    // Internal state management
    handleReserve({ ...params, listingId: selectedListing.id });
    
    return { content: [{ type: 'text', text: 'Reservation confirmed!' }] };
  }
}

4、性能分析

我使用以下提示词通过MCP工具检查器运行了完整的预订流程：

为我找到旧金山的一个整套房屋，可容纳3位客人，至少有2间卧室，每晚最高价格为300美元，然后在3月1日至7日之间预订

下面的视频是使用gemini-2.5-flash运行的工具：

通过分析执行跟踪，我们可以看到WebMCP的效率：

None

令牌细分：

  • 结构化意图（工具）：每次调用约900个令牌。
  • 发现内容：37个列表约950个令牌（JSON）。
  • 总使用量：对于复杂的5步交易，约15,000个令牌（0.0045美元）。

结果：传统的DOM抓取智能体可能会在每个步骤消耗5到10倍的令牌，仅仅是为了重新解析复杂的React页眉、页脚和递归组件树。通过使用WebMCP，我们不仅让它更快；我们让它更加确定性和成本高效。

5、处理同步状态

在开发过程中，我发现了一种称为状态到工具同步的模式。

在React中，WebMCP工具必须在监听状态更改的useEffect中重新注册。

useEffect(() => {
  // 注册工具...
}, [selectedListing, filteredListings, searchFilters, filters, activeCategory]);

如果你不将搜索结果或过滤器包含在依赖数组中，你的AI智能体将受到过期闭包的影响，调用引用应用状态旧版本的工具。

最佳实践：你的工具的好坏取决于它们所关闭的状态。始终将你的注册表与UI的单一真相源同步。

6、如何自己构建

WebMCP目前处于开发者预览阶段。要在你自己的机器上复现此功能：

  1. 使用 Chrome 146+并启用#enable-webmcp-testing标志。
  2. 安装模型上下文工具检查器扩展。
  3. 遵循官方WebMCP文档。

用于构建Air Bird的代码可以在https://github.com/hugozanini/air-bird-booking-web-mcp访问

我希望这个项目能够启发你思考如何使用Web MCP来为你的下一个Web应用提供动力。

原文链接: Moving Beyond Screen Scraping: Creating an Agent-Native Web App with WebMCP

汇智网翻译整理，转载请标明出处

原文链接: Moving Beyond Screen Scraping: Creating an Agent-Native Web App with WebMCP

汇智网翻译整理，转载请标明出处