企业官网建设流程全解析

3步跑通 Stagehand：用自然语言驱动浏览器的 Agent SDK 快速上手

【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand

选择器一改，脚本就全挂了？

写网页自动化最崩溃的时刻，大概是站点换个按钮 class，你昨天跑得好好的脚本今天就不动了。把活全交给 AI Agent 呢，行为又随机得没法 debug。Stagehand（Browserbase 出品的浏览器 Agent SDK）的思路是给你两层控制：act / extract / observe 三个自然语言原语负责模糊任务，Playwright 风格的 page API（goto、click、locator）负责确定性操作。两者可以在同一个脚本里混着用，每一步用多少 AI 由你说了算。

🎯 三个真正省事的点

第一，会自愈。传统脚本是选择器死了就死了，Stagehand 的自然语言指令在页面结构变化时会被检测到，并自动刷新执行方式——站点改版后，你的脚本不一定要跟着改。

第二，代码肉眼可见地短。看下面这张对比图：左边是 Stagehand 用一句自然语言加一个 schema 完成"提取页面公司列表"，右边是 Playwright 手动遍历 DOM 的等价实现。

第三，Agent 不瞎看。它用混合可访问性树裁剪页面内容，模型只看到理解页面所需的部分，token 消耗和延迟都降下来；运行时还贴在浏览器旁边跑，远程浏览器用起来也接近本地速度。

⚡ 5分钟跑通第一个 Demo

环境只需要 Node 22.18+（Bun 也行）和一个模型 key（比如 OpenAI）。三步：

1. 建项目、装 SDK：

mkdir my-stagehand-app && cd my-stagehand-app pnpm init -y pnpm add @browserbasehq/stagehand zod

2. 写一个最小脚本（index.ts）：

const browser = await localBrowser.launch({ headless: true }); const stagehand = await Stagehand.create({ browser }); const [page] = await browser.context.pages(); await page.goto("https://example.com"); await stagehand.act("Click the 'More information' link"); await stagehand.close();

记得在 Stagehand.create 里传模型配置（如 openai/gpt-5.4-mini 加你的 OpenAI key）；想用云端浏览器，把 localBrowser 换成 browserbase 并传 Browserbase key 就行。

3. 跑起来：

export OPENAI_API_KEY="sk-..." pnpm dlx tsx index.ts

跑起来后你会看到：浏览器打开并导航到 example.com，AI 自己找到那条 "More information" 链接点下去，终端打印 act 的执行结果。

🔍 深入一瞥：让提取结果自带类型

真正干活时最实用的是 extract：给一句指令加一个 schema（TS 里就是 zod object），返回的数据已经是类型校验过的，不用自己解析 DOM、剪字符串。参数细节看 packages/docs/v4/ 下的文档；仓库里 packages/sdk-ts/examples/ 有一整套官方示例（act、extract、clipboard、webmcp 等），抄一份改改就能用。

如果你打算把这套自动化用到生产，还得回答"我的脚本还稳不稳"。仓库的 packages/evals/ 目录里有一套任务评测框架：定义任务和评判标准、批量跑、看通过率，答案一目了然。

去领个 key，把开头那 6 行脚本跑一遍吧——把 example.com 换成你真在用的页面，先让它替你点一个按钮。

【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand