Stagehand 如何发现并调用网页注册的 WebMCP 页面工具【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand有些页面会把自身能力直接发布成可调用的工具例如一次结算、一次站内搜索而不是只能靠驱动 UI 来完成。Stagehand 的 WebMCP 支持让你通过page.tools()发现当前页面注册的工具并用带类型的输入直接调用它们。本文按“启动浏览器 → 发现工具 → 调用 → 读取结果”的顺序走通这条路径并用仓库示例目录里一个可运行的脚本做端到端验证。准备条件运行环境Node.js 22.18、Python 3.11 或 Go 1.26其中 Node.js 是推荐运行环境本地运行需要机器上已安装 Chrome使用云端浏览器会话则不需要安装 SDK以 TypeScript 为例pnpm add browserbasehq/stagehand zodWebMCP 需要一个开启了 WebMCP 特性的 Chromium 构建。Stagehand 在启动本地浏览器时会默认加上以下启动参数--enable-featuresWebMCPTesting,DevToolsWebMCPSupport也就是说用localBrowser.launch()起的浏览器开箱即可用。但有一个明确的坑Stagehand 只能设置它自己启动的浏览器的参数。如果你是通过 CDP 连接自己已经启动的浏览器localBrowser.connect()或在本地启动时用选项剥离了默认参数就必须自己以--enable-featuresWebMCPTesting,DevToolsWebMCPSupport启动 Chrome否则page.tools()会返回空列表。启动浏览器并拿到 pageimport { localBrowser, Stagehand } from browserbasehq/stagehand; const browser await localBrowser.launch({ headless: false }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages();启动后可参考 Browser 配置文档 中“Default local launch arguments”一节核对 Stagehand 实际附加的默认参数。发现页面注册的工具page.tools()返回的是页面当前注册的工具快照它不是实时的。页面导航后、或挂载了新 UI 后需要重新调用一次。// 最多等待 3 秒让页面注册工具 const tools await page.tools({ timeout: 3000 }); for (const tool of tools) { console.log(tool.name, tool.description); console.log(tool.inputSchema); // invoke() 输入的 JSON Schema console.log(tool.annotations); // { readOnly?, untrustedContent?, autosubmit? } console.log(tool.frameId); // 注册该工具的 frame }每个工具携带的字段TypeScriptPython/Go 字段名用下划线风格字段说明name调用时使用的工具名description人类可读的工具描述inputSchema可选的 JSON 输入 schemaannotations可选的readOnly、untrustedContent、autosubmit标记frameId发布该工具的 frameiframe 中声明的工具也会包含在列表里backendNodeId可选的后端节点标识annotations是页面给出的提示不是浏览器强制执行的保证标记含义readOnly工具不改变状态可以试探性地调用untrustedContent输出包含页面可控文本不要当作可信内容喂给模型autosubmit调用工具会代表用户提交某些内容page.tools()的列举超时默认是 1000 ms。对于在异步引导完成后才注册工具的页面应调大这个超时例如上面的 3000 ms。调用工具invoke() 与 result() 两步走调用分成两步invoke()把调用交给浏览器Chrome 一接受就立即返回一个 handleresult()才等待终态响应。拆开这两步意味着长时间运行的工具不会阻塞你且飞行途中可以请求取消。const [search] await page.tools(); // Chrome 接受调用即返回 const invocation await search.invoke({ input: { query: wireless mouse } }); console.log(invocation.invocationId, invocation.toolName, invocation.input); // 阻塞直到工具到达终态 const response await invocation.result({ timeout: 30000 });两点注意省略input会发送空对象{}。文档建议想拿到清晰的本地报错而不是页面返回的Error响应调用前先按该工具的inputSchema校验输入。工具由页面注册你只负责发现并调用不能自己定义工具。读取终态响应result()返回的终态响应有三种status处理时对号入座status含义看哪个字段Completed工具完成outputCanceled取消被接受无Error工具失败errorText页面抛异常时还有exceptionconst response await invocation.result(); switch (response.status) { case Completed: console.log(output:, response.output); break; case Canceled: console.log(canceled before it finished); break; case Error: console.error(response.errorText, response.exception); break; }result()会缓存终态响应重复调用返回同一值且开销很低超时或传输失败不会被缓存可以重试。取消调用cancel()只是向页面发出取消请求最终状态仍由 Chrome 决定const invocation await slowTool.invoke({ input: {} }); await invocation.cancel(); const response await invocation.result(); console.log(response.status); // 常见是 Canceled但工具也可能先完成了文档明确提示取消是请求而非保证始终从result()读取最终状态不要假设调用已经停止。两个超时项调用默认值作用列举工具1000 ms等待页面注册工具的最长时间等待结果无不设时会无限期等待终态响应文档给出的操作建议异步引导的页面调大列举超时工具可能挂起时给result()设置超时让自动化响亮地失败而不是卡死。用仓库示例跑通完整验证仓库为三个 SDK 各提供了一个 WebMCP 示例它们访问同一个测试站点https://browserbase.github.io/stagehand-eval-sites/sites/webmcp-test/该站点注册了一个名为calculateSum的工具。TypeScript 版见 示例源码import { localBrowser, Stagehand } from browserbasehq/stagehand; const webMCPTestSite https://browserbase.github.io/stagehand-eval-sites/sites/webmcp-test/; const browser await localBrowser.launch({ headless: false }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(webMCPTestSite); const tools await page.tools({ timeout: 5_000 }); const calculateSum tools.find((tool) tool.name calculateSum); if (!calculateSum) { throw new Error(calculateSum was not registered by the page); } const invocation await calculateSum.invoke({ input: { a: 19, b: 23 }, }); const result await invocation.result(); console.log(result); await stagehand.close(); await browser.close();Python 版对应 示例源码Go 版见 示例源码。这个示例本身就是验证路径列举超时设为 5000 ms确保测试站点完成注册断言calculateSum存在于返回的工具列表——找不到时示例直接抛出calculateSum was not registered by the page。如果你本地运行遇到这个报错先回到“准备条件”检查浏览器是否由 Stagehand 启动或连接的外部 Chrome 是否带了--enable-featuresWebMCPTesting,DevToolsWebMCPSupport以{ a: 19, b: 23 }调用并打印result。运行成功后脚本会输出终态响应对象其中status为Completed、output为页面工具返回的 JSON 输出。页面没发布工具时回退到 act()WebMCP 工具完全由页面决定发布什么拿不到就回退到 UI 驱动。文档给出的组合写法const tools await page.tools(); const addToCart tools.find((tool) tool.name addToCart); if (addToCart) { // 确定性、带类型、不消耗模型调用 const invocation await addToCart.invoke({ input: { sku: ABC-123, quantity: 1 } }); await invocation.result(); } else { // 页面没有为这个操作发布工具驱动 UI await stagehand.act(add the item to the cart); }文档给出的取舍依据一次工具调用不消耗 LLM token也不会选错元素所以页面提供工具时优先于act()调用。边界与参考page.tools()返回的是快照导航或新 UI 挂载后要重新调用等待结果默认无超时工具可能挂起时必须显式设置annotations只是提示untrustedContent标记的输出应作为数据处理不要当指令API 细节见 WebMCP 指南、WebMCP API 参考WebMCPTool/WebMCPInvocation的属性与invoke()、result()、cancel()签名以及 Page 参考中 tools() 一节。【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Stagehand 如何发现并调用网页注册的 WebMCP 页面工具
Stagehand 如何发现并调用网页注册的 WebMCP 页面工具【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand有些页面会把自身能力直接发布成可调用的工具例如一次结算、一次站内搜索而不是只能靠驱动 UI 来完成。Stagehand 的 WebMCP 支持让你通过page.tools()发现当前页面注册的工具并用带类型的输入直接调用它们。本文按“启动浏览器 → 发现工具 → 调用 → 读取结果”的顺序走通这条路径并用仓库示例目录里一个可运行的脚本做端到端验证。准备条件运行环境Node.js 22.18、Python 3.11 或 Go 1.26其中 Node.js 是推荐运行环境本地运行需要机器上已安装 Chrome使用云端浏览器会话则不需要安装 SDK以 TypeScript 为例pnpm add browserbasehq/stagehand zodWebMCP 需要一个开启了 WebMCP 特性的 Chromium 构建。Stagehand 在启动本地浏览器时会默认加上以下启动参数--enable-featuresWebMCPTesting,DevToolsWebMCPSupport也就是说用localBrowser.launch()起的浏览器开箱即可用。但有一个明确的坑Stagehand 只能设置它自己启动的浏览器的参数。如果你是通过 CDP 连接自己已经启动的浏览器localBrowser.connect()或在本地启动时用选项剥离了默认参数就必须自己以--enable-featuresWebMCPTesting,DevToolsWebMCPSupport启动 Chrome否则page.tools()会返回空列表。启动浏览器并拿到 pageimport { localBrowser, Stagehand } from browserbasehq/stagehand; const browser await localBrowser.launch({ headless: false }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages();启动后可参考 Browser 配置文档 中“Default local launch arguments”一节核对 Stagehand 实际附加的默认参数。发现页面注册的工具page.tools()返回的是页面当前注册的工具快照它不是实时的。页面导航后、或挂载了新 UI 后需要重新调用一次。// 最多等待 3 秒让页面注册工具 const tools await page.tools({ timeout: 3000 }); for (const tool of tools) { console.log(tool.name, tool.description); console.log(tool.inputSchema); // invoke() 输入的 JSON Schema console.log(tool.annotations); // { readOnly?, untrustedContent?, autosubmit? } console.log(tool.frameId); // 注册该工具的 frame }每个工具携带的字段TypeScriptPython/Go 字段名用下划线风格字段说明name调用时使用的工具名description人类可读的工具描述inputSchema可选的 JSON 输入 schemaannotations可选的readOnly、untrustedContent、autosubmit标记frameId发布该工具的 frameiframe 中声明的工具也会包含在列表里backendNodeId可选的后端节点标识annotations是页面给出的提示不是浏览器强制执行的保证标记含义readOnly工具不改变状态可以试探性地调用untrustedContent输出包含页面可控文本不要当作可信内容喂给模型autosubmit调用工具会代表用户提交某些内容page.tools()的列举超时默认是 1000 ms。对于在异步引导完成后才注册工具的页面应调大这个超时例如上面的 3000 ms。调用工具invoke() 与 result() 两步走调用分成两步invoke()把调用交给浏览器Chrome 一接受就立即返回一个 handleresult()才等待终态响应。拆开这两步意味着长时间运行的工具不会阻塞你且飞行途中可以请求取消。const [search] await page.tools(); // Chrome 接受调用即返回 const invocation await search.invoke({ input: { query: wireless mouse } }); console.log(invocation.invocationId, invocation.toolName, invocation.input); // 阻塞直到工具到达终态 const response await invocation.result({ timeout: 30000 });两点注意省略input会发送空对象{}。文档建议想拿到清晰的本地报错而不是页面返回的Error响应调用前先按该工具的inputSchema校验输入。工具由页面注册你只负责发现并调用不能自己定义工具。读取终态响应result()返回的终态响应有三种status处理时对号入座status含义看哪个字段Completed工具完成outputCanceled取消被接受无Error工具失败errorText页面抛异常时还有exceptionconst response await invocation.result(); switch (response.status) { case Completed: console.log(output:, response.output); break; case Canceled: console.log(canceled before it finished); break; case Error: console.error(response.errorText, response.exception); break; }result()会缓存终态响应重复调用返回同一值且开销很低超时或传输失败不会被缓存可以重试。取消调用cancel()只是向页面发出取消请求最终状态仍由 Chrome 决定const invocation await slowTool.invoke({ input: {} }); await invocation.cancel(); const response await invocation.result(); console.log(response.status); // 常见是 Canceled但工具也可能先完成了文档明确提示取消是请求而非保证始终从result()读取最终状态不要假设调用已经停止。两个超时项调用默认值作用列举工具1000 ms等待页面注册工具的最长时间等待结果无不设时会无限期等待终态响应文档给出的操作建议异步引导的页面调大列举超时工具可能挂起时给result()设置超时让自动化响亮地失败而不是卡死。用仓库示例跑通完整验证仓库为三个 SDK 各提供了一个 WebMCP 示例它们访问同一个测试站点https://browserbase.github.io/stagehand-eval-sites/sites/webmcp-test/该站点注册了一个名为calculateSum的工具。TypeScript 版见 示例源码import { localBrowser, Stagehand } from browserbasehq/stagehand; const webMCPTestSite https://browserbase.github.io/stagehand-eval-sites/sites/webmcp-test/; const browser await localBrowser.launch({ headless: false }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(webMCPTestSite); const tools await page.tools({ timeout: 5_000 }); const calculateSum tools.find((tool) tool.name calculateSum); if (!calculateSum) { throw new Error(calculateSum was not registered by the page); } const invocation await calculateSum.invoke({ input: { a: 19, b: 23 }, }); const result await invocation.result(); console.log(result); await stagehand.close(); await browser.close();Python 版对应 示例源码Go 版见 示例源码。这个示例本身就是验证路径列举超时设为 5000 ms确保测试站点完成注册断言calculateSum存在于返回的工具列表——找不到时示例直接抛出calculateSum was not registered by the page。如果你本地运行遇到这个报错先回到“准备条件”检查浏览器是否由 Stagehand 启动或连接的外部 Chrome 是否带了--enable-featuresWebMCPTesting,DevToolsWebMCPSupport以{ a: 19, b: 23 }调用并打印result。运行成功后脚本会输出终态响应对象其中status为Completed、output为页面工具返回的 JSON 输出。页面没发布工具时回退到 act()WebMCP 工具完全由页面决定发布什么拿不到就回退到 UI 驱动。文档给出的组合写法const tools await page.tools(); const addToCart tools.find((tool) tool.name addToCart); if (addToCart) { // 确定性、带类型、不消耗模型调用 const invocation await addToCart.invoke({ input: { sku: ABC-123, quantity: 1 } }); await invocation.result(); } else { // 页面没有为这个操作发布工具驱动 UI await stagehand.act(add the item to the cart); }文档给出的取舍依据一次工具调用不消耗 LLM token也不会选错元素所以页面提供工具时优先于act()调用。边界与参考page.tools()返回的是快照导航或新 UI 挂载后要重新调用等待结果默认无超时工具可能挂起时必须显式设置annotations只是提示untrustedContent标记的输出应作为数据处理不要当指令API 细节见 WebMCP 指南、WebMCP API 参考WebMCPTool/WebMCPInvocation的属性与invoke()、result()、cancel()签名以及 Page 参考中 tools() 一节。【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考