WebMCP测试仪表板和UI挑战
WebMCP（Web模型上下文协议）的全面测试套件-新的浏览器原生API，允许网站通过navigator.modelContext向AI代理公开结构化、可调用的工具。
此仓库包含两个测试页面，用于验证WebMCP功能：
- 测试仪表板 （index.html）——6个注册的WebMCP工具，用于餐厅点餐流程
- UI手套 （gauntlet.html）--18个交互式UI部分，16个注册的WebMCP工具，涵盖了每种常见的交互模式
阅读全文： 我构建了一个WebMCP测试仪表板-以下是浏览器的新AI API的实际工作原理 *（来自@saliozzia的X篇文章）*
先决条件——所有要求，按顺序
WebMCP不仅仅是“安装MCP并运行”。有一系列先决条件，每个环节都必须到位。跳过一个，什么都不会发生。
- 注册早期预览计划 --WebMCP支持谷歌的早期预览计划。通过以下方式申请 Chrome博客文章 并等待批准。
- 安装Chrome Canary（146+） --WebMCP不存在于常规Chrome、Chrome Beta或任何其他浏览器中。下载 铬金丝雀.
- 启用WebMCP标志 --即使在Canary中，WebMCP默认也是关闭的。首选
chrome://flags/#enable-webmcp-testing，将其设置为“已启用”，然后重新启动。
- 提供此回购并在Canary中打开它 --此仓库中的页面已经连接了WebMCP工具注册（见下文）。对于你自己的网站，你需要添加JavaScript来调用
navigator.modelContext.registerTool()对于您要公开的每个工具。
- 连接工作的MCP服务器/AI线束 --安装并配置支持WebMCP的MCP服务器（例如。，
@mcp-b/chrome-devtools-mcp)因此，您的AI代理可以发现并调用在浏览器选项卡中注册的工具。
快速开始
# Clone the repo
git clone https://github.com/Iozzia-Lab/webMCPtest.git
cd webMCPtest
# Serve the page
npx serve .
# or
python -m http.server 3000打开Chrome Canary（随 --remote-debugging-port=9222)并导航到：
http://localhost:3000/--测试仪表板（6个工具）http://localhost:3000/gauntlet.html--UI挑战赛（18节，16个工具）
通过打开DevTools控制台并检查以下内容来验证WebMCP是否处于活动状态 'modelContext' in navigator 返回true。连接后，每页右上角的状态徽章显示为绿色。
测试仪表板工具（index.html）
| 工具 | 描述 | 输入 |
|---|---|---|
greet_user | 个性化问候 | { name } |
search_items | 搜索模拟产品目录 | { query, category? } |
toggle_theme | 切换亮/暗模式 | { theme? } |
get_page_stats | 页面状态和统计信息 | { } |
submit_form | 已验证的表单提交 | { name, email, message } |
calculate | 数学表达式计算器 | { expression } |
UI手套（Gauntlet.html）
挑战赛是一项全面的交互测试，涵盖了AI代理可能遇到的每种常见UI模式。它在18个可折叠部分中注册了16个WebMCP工具：
- 文本输入、文本区域、日期选择器
- 单选、多选、分组下拉菜单
- 复选框、单选按钮、切换开关、范围滑块
- Tab导航
- 具有查看/编辑/删除（CRUD操作）功能的数据网格
- Toast通知（成功、错误、警告、信息）
- 警告横幅，并取消
- 模态对话框和堆叠模态
- 手风琴/可折叠部分
- 拖放重新排序
- 使用自动补全功能进行搜索
- 多步骤向导
- 文件上传区
- 确认对话框
- 通过以下方式进行全页状态自检
get_page_state
这个想法是：如果人工智能代理可以完全通过WebMCP工具来应对这场挑战——无需点击，无需视觉——那么协议就可以工作。
与Claude一起测试
- 在端口9222上启动Chrome Canary并进行远程调试
- 导航到测试页面
- 打开配置了WebMCP服务器的Claude Code或Cowork会话
- 尝试：“在此页面上列出WebMCP工具”
- 试试：“在目录中搜索披萨”
- 试试：“填写表格并提交”
- 尝试：“导航到评论选项卡”
- 尝试：“获取完整页面状态”
运作原理
每个页面都导入@mcp-b/global polyfill（包含在错误处理中——它目前抛出一个TypeError，但会正常失败），并通过navigator.modelContext.registerTool（）注册工具。@mcp-b/chrome devtools mcp服务器通过devtools协议连接到chrome，自动发现这些工具，并将其作为Claude可以调用的标准mcp工具公开。
工具处理程序以MCP内容格式返回结果：一个具有包含键入文本条目的内容数组的对象。这是必需的——返回普通对象将自动失败。
资源
学分
由...建造 @ 萨利奥齐亚 --QA测试Ser.vi餐厅点餐平台的WebMCP。
克劳德·科沃克——在@saliozzia的指导下