谷歌发布WebMCP预览版：把每个网站都变成MCP服务器

作者： Cashcow
2026年02月25日
动态

长期以来，当AI智能体（AI Agent）访问网页时，它们更像是“不通语言的游客”。无论是基于LangChain还是OpenClaw框架，这些智能体往往只能笨拙地猜测该点击哪个按钮：要么抓取混乱的原始HTML，要么将网页截图发送给多模态模型进行视觉识别。这种方式不仅在“烧”掉成千上万的Token，而且极其不稳定，常常因为一个UI组件的微调而崩溃。

近日，谷歌Chrome团队正式推出了 WebMCP（Web Model Context Protocol，网页模型上下文协议） 的早期预览版（集成于Chrome 146 Canary版本）。这一由谷歌与微软工程师共同开发、并由W3C Web机器学习社区组孵化的拟定标准，旨在改变这一现状：通过全新的浏览器API，让任何网站都能直接向AI智能体开放结构化的、可调用的工具。

一、从“屏幕抓取”到“原生对话”

目前，AI智能体与网页交互主要依赖两种模式：视觉截屏识别和DOM解析。

截屏模式：智能体将图片传给多模态模型（如Gemini或Claude），试图识别搜索框或按钮的位置。这种方式延迟高，且每张图都会消耗巨量Token。
DOM解析模式：智能体读取原始HTML代码。然而，HTML是为人类视觉设计的，充斥着大量对AI任务毫无意义的CSS规则和结构标签，这会迅速挤占大模型的上下文窗口，推高推理成本。

WebMCP的出现，相当于为网站提供了一本“官方说明书”。 开发者通过 navigator.modelContext API，可以将网站的功能直接包装成AI可读的“工具”。

二、WebMCP的核心逻辑：两大API

WebMCP 提出了两个互补的 API，作为网站与 AI 智能体之间的桥梁：

声明式 API（Declarative API）：针对标准化的HTML表单。如果企业的网页表单结构良好，开发者只需在现有的HTML标记中添加工具名称和描述，即可让AI智能体直接调用。这意味着现有网站80%的功能可以无缝转换。
命令式 API（Imperative API）：针对复杂的动态交互。开发者可以在客户端JavaScript中定义丰富的工具模式（类似OpenAI的Tool Calling定义）。例如，电商网站可以注册一个 searchProducts(query, filters) 函数，AI只需发起一次结构化调用，即可获得JSON格式的结果，而无需反复点击筛选框、翻页和截图。

三、企业级应用的“降本增效”

对于正在布局AI智能体的企业而言，WebMCP 解决了三个核心痛点：

大幅降低成本：通过结构化调用替代一系列的视觉识别和重复推理，Token消耗将显著减少。
提高可靠性：智能体不再需要“猜测”页面结构。当网站明确发布了工具契约（函数名、参数、返回值）时，交互变得确定且可控，不再受UI改版的影响。
加速开发效率：前端团队可以直接利用现有的客户端JavaScript逻辑封装工具，无需为了对接AI而专门构建复杂的后端MCP服务器或API接口。

四、“人机协作”而非“全自动取代”

值得注意的是，WebMCP 的设计初衷并非为了让“无头浏览器”进行全自动化操作，而是强调人机协作（Human-in-the-loop）。

谷歌Chrome首席软件工程师Khushal Sagar指出，该规范围绕三个支柱构建：上下文（Context）、能力（Capabilities）和协调（Coordination）。WebMCP 设想的场景是：当用户在浏览器中寻找特定商品时，AI助手可以调用网页暴露的工具辅助筛选，并将结果实时更新在用户正在观看的页面上。这是一种流畅的、用户在场并协作的浏览体验，而非不受监管的自动化脚本。

五、行业影响：与Anthropic MCP互补

尽管名字相近，但 WebMCP 并非 Anthropic 发布的 MCP（模型上下文协议）的替代品。

两者是互补关系：Anthropic 的 MCP 主要在后端运行，连接AI平台与托管服务器；而 WebMCP 运行在浏览器客户端。一家旅游公司可以同时实施两者：通过后端MCP处理API数据集成，通过前端WebMCP让用户在浏览器会话中实现更智能的交互。

六、未来展望

目前，WebMCP 已在 Chrome 146 Canary 中可通过 chrome://flags 开启测试。虽然目前仅谷歌和微软（Edge）表现出明确的推进意愿，但随着 W3C 正式草案的推进，行业观察家预计正式的大规模推广将在 2026年中后期。

Sagar 将 WebMCP 比作 AI 时代的 “USB-C 接口”。一旦普及，它将终结目前这种靠“暴力抓取”和“脆弱脚本”维系的AI上网方式，让Web真正成为智能体的原生栖息地。

七、技术实现

深入到技术实现层面，WebMCP 的核心在于 navigator.modelContext 这个全新的浏览器对象。它将网页原本零散的 JavaScript 函数，通过“合约（Contract）”的形式标准化，使 AI 智能体能够像调用 API 一样操作网页。

以下是开发者利用 Imperative API（命令式 API） 在网页中注册工具的技术细节和代码示例。

1. `registerTool`：定义 AI 的“手”

要让 AI 明白它能做什么，开发者需要提供工具的名称、自然语言描述以及符合 JSON Schema 规范的参数定义。

技术流程图解

代码示例：注册一个“商品搜索”工具

JavaScript

// 检查浏览器是否支持 WebMCP
if ('modelContext' in navigator) {
  
  // 注册一个名为 'search_products' 的工具
  navigator.modelContext.registerTool({
    name: 'search_products',
    description: '根据关键词和价格区间搜索站内商品，并返回结构化结果。',
    
    // 定义参数模式，帮助 AI 理解需要传递什么数据
    parameters: {
      type: 'object',
      properties: {
        query: {
          type: 'string',
          description: '用户想要寻找的商品关键词（如：环保连衣裙）'
        },
        minPrice: { type: 'number', description: '最低价格' },
        maxPrice: { type: 'number', description: '最高价格' }
      },
      required: ['query']
    },

    // 当 AI 调用该工具时执行的逻辑
    handler: async (args) => {
      console.log('AI 正在调用搜索工具，参数为：', args);
      
      // 直接复用网页现有的搜索逻辑函数
      const results = await window.internalSearchEngine.find(args.query, {
        min: args.minPrice,
        max: args.maxPrice
      });

      // 返回结构化 JSON 结果给 AI，无需让 AI 去解析 DOM
      return {
        success: true,
        count: results.length,
        items: results.map(item => ({
          id: item.id,
          name: item.title,
          price: item.price,
          url: item.link
        }))
      };
    }
  });
}

2. 声明式 API：让 HTML 表单直接“开口”

如果你的网页已经有写得很规范的 <form>，你甚至不需要写太多 JS。WebMCP 允许通过 HTML 属性直接暴露工具：

HTML

<form 
  id="newsletter-form" 
  mcp-tool="subscribe_newsletter" 
  mcp-description="让用户订阅网站的新闻邮件"
>
  <input type="email" name="email_address" required placeholder="输入邮箱">
  <button type="submit">订阅</button>
</form>

在这种模式下，AI 智能体能自动识别该表单为一个名为 subscribe_newsletter 的函数，并能自动填充 email_address 参数进行提交。

3. 技术核心要点：为什么这更高效？

执行环境隔离：handler 函数在网页的上下文中运行。这意味着它拥有该用户的 Session（会话）、Cookies 和 授权状态。AI 智能体不需要处理复杂的登录逻辑，它直接借用用户已登录的身份执行操作。
状态同步：当 handler 执行如 window.scrollTo() 或修改 React/Vue 的状态机（State）时，用户能在屏幕上实时看到网页的变化。这种“所见即所得”的协作是传统爬虫无法做到的。
隐私护栏：WebMCP 标准要求浏览器在 AI 执行某些敏感工具（如支付、删除、发送隐私数据）之前，必须弹出用户确认框（User Consent），这从底层杜绝了 AI 偷偷代人下单的风险。

4. 调试与开发

在 Chrome 146 Canary 中，开发者可以通过以下步骤开始尝试：

进入 chrome://flags。
搜索并启用 #web-mcp-preview。
打开控制台，输入 navigator.modelContext。如果返回非空对象，说明环境已就绪。

八、WebMCP实操案例：自动化机票预订网站

Gemini said

在处理复杂的**多步骤交互（如机票预订、保险投保）**时，传统 AI 智能体经常会迷失在“下一步”按钮、弹窗校验或复杂的表单逻辑中。

通过 WebMCP，网站可以从被动等待被爬取转变为主动引导 AI 流程。以下是一个模拟“全能旅行网”如何利用 WebMCP 实现自动化机票预订的技术方案。

1. 复杂场景下的工作流图解

在这种场景下，网站不只是暴露一个搜索框，而是暴露一套完整的流程控制工具集。

2. 代码实现：多步骤预订工具链

开发者可以通过注册一组具有逻辑关联的工具，引导 AI 完成从信息填报到合法性校验的全过程。

JavaScript

// 假设这是一个单页应用 (SPA) 的预订模块
if ('modelContext' in navigator) {

  // 1. 获取当前页面的预订状态（AI 需要知道目前填到哪一步了）
  navigator.modelContext.registerTool({
    name: 'get_booking_status',
    description: '获取当前机票预订流程的进度和已填信息。',
    handler: async () => {
      const state = window.bookingStore.getState();
      return {
        currentStep: state.step, // 例如: 'passenger_info'
        availableSeats: state.seats.filter(s => !s.taken),
        validationErrors: state.errors
      };
    }
  });

  // 2. 批量填充乘客信息并触发校验
  navigator.modelContext.registerTool({
    name: 'fill_passenger_details',
    description: '一次性填充多名乘客的证件号、姓名和联系方式，并自动触发格式校验。',
    parameters: {
      type: 'object',
      properties: {
        passengers: {
          type: 'array',
          items: {
            type: 'object',
            properties: {
              name: { type: 'string' },
              passportNumber: { type: 'string' },
              type: { type: 'string', enum: ['adult', 'child'] }
            }
          }
        }
      }
    },
    handler: async ({ passengers }) => {
      // 内部调用 React/Vue 的状态更新
      const validationResult = await window.bookingStore.updatePassengers(passengers);
      
      if (!validationResult.valid) {
        return { success: false, errors: validationResult.messages };
      }
      
      // 自动跳转到下一步：选座
      window.router.push('/select-seats');
      return { success: true, nextStep: 'seat_selection' };
    }
  });

  // 3. 选座工具（演示 AI 如何处理视觉/逻辑混合任务）
  navigator.modelContext.registerTool({
    name: 'select_seats',
    description: '为乘客选择指定的座位号（如 12A, 12B）。',
    parameters: {
      type: 'object',
      properties: {
        seatNumbers: { type: 'array', items: { type: 'string' } }
      }
    },
    handler: async ({ seatNumbers }) => {
      const result = await window.bookingStore.pickSeats(seatNumbers);
      return result; // 返回选座是否成功的 JSON
    }
  });
}

3. 该方案如何解决“顽疾”？

A. 绕过碎片化的 UI 逻辑

在传统模式下，AI 必须点击“添加乘客”按钮，等待输入框出现，填入名字，再点击“保存”。如果页面有延迟，AI 就会报错。在 WebMCP 模式下，fill_passenger_details 工具是一个原子操作。AI 发送一个结构化数组，网站内部逻辑处理所有 DOM 变化。这对 AI 来说是瞬时完成的，极大地降低了出错率。

B. 智能处理校验失败

当 AI 填入的护照号格式不对时，工具会直接返回： { "success": false, "errors": "第2位乘客护照号长度不足" } AI 收到这个结构化错误后，可以直接修正数据重新提交，而不需要去分析屏幕上那个闪烁的红色小标签是什么意思。

C. “人机协同”的最后一步：确认支付

正如 WebMCP 规范强调的，它不是为了完全脱离人类。当 AI 选好了票、填好了信息，最后一步点击“确认支付”时：

网站可以弹出一个 WebMCP 专用确认框。
浏览器会提醒用户：“AI 助手请求为您支付 2800 元，是否允许？”
用户在真实的网页界面上看到所有的汇总信息，手动点击支付，确保资金安全。

4. 为什么这是开发者必须关注的趋势？

如果你的网站支持了 WebMCP，你就不再需要为市面上几十种不同的 AI 浏览器助手写专门的适配插件。你只需维护一套 WebMCP 协议标准，无论是谷歌的 Gemini、OpenAI 的 Operator 还是各种开源的智能体，都能瞬间“学会”如何操作你的业务流程。


第一时间获取面向IT决策者的独家深度资讯，敬请关注IT经理网微信号：ctociocom


   除非注明，本站文章均为原创或编译，未经许可严禁转载。


相关文章：


                    AI民工出海：如何在主流云服务器中部署OpenClaw
                                      最危险的内鬼：AI智能体
                                      AI智能体集体感染了“艾滋病”
                                      IDC：2029年AI市场规模将达1.3万亿美元
                                      Visa把你的信用卡交给AI，一场4.6万亿美元的支付革命还是潘多拉魔盒？
                                      MCP：AI 时代的“HTTP”标准
                                      面向 Web 开发者和设计者的 Bug 跟踪工具
                                      2019年web开发的八大趋势
                  



标签： AI智能体, MCP, web开发