爱回收
75.46M · 2026-04-05
随着 AI Agent 的广泛应用，传统的 Web 自动化与 Web 交互模式正在迎来根本性变化。WebMCP 是一个未来派的技术提案，它不仅改变了 AI 访问 Web 的方式，还为 AI 与前端应用之间建立起了 协议级的交互通道。本文从WebMCP架构分层解析这项技术及其工程意义。
面对 GEO 与 Agent 应用逐步弱化浏览器入口价值的趋势，浏览器厂商必须主动跟进，通过技术升级与生态重构来守住自身核心阵地。
WebMCP（Web Model Context Protocol）是一种 客户端 JavaScript 接口规范，允许 Web 应用以结构化、可调用的形式向 AI Agent 暴露其功能（tools）。WebMCP 的核心目标是：
换句话说：
WebMCP 的核心机制由三部分构成：
页面通过 navigator.modelContext.registerTool() 或类似 API 把自己内部的 JS 功能（如搜索、筛选、提交、获取数据）注册为可调用的工具（tools）。这些 tools 带有：
Agents 识别到这些 tools 后，就可以直接调用，而不需要重新解析 DOM。
WebMCP 的工具接口是结构化的，而不是 UI 操作序列：
filterTemplates(description: string) → UI 更新
getDresses(size, color) → 返回商品列表
orderPrints(copies, page_size, page_finish) → 下单
这比视觉模拟更可靠、更高效。
WebMCP 不是为了让 AI 完全替代用户，而是为了让用户和 AI 协同完成任务。它强调：
不像纯后台机器人，WebMCP 是“在 UI 里协作”的模型。
这张图展示了 WebMCP 在浏览器场景下的设计思路：
这个组件负责：
它类似一个“中间控制层”，连接了一端的 AI 推理和另一端的前端工具。
运行在页面内部的代理代码：
这意味着：
仍然是页面自身依赖的服务端业务逻辑：
这张图的核心思想是：
它是一个 “前端即服务的 MCP Server” 模式。
传统 Agents 访问网站靠：截图 +Vision 识别 + DOM 模拟
这是低效、易错且不稳定的。
WebMCP 直接告诉 AI：
这意味着 AI 不再“模拟人”，而是“直接调用真实功能”。
WebMCP 允许：
WebMCP 需要用户授权，且工具执行会明显提示用户，这符合“人机协作”设计，还能避免：
这比无 UI 后端自动化更可控。
你说：
帮我找一家评分高、离我近一点的奶茶店，最好 20 元以内。
当前页面注册了一个 WebMCP 工具：
/**
* 根据自然语言描述搜索奶茶店
*
* description - 用户对店铺的需求描述（自然语言）
* max_price - 人均价格上限（单位：r民币）
*/
searchMilkTeaShops(description, max_price)
浏览器Agent判断这个工具最符合用户意图，于是调用：
searchMilkTeaShops(
"评分高，距离近，出餐快",
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 调用。
<!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>
