尧图网页设计 
如何让AI替你操控浏览器Stagehand快速上手指南【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehandStagehand 是一个专为浏览器 Agent 打造的 SDK由 Browserbase 开发同时提供 TypeScript、Python 和 Go 三个语言的完整实现。它解决的核心痛点是传统脚本Playwright/Puppeteer 选择器一改页面就挂纯 AI 代理又难以预测和调试。Stagehand 让你在同一份代码里自由切换两者——不熟的地方交给自然语言确定的地方用代码适合想把网页自动化做进生产环境的开发者。 两种控制方式随你要AI还是要代码Stagehand 的能力可以拆成三层每层都直接对应你能拿到什么结果AI 三原语 act / observe / extract用一句自然语言完成点击、填表act先预览页面上能做什么observe再按你定义的 schema 把页面内容抽成结构化数据extract。act 的完整用法和参数见 packages/docs/v4/basics/act.mdx。自愈 缓存网站改版导致录制的操作失效时Stagehand 检测到选择器坏了会重新推理这一步该怎么做重复执行过的操作可以被缓存后续运行不再调用 LLM省时间也省 token。Playwright 风格 APIgoto、click、locator、screenshot这些熟悉的方法照常可用AI 步骤和确定性步骤可以在一个脚本里混着用。另外两个细节值得一提它通过混合可访问性树裁剪把页面上下文压缩到刚好够用Agent 消耗更少 token对跨进程 iframe 和闭源 Shadow DOM 这类复杂 DOM 有专门的 deep locator 支持。浏览器侧以扩展形式跑在浏览器旁边所有页面操作的往返延迟更低。 3分钟跑通第一个自动化最小路径就是装 SDK → 连上浏览器 → 写一个调 act/extract 的脚本。mkdir my-stagehand-app cd my-stagehand-app pnpm init -y pnpm install browserbasehq/stagehand zod然后写一个index.tsconst browser await browserbase.launch({ apiKey: process.env.BROWSERBASE_API_KEY }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(https://stagehand.dev); await stagehand.act(Click the Evals button.); const { data } await stagehand.extract( Extract the value proposition from the page., z.object({ valueProposition: z.string() }), ); console.log(data);设置好BROWSERBASE_API_KEY环境变量后运行即可模型由 Model Gateway 自动选择和鉴权不需要再单独配模型厂商的 key。本地调试时把browserbase.launch()换成localBrowser.launch()就能直接驱动你本机的浏览器。仓库里还有大量可直接运行的示例见 packages/sdk-ts/examples。 典型工作流让 observe 先侦察再动手一个体现 Stagehand 价值的完整场景是先看清、再操作、后抽取page.goto()打开目标页面比如一个商品列表页。调observe(find the latest PR)之类的问题拿到页面上可操作元素的清单包括每个元素的选择器。这一步不执行任何动作相当于让 AI 先交侦察报告。对报告里你信任的元素直接用page.locator(selector).click()走确定性路径对不确定的复杂交互再交给act(点击登录按钮)。最后用extract加一个 zod schemaPython 里是 pydantic 模型把结果抽成类型安全的数据直接进下游业务逻辑。生产上跑起来后你可以配合 observability 面板回放整个会话每一步 act/extract/observe 的时间、输入、输出都会记录成事件流排查问题时不用靠猜。 用官方评测集验证你的改动如果你调整了模型、提示词或想对比不同 Agent 方案Stagehand 自带一套 evals 工具链内置 act/extract/observe/agent 四类 bench 任务以及 WebVoyager、OnlineMind2Web、WebTailBench、Odysseys 等数据集驱动的套件任务从目录自动发现写个文件就能加新任务。结果可以流到 Braintrust 做多次实验对比。细节见 packages/evals/。⚠️ 上手前注意这几件事密钥自己读Stagehand 不会替你读环境变量API key 需要你在代码里显式传入浏览器和模型网关都依赖 Browserbase 的 key。开发期优先本地浏览器用localBrowser.launch()省掉云端依赖稳定后再切回browserbase跑生产。selfHeal 要显式开启默认不会自愈录制好的动作在选择器失效时是失败而非重推理需要自愈能力时打开selfHeal选项。缓存是省钱关键重复性强的流程记得开 action 缓存避免每次运行都为同样的点击付一次 LLM 调用。三种语言 API 对齐TS、Python、Go 的三原语和 page API 是同一套设计选哪门语言都按 quickstart 里的对应示例写即可。对需要在真实网页上同时要求 AI 灵活性和生产可靠性的团队来说Stagehand 是目前少有的把这两件事放进同一个 SDK 里解决的方案值得在你的自动化项目里先拿一个小流程试跑一遍。【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让AI替你操控浏览器：Stagehand快速上手指南
如何让AI替你操控浏览器Stagehand快速上手指南【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehandStagehand 是一个专为浏览器 Agent 打造的 SDK由 Browserbase 开发同时提供 TypeScript、Python 和 Go 三个语言的完整实现。它解决的核心痛点是传统脚本Playwright/Puppeteer 选择器一改页面就挂纯 AI 代理又难以预测和调试。Stagehand 让你在同一份代码里自由切换两者——不熟的地方交给自然语言确定的地方用代码适合想把网页自动化做进生产环境的开发者。 两种控制方式随你要AI还是要代码Stagehand 的能力可以拆成三层每层都直接对应你能拿到什么结果AI 三原语 act / observe / extract用一句自然语言完成点击、填表act先预览页面上能做什么observe再按你定义的 schema 把页面内容抽成结构化数据extract。act 的完整用法和参数见 packages/docs/v4/basics/act.mdx。自愈 缓存网站改版导致录制的操作失效时Stagehand 检测到选择器坏了会重新推理这一步该怎么做重复执行过的操作可以被缓存后续运行不再调用 LLM省时间也省 token。Playwright 风格 APIgoto、click、locator、screenshot这些熟悉的方法照常可用AI 步骤和确定性步骤可以在一个脚本里混着用。另外两个细节值得一提它通过混合可访问性树裁剪把页面上下文压缩到刚好够用Agent 消耗更少 token对跨进程 iframe 和闭源 Shadow DOM 这类复杂 DOM 有专门的 deep locator 支持。浏览器侧以扩展形式跑在浏览器旁边所有页面操作的往返延迟更低。 3分钟跑通第一个自动化最小路径就是装 SDK → 连上浏览器 → 写一个调 act/extract 的脚本。mkdir my-stagehand-app cd my-stagehand-app pnpm init -y pnpm install browserbasehq/stagehand zod然后写一个index.tsconst browser await browserbase.launch({ apiKey: process.env.BROWSERBASE_API_KEY }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(https://stagehand.dev); await stagehand.act(Click the Evals button.); const { data } await stagehand.extract( Extract the value proposition from the page., z.object({ valueProposition: z.string() }), ); console.log(data);设置好BROWSERBASE_API_KEY环境变量后运行即可模型由 Model Gateway 自动选择和鉴权不需要再单独配模型厂商的 key。本地调试时把browserbase.launch()换成localBrowser.launch()就能直接驱动你本机的浏览器。仓库里还有大量可直接运行的示例见 packages/sdk-ts/examples。 典型工作流让 observe 先侦察再动手一个体现 Stagehand 价值的完整场景是先看清、再操作、后抽取page.goto()打开目标页面比如一个商品列表页。调observe(find the latest PR)之类的问题拿到页面上可操作元素的清单包括每个元素的选择器。这一步不执行任何动作相当于让 AI 先交侦察报告。对报告里你信任的元素直接用page.locator(selector).click()走确定性路径对不确定的复杂交互再交给act(点击登录按钮)。最后用extract加一个 zod schemaPython 里是 pydantic 模型把结果抽成类型安全的数据直接进下游业务逻辑。生产上跑起来后你可以配合 observability 面板回放整个会话每一步 act/extract/observe 的时间、输入、输出都会记录成事件流排查问题时不用靠猜。 用官方评测集验证你的改动如果你调整了模型、提示词或想对比不同 Agent 方案Stagehand 自带一套 evals 工具链内置 act/extract/observe/agent 四类 bench 任务以及 WebVoyager、OnlineMind2Web、WebTailBench、Odysseys 等数据集驱动的套件任务从目录自动发现写个文件就能加新任务。结果可以流到 Braintrust 做多次实验对比。细节见 packages/evals/。⚠️ 上手前注意这几件事密钥自己读Stagehand 不会替你读环境变量API key 需要你在代码里显式传入浏览器和模型网关都依赖 Browserbase 的 key。开发期优先本地浏览器用localBrowser.launch()省掉云端依赖稳定后再切回browserbase跑生产。selfHeal 要显式开启默认不会自愈录制好的动作在选择器失效时是失败而非重推理需要自愈能力时打开selfHeal选项。缓存是省钱关键重复性强的流程记得开 action 缓存避免每次运行都为同样的点击付一次 LLM 调用。三种语言 API 对齐TS、Python、Go 的三原语和 page API 是同一套设计选哪门语言都按 quickstart 里的对应示例写即可。对需要在真实网页上同时要求 AI 灵活性和生产可靠性的团队来说Stagehand 是目前少有的把这两件事放进同一个 SDK 里解决的方案值得在你的自动化项目里先拿一个小流程试跑一遍。【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考