❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2026年2月16日首页

WebMCP 时代：在浏览器中释放 AI 的工作能力

✇掘金 前端
作者 CharlesYu01
2026年2月16日 17:49

随着 AI Agent 的广泛应用，传统的 Web 自动化与 Web 交互模式正在迎来根本性变化。WebMCP 是一个未来派的技术提案，它不仅改变了 AI 访问 Web 的方式，还为 AI 与前端应用之间建立起了 协议级的交互通道。本文从WebMCP架构分层解析这项技术及其工程意义。

面对 GEO 与 Agent 应用逐步弱化浏览器入口价值的趋势，浏览器厂商必须主动跟进，通过技术升级与生态重构来守住自身核心阵地。

一、WebMCP 是什么？

WebMCP（Web Model Context Protocol）是一种 客户端 JavaScript 接口规范，允许 Web 应用以结构化、可调用的形式向 AI Agent 暴露其功能（tools）。WebMCP 的核心目标是：

让 Web 应用拥有一组可被 AI Agents 调用的工具函数，避免 AI 通过截图 + DOM 模拟点击这样的低效方式去理解和操作页面。

WebMCP 允许开发者将 Web 应用的功能“以工具形式”公开，供 Agents、浏览器辅助技术等访问。页面将现有的 JavaScript 逻辑包装成与自然语言输入对应的“tools”，AI Agents 可以直接调用它们，而不是模拟用户行为。

换句话说：

WebMCP 是前端版的 MCP 工具协议：它让 Web 应用自己变成一个能被 AI 调用的、语义明确的接口服务器。

二、核心理念：让 Web App 成为 AI 可调用的工具集

WebMCP 的核心机制由三部分构成：

1. 工具注册与调用

页面通过 navigator.modelContext.registerTool() 或类似 API 把自己内部的 JS 功能（如搜索、筛选、提交、获取数据）注册为可调用的工具（tools）。这些 tools 带有：

  • 名称
  • 自然语言描述
  • 输入/输出结构定义（JSON schema）

Agents 识别到这些 tools 后，就可以直接调用，而不需要重新解析 DOM。

2. 语义描述与结构化调用

WebMCP 的工具接口是结构化的，而不是 UI 操作序列：

filterTemplates(description: string) → UI 更新
getDresses(size, color) → 返回商品列表
orderPrints(copies, page_size, page_finish) → 下单

这比视觉模拟更可靠、更高效。

3. 人机协作而非全自动

WebMCP 不是为了让 AI 完全替代用户，而是为了让用户和 AI 协同完成任务。它强调：

  • 共享上下文
  • AI 与用户同时可见的执行状态
  • 用户有权审查/接受 AI 的动作

不像纯后台机器人，WebMCP 是“在 UI 里协作”的模型。

三、基于 Browser + WebMCP 的 Agent 驱动架构

image.png

这张图展示了 WebMCP 在浏览器场景下的设计思路：

1）AI Platform（大模型）

  • 负责理解用户意图
  • 识别需要调用的 WebMCP 工具
  • 并发送工具调用指令

2）Browser-integrated Agent（浏览器 Agent）

这个组件负责：

  • 将 LLM 指令转为工具调用
  • 与 WebMCP JS 进行交互
  • 在当前网页上下文执行注册的 JavaScript 工具代码

它类似一个“中间控制层”，连接了一端的 AI 推理和另一端的前端工具。

3）WebMCP JS

运行在页面内部的代理代码：

  • 负责注册和执行 tools
  • 与 Agent 进行通信
  • 在正常 Web 环境中执行定义好的工具函数

这意味着：

页面本身是一个 MCP Server ，但运行在客户端。

4）Third-Party HTTP 服务

仍然是页面自身依赖的服务端业务逻辑：

  • 通常的业务 API
  • 页面使用这些 API 完成任务
  • 也可以在工具内部直接调用

核心意义总结

这张图的核心思想是：

在浏览器里增强 Web 应用，让 AI Agent 能调用前端定义好的交互能力，而不是模拟用户行为。

它是一个 “前端即服务的 MCP Server” 模式。

四、为什么这是一种范式级的变革？

1）结构良好的能力暴露

传统 Agents 访问网站靠：截图 +Vision 识别 + DOM 模拟

这是低效、易错且不稳定的。

WebMCP 直接告诉 AI：

你的工具是 filterTemplates(criteria)
不要再猜测页面结构

这意味着 AI 不再“模拟人”，而是“直接调用真实功能”。

2）前端逻辑复用

WebMCP 允许：

  • 复用现有前端逻辑
  • 业务功能无需写额外后端 API
  • 使用现有组件构建工具

3）提升安全和用户控制

WebMCP 需要用户授权，且工具执行会明显提示用户，这符合“人机协作”设计，还能避免：

  • 未授权数据泄露
  • 无感知的全自动操作

这比无 UI 后端自动化更可控。

五、典型使用场景

使用WebMCP订奶茶

你说：
帮我找一家评分高、离我近一点的奶茶店，最好 20 元以内。

当前页面注册了一个 WebMCP 工具：

/**
 * 根据自然语言描述搜索奶茶店
 *
 * description - 用户对店铺的需求描述（自然语言）
 * max_price - 人均价格上限（单位：人民币）
 */
searchMilkTeaShops(description, max_price)

浏览器Agent判断这个工具最符合用户意图，于是调用：

searchMilkTeaShops(
  "评分高，距离近，出餐快",
  20
)

页面内部会把自然语言转为已有筛选条件，例如：

  • 评分 ≥ 4.5
  • 距离 ≤ 2km
  • 人均 ≤ 20 元

然后刷新页面，只展示符合条件的店铺。

浏览器Agent回复：
我帮你筛选了几家评分高、距离近、价格合适的奶茶店，要不要限定品牌？

你说：
优先考虑喜茶或者蜜雪冰城，少糖。

页面还注册了一个工具：

/**
 * 在当前结果中按品牌和口味偏好筛选
 *
 * brands - 品牌数组，例如 ["喜茶", "蜜雪冰城"]
 * sweetness - 甜度偏好，例如 ["正常糖", "少糖", "无糖"]
 */
refineShops(brands, sweetness)

浏览器Agent调用：

refineShops(
  ["喜茶", "蜜雪冰城"],
  ["少糖"]
)

页面更新，只展示符合条件的店铺和推荐饮品。

你点进一家店铺页面。页面加载后注册了新的工具：

/**
 * 根据口味偏好推荐饮品
 *
 * description - 对饮品口味的自然语言描述
 * max_price - 单杯价格上限
 */
recommendDrinks(description, max_price)

你说：
给我推荐一杯清爽一点的水果茶，不要太甜，20 元以内。

调用：

recommendDrinks(
  "清爽水果茶，少糖，不腻",
  20
)

页面自动高亮并展示 2–3 款符合条件的饮品。

你选中其中一杯。

页面注册了下单相关工具：

/**
 * 将指定饮品加入购物车
 *
 * product_id - 饮品 ID
 * options - 规格选项，例如甜度、冰量
 */
addDrinkToCart(product_id, options)

/**
 * 提交订单
 */
checkout()

浏览器Agent调用：

addDrinkToCart(
  5567890,
  {
    sweetness: "少糖",
    ice: "少冰"
  }
)

页面提示“已加入购物车”。

浏览器Agent在界面上显示一个提示按钮：
<去结算>

你点击。

浏览器Agent调用：

checkout()

页面跳转到确认订单页，你确认地址并完成支付。

整个过程中，浏览器Agent并没有去“点击筛选按钮”或“模拟输入搜索框”，而是直接调用页面注册的结构化工具函数。页面把原有的搜索、筛选、推荐、加购、下单逻辑封装成 WebMCP 工具，让 AI 可以用更稳定、更语义化的方式操作。

这就是 WebMCP 的核心理念：
不是让 AI 像人一样操作页面，而是让页面主动把能力暴露出来，供 AI 调用。

六、demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>WebMCP Article Demo</title>
  <style>
    body { max-width: 800px; margin: auto; font-family: sans-serif; }
    article { line-height: 1.6; }
  </style>
</head>
<body>

  <h1>WebMCP Article Demo</h1>

  <article id="main-article">
    <h2>示例文章标题</h2>
    <p>这是第一段正文内容。</p>
    <p>这是第二段正文内容。</p>
    <p>这是第三段正文内容。</p>
  </article>

  <script>
    function extractArticleText() {
      // 优先找 article 标签
      let article = document.querySelector("article");

      // 如果没有 article，就尝试主内容容器
      if (!article) {
        article = document.querySelector("main") ||
                  document.querySelector("#content") ||
                  document.body;
      }

      // 清除 script/style
      const clone = article.cloneNode(true);
      clone.querySelectorAll("script, style, nav, footer").forEach(el => el.remove());

      const text = clone.innerText.trim();

      return {
        title: document.title,
        url: location.href,
        content: text,
        length: text.length
      };
    }

    if (navigator.modelContext?.registerTool) {
      console.log("[WebMCP] registering getArticleContent");

      navigator.modelContext.registerTool({
        name: "getArticleContent",
        description: "获取当前页面的文章正文内容",
        inputSchema: {
          type: "object",
          properties: {}
        },
        async execute() {
          const data = extractArticleText();

          return {
            content: [
              {
                type: "text",
                text: JSON.stringify(data, null, 2)
              }
            ]
          };
        }
      });

      console.log("[WebMCP] tool registered");
    } else {
      console.warn("WebMCP not supported in this browser.");
    }
  </script>

</body>
</html>
❌
❌