FliPPeDround

前端工程师 · 开源爱好者 · 正在找工作

对我的项目感兴趣？查看我的简历 · resume

---

如果你曾尝试配合 AI 代理（如 Claude、Cursor 编写微信小程序，你大概率会遇到这样的困境：测试工具与 AI 代理集成困难、缺乏统一的自动化框架支持、无法充分利用 AI 的智能分析能力。更糟糕的是，当你想要使用 Claude、Cursor 等 AI 辅助工具来提升测试效率时，却发现没有合适的微信小程序自动化集成方案。

为了解决这些痛点，wechat-devtools-mcp 应运而生。作为一款基于 MCP（Model Context Protocol）协议的微信开发者工具自动化服务，它让小程序的自动化测试与 AI 智能分析变得前所未有的简单和高效。

📖 介绍

📚 官方文档：更多详细的安装和配置说明，请参考 GitHub 仓库

wechat-devtools-mcp 是一个专门为微信小程序设计的 MCP 服务，通过 MCP 协议与 AI 代理（如 Claude、Cursor）深度集成。它基于微信官方的 miniprogram-automator 库，提供了完整的小程序自动化能力，让你能够在 AI 的辅助下，高效地完成小程序的自动化测试和调试。

这个工具的出现，填补了小程序自动化测试与 AI 智能分析之间的空白。它不仅保持了与微信开发者工具的完全兼容性，还充分发挥了 MCP 协议的标准化优势，为开发者提供了一个更智能、更高效的自动化测试解决方案。

🚀 核心功能与技术优势

1. 无缝集成 MCP 协议生态

wechat-devtools-mcp 完全兼容 MCP 协议，可以轻松集成到支持 MCP 的 AI 代理中：

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

2. 全面的页面导航支持

工具提供了丰富的 API 来操作小程序页面导航：

• 保留当前页面跳转：通过 navigateTo 跳转到非 tabBar 页面
• 关闭当前页面跳转：通过 redirectTo 关闭当前页面并跳转
• 返回上一页：通过 navigateBack 返回上一页面或多级页面
• 重新加载页面：通过 reLaunch 关闭所有页面并重新打开
• 切换 TabBar：通过 switchTab 跳转到 tabBar 页面
• 获取页面栈：通过 pageStack 获取当前页面栈列表

3. 强大的元素操作能力

工具提供了完整的元素操作 API，支持各种用户交互模拟：

• 元素获取：通过 getElement 和 getElements 获取页面元素
• 用户交互：支持点击、长按、触摸、输入等操作
• 元素信息：获取元素尺寸、位置、文本、属性、样式等信息
• 组件方法：调用自定义组件的方法和数据操作

4. 智能日志和异常监听

工具内部实现了智能的日志和异常监听机制：

• 自动监听控制台日志（console.log、console.info、console.warn、console.error）
• 自动捕获运行时异常，包括错误名称、堆栈跟踪和发生时间
• 支持日志和异常的查询和过滤
• 内置日志数量限制，避免内存溢出

5. 灵活的配置选项

支持丰富的配置选项，满足不同测试场景的需求：

• 自定义小程序项目路径
• 微信开发者工具 CLI 路径配置
• 连接超时时间设置
• WebSocket 端口配置
• 用户账号和登录票据支持
• 项目配置文件覆盖

6. 微信 API 模拟与调用

工具提供了强大的微信 API 操作能力：

• 调用微信 API：通过 callWxMethod 调用 wx 对象上的任意方法
• Mock 微信 API：通过 mockWxMethod 模拟 API 返回值，便于测试
• 恢复微信 API：通过 restoreWxMethod 恢复被 Mock 的方法

🧪 为什么 E2E 测试如此重要

在软件开发中，单元测试固然重要，但 E2E（End-to-End）测试在构建高质量代码过程中扮演着不可替代的角色。

提升代码可靠性

E2E 测试模拟真实用户的使用场景，从用户界面到后端服务的完整流程进行验证。与单元测试不同，E2E 测试能够发现：

• 页面间的导航和状态传递问题
• 用户交互与业务逻辑的集成异常
• 微信 API 调用的错误处理
• 不同设备和系统版本的兼容性问题

对于微信小程序这种运行在特殊环境中的应用，E2E 测试尤为重要。它能够确保你的小程序在不同设备、不同微信版本、不同网络环境下都能正常运行，避免出现"在开发环境正常，上线后出问题"的尴尬情况。

降低维护成本

虽然编写 E2E 测试 需要投入一定的时间成本，但从长远来看，它能显著降低维护成本：

• 减少回归测试时间：自动化测试可以在几分钟内完成原本需要数小时的手动测试
• 快速定位问题：当出现 bug 时，E2E 测试能够快速定位问题所在
• 增强重构信心：有了完善的测试覆盖，你可以放心地进行代码重构，而不必担心破坏现有功能
• 文档化业务逻辑：测试代码本身就是最好的业务逻辑文档

提升团队协作效率

E2E 测试作为项目质量的"守门员"，能够：

• 统一团队对功能实现的理解
• 减少 code review 时的争议
• 让新成员快速理解项目功能
• 建立持续集成的质量保障体系

📦 快速上手

安装依赖

wechat-devtools-mcp 是一个 npm 包，可以直接通过 npx 运行，无需额外安装：

npx -y wechat-devtools-mcp --projectPath=/path/to/your/miniprogram

配置 MCP 服务器

在你的 AI 代理（如 Claude、Cursor）的配置文件中添加 MCP 服务器配置：

{
  "mcpServers": {
    "wechat-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "wechat-devtools-mcp",
        "--projectPath=/path/to/your/miniprogram"
      ]
    }
  }
}

命令行参数说明

参数	类型	说明
--projectPath	string	小程序项目路径（必填）
--cliPath	string	微信开发者工具 CLI 路径
--timeout	number	连接超时时间（毫秒），默认 30000
--port	number	WebSocket 端口号，默认 9420
--account	string	用户 openid
--ticket	string	开发者工具登录票据
--projectConfig	string	覆盖 project.config.json 中的配置

使用示例

配置完成后，你就可以在 AI 代理中使用 wechat-devtools-mcp 提供的工具了。以下是一些典型的使用场景：

1. 启动小程序

// 使用 launch 工具启动微信开发者工具并连接小程序
await launch()

2. 页面导航测试

// 跳转到指定页面
await navigateTo({ url: '/pages/detail/detail?id=123' })

// 获取当前页面信息
const currentPage = await currentPage()

// 返回上一页
await navigateBack({ delta: 1 })

3. 元素操作测试

// 获取页面元素
const element = await getElement({ selector: '.submit-button' })

// 点击元素
await tapElement({ selector: '.submit-button' })

// 输入文本
await inputElement({ selector: '#username', value: 'testuser' })

// 获取元素文本
const text = await getElementText({ selector: '.welcome-text' })

4. 页面数据操作

// 获取页面数据
const pageData = await getPageData({ path: 'userInfo.name' })

// 设置页面数据
await setPageData({ data: { count: 10, status: 'active' } })

5. 日志和异常监听

// 获取控制台日志
const logs = await getlogs({ type: 'error', limit: 10 })

// 获取异常信息
const exceptions = await getexceptions({ limit: 5 })

6. 微信 API 调用和 Mock

// 调用微信登录 API
const loginResult = await callWxMethod({ method: 'login', args: [] })

// Mock 用户信息 API
await mockWxMethod({ method: 'getUserInfo', result: { nickName: '测试用户' } })

// 恢复 API
await restoreWxMethod({ method: 'getUserInfo' })

🎯 高级功能详解

截图功能

工具支持对小程序当前页面进行截图，返回 Base64 编码的图片数据：

const screenshot = await screenshot()

系统信息获取

获取小程序运行所在的系统信息，包括手机品牌、型号、屏幕尺寸、操作系统版本、微信版本等：

const systemInfo = await systemInfo()

体验评分

支持微信小程序体验评分（Audits）功能，可以获取性能最佳实践、Accessibility 可访问性等方面的评分和建议：

// 停止体验评分并获取报告
const auditResult = await stopAudits({ path: './audits.json' })

测试账号管理

支持获取微信开发者工具多账号调试中添加的测试用户列表，可用于模拟不同用户登录场景的测试：

const accounts = await testAccounts()

🔧 技术实现细节

wechat-devtools-mcp 的实现基于 MCP 协议和微信官方的 miniprogram-automator 库，核心架构包括以下几个部分：

1. Automator 类：负责微信开发者工具的启动、连接和生命周期管理
2. MiniProgram 工具类：提供小程序级别的操作，如页面导航、API 调用、系统信息获取等
3. Page 工具类：提供页面级别的操作，如元素获取、数据操作、方法调用等
4. Element 工具类：提供元素级别的操作，如点击、输入、属性获取等

工具内部还实现了智能的状态管理和错误处理机制，确保自动化测试的稳定性和可靠性。

🌟 总结

wechat-devtools-mcp 为微信小程序开发者提供了一个现代化、智能化的自动化测试解决方案。它不仅解决了传统测试工具与 AI 代理集成困难的问题，还充分发挥了 MCP 协议和 miniprogram-automator 的技术优势。

通过完善的 E2E 测试和 AI 智能分析，你可以：

• 提升代码质量和可靠性
• 降低长期维护成本
• 增强团队协作效率
• 建立持续集成的质量保障体系
• 充分利用 AI 的智能分析能力

如果你正在开发微信小程序项目，并且想要建立完善的自动化测试体系，wechat-devtools-mcp 绝对值得一试。它会让你的测试工作变得前所未有的简单和高效。

📚 相关资源

• GitHub 仓库
• npm 包
• MCP 协议文档
• 微信小程序自动化文档
• miniprogram-automator

---

最后

wechat-devtools-mcp 是一个免费的开源软件，遵循MIT协议，社区的赞助使其能够有更好的发展。

你的赞助会帮助我更好的维护项目，如果对你有帮助，请考虑赞助一下😊

你的star🌟也是对我的很大鼓励，Github

欢迎反馈问题和提pr共建

一、 AI 终于不用“瞎猜”你的网页了

我们可以把 WebMCP 想象成一种**“翻译官协议”**：

• 以前的 AI（视觉模拟派） ：就像一个老外在看一份全中文的报纸，他得先拍照，再识别文字，最后猜哪里是按钮。一旦你把按钮从左边挪到右边，他就找不到了。
• WebMCP（接口直连派） ：你的网站现在给 AI 提供了一个**“操作说明书”**。AI 进门后不用看页面长什么样，直接问：“那个‘查询余额’的功能在哪？” 你的网站直接通过 WebMCP 告诉它：“在这里，发个 JSON 给我，我就告诉你结果。”

一句话总结：WebMCP 让网页从“给人看的界面”变成了“给 AI 调用的函数”。

---

二、 核心能力：WebMCP 的“两把斧”

在实际开发中，WebMCP 提供了两种接入方式：

1. 宣告式（适合简单动作） ：在 HTML 里加个属性，就像给按钮贴个“AI 可读”的标签。
2. 命令式（适合高级逻辑） ：用 JavaScript 编写具体的执行函数，适合处理复杂计算。

---

三、 实战：WebMCP 的具体使用方法

目前，你可以在 Chrome Canary (v145+) 中通过以下步骤实现一个“AI 自动分析监控日志”的功能。

1. 开启实验室开关

在浏览器地址栏输入：chrome://flags/#enable-webmcp，将其设置为 Enabled 并重启。

2. 定义“说明书” (mcp-config.json)

在你的网站根目录放置一个配置文件，告诉 AI 你有哪些能力。

JSON

{
  "tools": [
    {
      "name": "get_frontend_error_logs",
      "description": "获取当前页面的前端错误日志详情",
      "parameters": {
        "type": "object",
        "properties": {
          "limit": { "type": "number", "description": "返回的日志数量" }
        }
      }
    }
  ]
}

3. JavaScript 具体实现逻辑

在你的网页脚本中，注册这个工具的具体执行逻辑。

JavaScript

// 检查浏览器是否支持 WebMCP
if ('modelContext' in navigator) {
  // 注册工具
  navigator.modelContext.registerTool('get_frontend_error_logs', async (args) => {
    // 1. 从你的监控系统中提取数据
    const logs = window.__MY_MONITOR_LOGS__.slice(0, args.limit || 5);
    
    // 2. 返回给 AI
    return {
      content: [
        { 
          type: "text", 
          text: JSON.stringify(logs, null, 2) 
        }
      ]
    };
  });
  
  console.log("WebMCP 工具已就绪，AI 现在可以直接读取你的日志了！");
}

---

四、 极致的 Token 优化：从“读图”到“读字典”

web系统经常有成千上万行的表格数据，让 AI 截图识别简直是灾难。

1. 结构化数据的降维打击

• 视觉识别：1 张 1080P 的截图可能消耗 1000+ Tokens，且 AI 经常看错行。
• WebMCP：你返回一个 JSON.stringify(summary) 仅需几十个 Tokens。
• 工程技巧：在 registerTool 的返回结果中，你可以预先对数据进行特征提取（比如只返回异常波动点），将原本需要 AI 自己总结的过程，在本地通过高性能 JS 预处理完成，进一步压榨 Token 成本。

---

五、 交互新范式：从“被动响应”到“双向协同”

在你的实战代码中，展示了 AI 如何“主动”调数据，但 WebMCP 的真正威力在于它构建了一个双向总线。

1. 订阅模式：让 AI 实时盯盘

在金融监控或 K 线分析场景，AI 不应该总在问“现在价格是多少”，而应该是当价格波动超过阈值时，网站主动推送到 AI 上下文。

• 扩展用法：利用 WebMCP 的资源订阅（Resources Subscription）机制。
• 代码逻辑：通过 navigator.modelContext.updateResource()，当监控系统发现异常流量或金融数据触发对冲点时，自动将上下文注入 AI 的实时缓存，实现“无感预警”。

---

六、 安全深度防御：权限隔离

你一定关心：万一 AI 乱发指令怎么办？WebMCP 引入了显式授权与沙箱隔离。

1. 权限最小化原则

WebMCP 不会默认给 AI 权限去读你的整个 LocalStorage 或 Cookie。

• 层级控制：每一个 registerTool 注册的功能，都会在 Chrome 侧边栏显示详细的权限说明。
• 人类确认 (HITL) ：对于涉及敏感操作（如：执行转账、删除线上日志）的 Tool，WebMCP 支持声明 userApproval: "required"。当 AI 尝试调用时，浏览器会跳出原生确认框，这种系统级的阻断是任何第三方插件无法模拟的安全保障。

---

七、 架构解耦：一套标准，适配所有 AI 终端

你目前在研究 AI Prompt Manager 和 Trae/Cursor。WebMCP 的出现解决了前端工程中的“适配地狱”。

1. “一次开发，到处运行”的 AI 能力

• 旧模式：你得写一个 Chrome 插件给 Gemini 用，再写一个 MCP Server 给 Claude Desktop 用，再给 Cursor 写特定的插件。
• WebMCP 模式：你只需要在网页里 registerTool。由于 Chrome 是宿主，只要你在 Chrome 里打开这个网页，无论是侧边栏的 Gemini，还是通过 DevTools 接入的 AI Agent，都能识别并使用这套能力。这极大降低了你维护 AI 基础设施 的成本。

---

八、为什么非用它不可？

1. 性能屠宰场：不再需要给 AI 发送几万个 DOM 节点的 HTML 文本，只传核心 JSON，Token 消耗节省 90%。
2. 安全围栏：数据处理在本地浏览器完成。大模型只发指令，不直接接触你的敏感数据库明细。
3. 开发效率：你不再需要为不同的 AI 插件写不同的适配层，只要符合 WebMCP 标准，所有支持该协议的 AI 助手都能秒懂你的业务。

---

随着 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 驱动架构

这张图展示了 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>