> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# WebMCP：超越屏幕抓取
- URL: https://www.hubwiz.com/blog/webmcp-beyond-screen-scraping/
- Published: 2026-02-19T22:22:35.000Z
- Updated: 2026-02-19T22:56:14.000Z
- Description: 到目前为止，智能体被迫像数字幽灵一样浏览网络——使用计算机视觉或脆弱的DOM抓取来猜测按钮的作用。这既缓慢、昂贵，又容易产生幻觉。
- Author: admin
- Tags: AI, WEBMCP, #Import 2026-10-14 14:41

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

Web MCP（模型上下文协议）由Google和Microsoft的工程师共同开发，现在在Chromium 146.0.7672.0或更高版本上[提供早期预览](https://developer.chrome.com/blog/webmcp-epp?ref=hubwiz.com)，这是一个革命性的提案，允许我们构建智能体原生的页面，并改变网站与世界互动的方式。

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

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

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

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

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

![None](https://www.hubwiz.com/blog/content/images/2026/02/1-44hEuuECt8casPWGBBULng-3.png)

智能体抓取 vs WebMCP

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

在[Magic Patterns](https://www.magicpatterns.com/?ref=hubwiz.com)的帮助下，我创建了一个名为"AirBird"的预订市场，这是一个基于React的Web应用，并集成了WebMCP**命令式API**。与声明式API（使用HTML属性处理简单表单）不同，命令式API允许与应用程序状态进行深度集成——[更多关于交互类型的信息在这里](https://developer.chrome.com/blog/webmcp-epp?ref=hubwiz.com#structured%5Finteractions%5Ffor%5Fthe%5Fagentic%5Fweb)。

![None](https://www.hubwiz.com/blog/content/images/2026/02/1-UquBl--iK9LQ1pvGvwFWBA-3.png)

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运行的工具：

![](https://www.hubwiz.com/blog/content/images/2026/02/image-77.png)

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

![None](https://www.hubwiz.com/blog/content/images/2026/02/1-9GFm8Dl7ReUWCP4IEinJ3g-3.png)

**令牌细分：**

- **结构化意图（工具）**：每次调用约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. 安装[模型上下文工具检查器扩展](https://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd?ref=hubwiz.com)。
3. 遵循官方[WebMCP文档](https://github.com/webmachinelearning/webmcp?ref=hubwiz.com)。

用于构建Air Bird的代码可以在[https://github.com/hugozanini/air-bird-booking-web-mcp](https://github.com/hugozanini/air-bird-booking-web-mcp?ref=hubwiz.com)访问

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

---

原文链接: [Moving Beyond Screen Scraping: Creating an Agent-Native Web App with WebMCP](https://medium.com/data-science-collective/moving-beyond-screen-scraping-creating-an-agent-native-web-app-with-webmcp-4818552e1e11?ref=hubwiz.com)

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

---

原文链接: [Moving Beyond Screen Scraping: Creating an Agent-Native Web App with WebMCP](https://medium.com/data-science-collective/moving-beyond-screen-scraping-creating-an-agent-native-web-app-with-webmcp-4818552e1e11?ref=hubwiz.com)

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