Stagehand 速成指南:用自然语言指挥浏览器,10分钟跑通自动化 Demo

Stagehand 速成指南:用自然语言指挥浏览器,10分钟跑通自动化 Demo Stagehand 速成指南用自然语言指挥浏览器10分钟跑通自动化 Demo【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand每天早上开几个电商网站比价、每周五从后台把报表手动拷进表格——这类重复的浏览器操作正是最该交给代理干的活。Stagehand 就是为此而生的 SDK用自然语言驱动真实浏览器完成操作与提取让 AI 浏览器自动化变成一条安装命令的事。一句话说清面向浏览器代理的 SDK官方定位很直接Playwright 是为测试而生的Stagehand 是为代理而生的。它保留goto、click、locator、screenshot这类你熟悉的 API但底层驱动走 Chrome DevTools Protocol运行时是驻留在浏览器侧的扩展动作的往返延迟比远程调试桥小得多。它和传统 Selenium 脚本、纯 LLM API 截图式方案的区别在两点其一操作用自然语言定位目标而不是硬编码 CSS 选择器配合selfHeal机制站点改版后动作会被自动重新推断其二喂给模型的页面上下文是经过混合可访问性树裁剪的结果比整页 HTML 或截图省 token 得多。同样是提取公司列表和批次号的任务左边是 Stagehand 的几行代码右边是逐节点爬 DOM 的 Playwright 脚本。官方文档入口packages/docs/v4/first-steps/quickstart.mdx跑起来环境要求与最小安装命令环境门槛很低Node.js 22.18 以上即可Python 3.11、Go 1.26 也有对应 SDK。包管理器用 npm 一条命令就行它通过 CDP 驱动浏览器没有额外的浏览器驱动依赖——本地跑需要装好 Chrome接 Browserbase 云浏览器则什么都不用装。npm install browserbasehq/stagehand zod # 安装 SDK 和 schema 库接 Browserbase 云浏览器只需申请一对凭证Project ID 和 API Key形如bb_live_...的那个。先跑通再理解3条命令见到效果Demo 的前置条件就三行先交代清楚设置环境变量BROWSERBASE_API_KEY——注意 Stagehand 不会替你读 env要在代码里显式传入不配置模型时由 Model Gateway 自动选模型连 LLM 密钥都不用配要指定模型则在Stagehand.create里传model本地开发可把browserbase.launch()换成localBrowser.launch()直接跑本机 Chrome把下面这段存成index.tsimport { browserbase, Stagehand } from browserbasehq/stagehand; import { z } from zod/v4; const browser await browserbase.launch({ apiKey: process.env.BROWSERBASE_API_KEY, }); const stagehand await Stagehand.create({ browser }); try { const [page] await browser.context.pages(); await page.goto(https://stagehand.dev); const { data } await stagehand.extract( Extract the value proposition from the page., z.object({ valueProposition: z.string() }), ); console.log(data.valueProposition); await stagehand.act(Click the Evals button.); const { data: actions } await stagehand.observe(What can I click on this page?); console.log(actions.length, actions found); } finally { await stagehand.close(); await browser.close(); }跑起来export BROWSERBASE_API_KEY... npx tsx index.ts。终端先打印提取出的价值主张接着浏览器自动点掉 Evals 按钮、列出可点击项三个核心能力一次全见。关键调用逐段拆解browserbase.launch()/Stagehand.create({ browser })起浏览器、建代理客户端三大能力都挂在stagehand实例上stagehand.extract(instruction, schema)自然语言指令加 zod schema返回按 schema 校验过的 JSON直接解构data使用stagehand.act(...)一句自然语言完成一次点击动作stagehand.observe(...)问我能做什么拿到候选动作列表把返回的 Action 传回act可以确定性地重放不再消耗模型调用三个动词覆盖浏览器里所有事API 面比你想的小act、observe、extract三个动词基本覆盖了浏览器里的所有事。await stagehand.act(click on add to cart); const { data } await stagehand.extract(extract the price, z.object({ price: z.string() })); const { data: actions } await stagehand.observe(What can I click?);Act替你把事做了一句话定义用自然语言在页面上执行一个动作——点击、填表、滚动。真实场景自动走注册流程点击 Sign Up 并填写表单拆成若干句act逐步执行即可开启缓存后重复动作不再请求 LLM选择器失效时 selfHeal 会自动重推。文档packages/docs/v4/basics/act.mdxObserve先看清页面再决定一句话定义列出页面当前所有可操作元素每项带自然语言描述和定位选择器。真实场景批量处理后台表单前先 observe 一遍确认有哪些按钮、填什么字段再决定把结果直接喂给act还是拿 selector 走 Playwright 风格的精确操作。文档packages/docs/v4/basics/observe.mdxExtract把数据带出去一句话定义从页面提取结构化数据zod schema 保证返回的字段形状不跑偏。真实场景抓商品列表的价格和库存直接得到 JSON 进数据库不用再写正则切 HTML。文档packages/docs/v4/basics/extract.mdx往大了玩代理生态与集成路径仓库自带一批实验性适配器每个都给你的代理一个持久浏览器会话外加run、snapshot、screenshot三个工具Browserbase MCP标准 MCP 服务器任何 MCP 客户端都能直接驱动云浏览器文档packages/docs/v4/integrations/overview.mdxClaude Code / Codex两个编码代理通过 MCP/stdio 接上浏览器工具写代码时自己开浏览器验证页面文档packages/docs/v4/integrations/claude-code.mdxCrewAIPython 多代理框架经 MCP 获得浏览器能力文档packages/docs/v4/integrations/crewai.mdxVercel AI SDK / Mastra / Deep Agents主流 TS 代理框架在 tool loop 里注册 Stagehand 工具文档packages/docs/v4/integrations/vercel-ai-sdk.mdx别踩坑上线前值得看的五条经验确定性重放优先observe 确认目标后把返回的 Action 传回act重放全程零模型推理又快又稳。缓存与自愈一起开cache 省掉重复动作的 LLM 调用selfHeal 让站点改版后动作自动重新推断不用追着改选择器。开发用 localBrowser生产切 browserbase本地零成本好调试上线前换成云浏览器顺便获得代理与会话管理。省 token 从上下文入手可访问性树裁剪是内置的再把指令写得简洁一点成本会明显下降。可观测性别省内置 OTel 支持Browserbase 控制台能回放整个会话时间线含 DOM 快照生产出问题能倒查。想深入看示例目录 packages/sdk-ts/examples/、最佳实践 packages/docs/v4/best-practices/以及能自己给自动化任务打分的评测框架 packages/evals/。Stagehand 把看页面、动手、取数据压缩成三个方法让 AI 浏览器自动化从一堆选择器变成一句自然语言。下一步不用犹豫去 examples 目录挑一个最接近你日常工作的场景换成自己的网址跑起来。【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考