Communitygithub.com

nekuda-ai/webmcp-kit

让你的网站具备智能体就绪能力:为 Claude Code 和 Codex 提供的编码智能体插件,将 WebMCP 工具添加到你的 Web 应用中。

webmcp-kit 是什么?

WebMCP Kit 是一个面向 Web 开发者的 AI 智能体技能插件,主要用于验证网站是否正确集成了 WebMCP 工具(一种支持 AI 智能体与网页交互的标准化协议)。它的核心功能是通过自动化浏览器驱动,逐一检查站点上每个页面的工具注册、只读调用和状态变更调用是否符合声明,并生成详细的验证报告。该技能支持 Claude Code 和 Codex 两大主流 AI 编码智能体平台,并自带浏览器驱动(headless Chrome 150+),无需依赖 Playwright 或其他外部 MCP 配置。工作流程遵循“验证阶梯”(Ladder),依次执行:启动站点、发现页面上的工具、只读调用、状态变更调用。最终输出每个工具的三种状态:verified(通过)、failed(失败)或 could-not-verify(无法验证,需标记发布)。这使得开发者可以确信其 Web 应用已为 AI 智能体交互做好准备。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add nekuda-ai/webmcp-kit

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

WebMCP Kit — 验证

运行时检查站点的 WebMCP 工具是否正确注册并正常工作。既可以独立运行,也是 implement 技能在其阶段 F 中使用的验证阶梯。

开始之前

  • 站点必须在本地运行。如果站点自带运行手册(包含生命周期命令、基础 URL、测试身份),请使用其手册;否则使用其自身的开发脚本。切勿假设存在测试夹具。
  • 使用本插件自带的浏览器驱动。不要要求 MCP 配置、全局 chrome-devtools 安装、Playwright 或手动驱动浏览器。

内置浏览器驱动

只解析一次插件根目录。当宿主环境导出 CLAUDE_PLUGIN_ROOT 或 PLUGIN_ROOT 时,请使用它们。否则,取此技能对应的绝对基目录(包含此 SKILL.md 的目录)并向上两级目录。不要根据仓库检出路径猜测。

为整个验证阶梯运行一个浏览器驱动会话:

plugin_root="${CLAUDE_PLUGIN_ROOT:-${PLUGIN_ROOT:-}}"
if [ -z "$plugin_root" ]; then
  skill_dir="<此技能的绝对基目录>"
  plugin_root="$(cd "$skill_dir/../.." && pwd -P)"
fi
webmcp="${plugin_root}/scripts/webmcp.sh"

"$webmcp" browser status
"$webmcp" browser start
"$webmcp" browser status
"$webmcp" browser new_page "<本地 URL>" --output-format=json
"$webmcp" browser list_webmcp_tools <pageId> --output-format=json
"$webmcp" browser execute_webmcp_tool <pageId> <toolName> --input '<JSON 对象>' --output-format=json
"$webmcp" browser take_snapshot <pageId> --output-format=json
"$webmcp" browser list_console_messages <pageId> --output-format=json
"$webmcp" browser list_network_requests <pageId> --output-format=json
"$webmcp" browser stop

在 Windows 上,应用相同的回退逻辑并使用 PowerShell 中的内置命令入口:

$pluginRoot = if ($env:CLAUDE_PLUGIN_ROOT) { $env:CLAUDE_PLUGIN_ROOT } elseif ($env:PLUGIN_ROOT) { $env:PLUGIN_ROOT } else { (Resolve-Path "<此技能的绝对基目录>\..\..").Path }
$webmcp = Join-Path $pluginRoot "scripts\webmcp.cmd"
& $webmcp browser status
& $webmcp browser start

通过 & $webmcp browser ... 运行剩余的验证阶梯命令,并始终以 & $webmcp browser stop 结束。

start 命令会解析官方 chrome-devtools-mcp@latest,启动一个宿主会话作用域内隔离的无头 Chrome 150+ 实例,同时启用 --category-experimental-webmcp 和 --enable-features=WebMCP,并禁用使用统计和 CrUX,同时擦除网络标头。当并发运行共享同一个工作空间时,将 WEBMCP_BROWSER_SESSION_ID 设置为任意唯一值;否则入口点优先使用 Claude/Codex 会话进行作用域划分,其次使用工作空间。它会首先尝试使用受支持的已安装或缓存浏览器;如果不存在,在 Chrome for Testing 发布的平台上,它会将稳定版 Chrome 下载到用户缓存中并后续复用。你可以传入 --executable-path <路径> 来指定一个已知安全的测试浏览器。在不受支持的宿主(如 Linux arm64)上,请安装原生 Chrome/Chromium 150+ 并设置 WEBMCP_BROWSER_PATH 环境变量。

如果 start 失败,请报告其确切的 Node/npm、下载、架构、共享库或启动错误,并将浏览器相关工具标记为 无法验证。切勿使用 sudo、系统包管理器或普通 Chrome 配置文件。在中断运行后,请先使用 status 再使用 stop,然后重试。始终在清理阶段停止驱动,包括在失败后也需如此。

验证阶梯

  1. 启动。 站点启动;基准页面正常渲染;与干净加载相比,无新的控制台错误。
  2. 发现。 在每个声明的页面和认证状态下——同时检查匿名和已登录状态(如果相关)——列出已注册的工具。确认每个工具在其应在的位置出现,在其不应出现的位置缺失(未登录的账户工具、角色错误的工具),并在其声明的退出点(空购物车、登出)取消注册。导航是昂贵的操作:每个页面 × 认证状态只访问一次,并在该次单次访问中确定页面上所有工具的期望——绝不要为每个工具单独导航一次。
  3. 只读调用。 使用样本输入调用只读工具;检查返回的数据以及可见的 ui_effect。按页面批量处理:在发现工具的同一页面访问中调用该页面的工具。
  4. 状态变更调用。 仅在本地/开发/种子数据上,并获得明确许可后执行。切勿向第三方或生产服务发送真实 POST 请求。如果不存在安全的调用方式——则不要调用;报告为无法验证。

报告——每个工具一个状态

  • 已验证 — 按声明注册并调用(注明达到的阶梯层级)。
  • 失败 — 未注册或发生错误;必须修复或移除,绝不能发布。
  • 无法验证 — 看起来合理但未经证明(无浏览器,或没有安全的调用方式);允许发布但需标记。

打印每个工具的状态表格,并重新列出所有标记为无法验证的项目。

相关技能