到目前为止智能体被迫像数字幽灵一样浏览网络——使用计算机视觉或脆弱的DOM抓取来猜测按钮的作用。这既缓慢、昂贵又容易产生幻觉——直到现在。Web MCP模型上下文协议由Google和Microsoft的工程师共同开发现在在Chromium 146.0.7672.0或更高版本上提供早期预览这是一个革命性的提案允许我们构建智能体原生的页面并改变网站与世界互动的方式。在本文中我将深入探讨我如何将一个受Airbnb启发的预订网站转变为智能体就绪平台展示代码、架构和性能数据以证明使用WebMCP的好处。1、问题当前网络智能体的视觉税当今天智能体帮助你在网络上寻找东西时它通常必须处理整个页面的DOM树或读取屏幕截图。这种视觉税由成千上万个HTML、CSS和元数据令牌组成而这些令牌实际上是智能体不需要的。WebMCP用正式合同取代了这一点。通过将结构化函数直接暴露给浏览器的模型上下文我们允许智能体完全绕过UI并与应用程序的核心逻辑交互。智能体抓取 vs WebMCP## 2、案例研究“AirBird”预订市场在Magic Patterns的帮助下我创建了一个名为AirBird的预订市场这是一个基于React的Web应用并集成了WebMCP命令式API。与声明式API使用HTML属性处理简单表单不同命令式API允许与应用程序状态进行深度集成——更多关于交互类型的信息在这里。Airbird主页## 3、完整的智能体工具集为了让AirBird能够完全被智能体导航我实现了六个原子工具search_listings入口点。设置位置、日期和客人数量。get_available_listings发现工具。返回可见属性的结构化JSON列表。filter_listings精度工具。按价格、设施和房间数量优化结果。select_listing导航器。将应用状态移动到特定属性的详情页面。reserve_listing动作工具。完成预订并触发确认流程。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的效率令牌细分结构化意图工具每次调用约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目前处于开发者预览阶段。要在你自己的机器上复现此功能使用 **Chrome 146**并启用#enable-webmcp-testing标志。安装模型上下文工具检查器扩展。遵循官方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汇智网翻译整理转载请标明出处原文链接WebMCP超越屏幕抓取 - 汇智网