WebMCP：教网站"说人话"给 AI 听WebMCP：教网站"说人话"给 AI 听一、先讲个故事：外卖平台的"代沟"

WebMCP：教网站"说人话"给 AI 听

"以前 AI 看网页像做阅读理解题，现在网页直接交卷了"

一、先讲个故事：外卖平台的"代沟"

想象一下，你是个 AI 助手，你的主人让你在某外卖平台点一份"不要香菜、微辣、多加醋"的麻辣烫。

传统方式（AI 的噩梦）：

截图整个页面 → 传给视觉模型分析
找到搜索框 → 猜坐标 → 模拟点击
输入"麻辣烫" → 等待页面刷新
找到第一家店 → 点进去 → 找"定制"按钮
在弹窗里找"不要香菜"的复选框...
页面改版了？从头再来！

这就像让一个人闭着眼睛，通过摸盲文来操作手机点外卖——能成，但费劲，且贵。

WebMCP 方式（AI 的春天）： 网站直接告诉你："嗨，我有这些工具可以用哦！"

searchRestaurants({ keyword: "麻辣烫" })
addToCart({ itemId: "123", options: { noCoriander: true, spicyLevel: "mild", extraVinegar: true } })
checkout()

AI 一看："懂了，这就办！" 三行代码搞定，token 消耗降低 89%，准确率飙升到 98% 。

二、WebMCP 到底是啥？

简单来说，WebMCP（Web Model Context Protocol） 就是 Google 和 Microsoft 联手搞的一个"浏览器翻译官"标准。它让网站可以用一种 AI 能听懂的结构化语言，主动暴露自己的功能。

核心思想：网页即 API

以前，网站只给人类看（漂亮的 UI）。现在，网站可以同时给人类和 AI 看：

给人类看：按钮、表单、动画
给 AI 看：工具列表、参数定义、执行函数

三、动手试试：你的第一个 WebMCP 页面

前置准备（别慌，很简单）

浏览器：安装 Chrome 146+（Canary 或 Dev 版）[15^]
开开关：在地址栏输入 chrome://flags/#enable-webmcp-testing，把它打开，重启浏览器
验证：按 F12 打开控制台，输入 navigator.modelContext，如果看到返回对象而不是 undefined，恭喜你，WebMCP 已就绪！

示例 1：极简版（声明式）—— 适合懒人

如果你的网站只是个简单的表单，一行 JavaScript 都不用写：

<!DOCTYPE html>
<html>
<head>
  <title>我的外卖店</title>
</head>
<body>
  <!-- 给人类看的 -->
  <h1>🔥 老王麻辣烫</h1>
  
  <form toolname="placeOrder" tooldescription="下单购买麻辣烫">
    <input type="text" name="dish" placeholder="菜品" required />
    <select name="spicyLevel">
      <option value="none">不辣</option>
      <option value="mild">微辣</option>
      <option value="hot">特辣</option>
    </select>
    <label>
      <input type="checkbox" name="noCoriander" />
      不要香菜
    </label>
    <button type="submit">提交订单</button>
  </form>
</body>
</html>

魔法在这里：给 <form> 加上 toolname 和 tooldescription 属性，AI 就能自动识别这个表单的功能和参数。

就像给表单贴了个标签："这是下单工具，需要这些参数哦~"

示例 2：进阶版（命令式）—— 适合戏精

如果你需要更复杂的逻辑（比如"先检查库存再下单"），就得用 JavaScript API 了：

<!DOCTYPE html>
<html>
<head>
  <title>智能待办清单</title>
</head>
<body>
  <h1>📝 我的待办清单</h1>
  <ul id="todoList">
    <li>学习 WebMCP</li>
    <li>统治世界（可选）</li>
  </ul>

  <script>
    // 检查浏览器是否支持 WebMCP
    if ('modelContext' in navigator) {
      
      // 注册一个"添加待办"工具
      navigator.modelContext.registerTool({
        name: 'addTodo',
        description: '向待办清单中添加新任务',
        inputSchema: {
          type: 'object',
          properties: {
            task: { 
              type: 'string', 
              description: '待办事项内容，比如"买牛奶"' 
            },
            priority: {
              type: 'string',
              enum: ['low', 'medium', 'high'],
              description: '优先级：low(低), medium(中), high(高)'
            }
          },
          required: ['task']
        },
        async execute(args) {
          const { task, priority = 'medium' } = args;
          
          // 实际的业务逻辑
          const li = document.createElement('li');
          li.textContent = `[${priority.toUpperCase()}] ${task}`;
          li.style.color = priority === 'high' ? 'red' : 'black';
          document.getElementById('todoList').appendChild(li);
          
          return {
            content: [{ 
              type: 'text', 
              text: `✅ 已添加任务："${task}"，优先级：${priority}` 
            }]
          };
        }
      });

      console.log('✨ WebMCP 工具已注册！AI 现在可以帮你管理待办清单了~');
    } else {
      console.log('😢 当前浏览器不支持 WebMCP，请使用 Chrome 146+ 并开启实验性功能');
    }
  </script>
</body>
</html>

代码解读：

部分	作用	生活比喻
`name`	工具的唯一标识	菜品的编号，比如"宫保鸡丁_001"
`description`	告诉 AI 这个工具是干嘛的	菜单上的菜品描述
`inputSchema`	定义需要什么参数（JSON Schema 格式）	点单时的必填项和选填项
`execute`	实际执行的函数	后厨真正炒菜的过程

四、React 玩家专区：useWebMCP 钩子

如果你用 React，可以借助社区封装好的钩子，代码更优雅：

npm install @mcp-b/webmcp-polyfill usewebmcp

import { useWebMCP } from 'usewebmcp';

function TodoApp() {
  // 一行代码注册工具，还能追踪执行状态！
  const addTodoTool = useWebMCP({
    name: 'addTodo',
    description: '添加待办事项',
    inputSchema: {
      type: 'object',
      properties: {
        task: { type: 'string' },
        priority: { type: 'string', enum: ['low', 'medium', 'high'] }
      },
      required: ['task']
    },
    execute: async (args) => {
      // 你的业务逻辑
      await saveToDatabase(args);
      return { 
        content: [{ type: 'text', text: '添加成功！' }] 
      };
    }
  });

  return (
    <div>
      <h1>待办清单</h1>
      <p>工具执行次数：{addTodoTool.state.executionCount}</p>
      <p>最后结果：{JSON.stringify(addTodoTool.state.lastResult)}</p>
      {addTodoTool.state.error && (
        <p style={{ color: 'red' }}>出错了：{addTodoTool.state.error.message}</p>
      )}
      
      {/* 手动测试按钮 */}
      <button onClick={() => addTodoTool.execute({ 
        task: '学习 WebMCP', 
        priority: 'high' 
      })}>
        手动运行工具
      </button>
    </div>
  );
}

React 图标和 WebMCP 图标手牵手，周围有代码片段飘浮，现代扁平化卡通风格

五、WebMCP vs MCP：别搞混了！

这是最容易混淆的地方。记住这个餐厅比喻 ：

协议	角色定位	生活场景
Anthropic MCP	后厨的中央厨房系统	餐厅总部，处理所有分店的订单、库存、财务
WebMCP	餐桌上的扫码点餐系统	你面前的二维码，只有坐下来才能扫，离开就失效

MCP 运行在服务器端（Node.js/Python），7×24 小时待命，适合后端数据操作。

WebMCP 运行在浏览器里，只有用户打开网页时才存在，适合前端交互。

黄金搭档：用 MCP 查数据库（"用户有多少积分"），用 WebMCP 改 UI（"把积分兑换按钮变灰"）。

六、常见问题 FAQ

Q: 这和传统的网页自动化（Playwright/Puppeteer）有啥区别？

传统方式：AI 像个人类用户，看截图、猜位置、点鼠标。

优点：通用性强，啥网站都能试
缺点：慢、贵、容易因为页面改版而崩溃

WebMCP：网站主动说"我有这些功能"，AI 直接调用。

优点：快、便宜（token 省 89%）、稳定
缺点：需要网站主动适配

Q: 安全吗？AI 会不会乱来？

WebMCP 继承了浏览器的安全模型：

同源策略：工具只能被注册它的页面使用
HTTPS 强制：不安全的环境不能用
用户确认：敏感操作（支付、删除）需要用户点头
自动继承登录态：不用把密码交给 AI

就像你不会随便让陌生人操作你的手机，但你可以放心让 Siri 帮你设闹钟——权限边界很清楚。

Q: 现在能用在生产环境吗？

还不能！ 目前（2026年3月）还是 Chrome 的实验性功能，API 可能会变。建议：

先玩起来，熟悉概念
关注 W3C 标准进展
等正式版发布再全面迁移

七、脑洞时间：WebMCP 能做什么？

想象一下这些场景：

🛒 电商平台：AI 一键比价、凑满减、选优惠券
📅 企业系统："帮我把下周所有冲突的会议 reschedule"
🎮 游戏网站：AI 自动领取每日奖励、做任务
📊 数据报表："把这张图的数据导出成 Excel 并按日期排序"
🏦 银行页面：自然语言转账（"给上个月一起吃饭的小王转 200 块"）

八、总结：WebMCP 的三句话

它是网页的"说明书"：告诉 AI "我能做什么，需要什么参数"
它是浏览器的"翻译官"：让网站和 AI 用结构化语言对话
它是未来的"基础设施"：就像当年的 Schema.org 改变 SEO，WebMCP 可能改变 AI 时代的网站交互

参考资源

Chrome 官方文档：chrome://flags/#enable-webmcp-testing（开启实验性功能）
MDN polyfill：@mcp-b/webmcp-polyfill（让旧浏览器也支持）
社区 React 钩子：usewebmcp（React 开发者必备

"最好的技术，往往是让你忘记它的存在。WebMCP 的目标，就是让 AI 和网站的对话，像人与人之间的交流一样自然。"

现在，打开你的 Chrome 146，写一个简单的 HTML 文件，让你的网站开口说话吧！ 🚀

关注公众号【dev派】，发送 "agent" 获取全部源码和模板 640