webmcp-cli-skill

WebMCP CLI Skill

本 Skill 为第三方 AI Agent 提供完整说明，介绍如何通过 Model Context Protocol（MCP）使用 webmcp-cli 与浏览器页面交互。

何时使用

• 需要与网页交互（点击元素、填写表单、滚动页面）时。
• 需要读取当前 DOM 结构并识别可交互元素时。
• 在已注入领域专用工具的页面上操作时（例如 Excalidraw 绘图工具）。

安装

用户环境通常都已经安装好 webmcp-cli 工具，当shell终端提示找不到工具时，才进行下面的安装：

npm install -g @opentiny/webmcp-cli

命令

1. 管理浏览器标签页 webmcp-cli tabs

所有子级命令如下：

webmcp-cli tabs open https://excalidraw.com    # 打开新网页
webmcp-cli tabs close <tabid>                  # 关闭指定标签页
webmcp-cli tabs switch <tabid>                 # 切换到指定标签页
webmcp-cli tabs back                           # 当前标签页后退
webmcp-cli tabs back <tabid>                   # 指定标签页后退
webmcp-cli tabs forward                        # 当前标签页前进
webmcp-cli tabs forward <tabid>                # 指定标签页前进

2. 查询浏览器当前状态 webmcp-cli state

它返回当前浏览器的导航元数据（url、title、activeTabid、webmcpTools、所有已打开页签），是确认当前页面有哪些可用工具（webmcpTools）的唯一方式。

注意：state 不返回页面 DOM 内容（没有 content 字段）。需要获取可交互元素或页面信息状态时，请显式调用 page-agent-tool 的 browserState 或 searchTree 动作。

webmcp-cli state
webmcp-cli state -t <targetId>   # target a specific tab by its real Chrome target ID

输出示例：

{
  "url": "https://www.baidu.com/",
  "title": "百度一下，你就知道",
  "activeTabid": "2EA73ED323E46E5E108D4E46DA4E4AA7",
  "webmcpTools": [{ "name": "page-agent-tool" }, { "name": "baidu_search" }],
  "tabs": [
    { "tabid": "2EA73ED323E46E5E108D4E46DA4E4AA7", "title": "百度一下,你就知道", "url": "https://www.baidu.com/" }
  ]
}

返回值中， tabs 属性值是浏览器当前打开的全部标签页的信息，其它属性为当前激活页面的URL、标题、已注入的 MCP 工具列表（webmcpTools）。

tabid 是 真实的 Chrome target ID（UUID）。配合 -t 可指定某个标签页。

webmcpTools的值的数组中如果有 system-overview的工具，并且在本轮对话中，该域名下没有调用过它，那么一定要立即执行一下 。system-overview工具的返回值能指导后续的操作，比如会包含网站的模块 & 路由 & 页面工具 &使用规范等等内容。

webmcp-cli run system-overview '{}'

何时必须调用 state

时机	是否必须先 state	说明
执行 tabs open 之前	否	tabs open 是唯一可在未先 state 的情况下直接执行的命令
执行 tabs 之后	是	新页面加载并注入工具后，须用 state 获取新页面的 webmcpTools
执行 run 之前	是	须先通过 state 确认工具列表，再用 browserState 或 searchTree 获取页面可交互元素
连续多次 run 之间	视情况	若需重新确认工具列表或当前页面，才需再次 state；仅获取 DOM 变化直接使用 page-agent-tool 相关 action 即可