動(dòng)瀏覽器：Stagehand 瀏覽器代理 SDK 入門與實(shí)踐)
用一句話驅(qū)動(dòng)瀏覽器Stagehand 瀏覽器代理 SDK 入門與實(shí)踐【免費(fèi)下載鏈接】stagehandThe SDK For Browser Agents項(xiàng)目地址: https://gitcode.com/GitHub_Trending/stag/stagehand如果你寫過網(wǎng)頁自動(dòng)化腳本大概都體會(huì)過這種煩惱選擇器寫好了網(wǎng)站一改版就全線報(bào)廢還得回來手動(dòng)修。Stagehand 正是為解決這個(gè)問題而生的瀏覽器代理browser agentSDK它把「打開頁面、點(diǎn)擊按鈕、抓取數(shù)據(jù)」這些操作變成一句自然語言指令并提供 TypeScript、Python、Go 三套 SDK適合想給項(xiàng)目加自動(dòng)化能力的開發(fā)者和 AI 應(yīng)用作者。從選擇器地獄里走出來傳統(tǒng)做法是 Playwright 那一路page.click(div.container ul li:nth-child(3) a)。這種方式確定性強(qiáng)但對(duì)真實(shí)網(wǎng)頁來說非常脆弱——頁面結(jié)構(gòu)一變腳本就失效而且你要為每個(gè)操作手工維護(hù)選擇器路徑。Stagehand 換了一個(gè)思路既然維護(hù)選擇器這么痛苦那就讓 AI 來判斷該點(diǎn)哪里、該抓什么。它保留了 Playwright 風(fēng)格的 APIgoto、click、locator、screenshot你熟悉的調(diào)用方式基本不變同時(shí)新增了三個(gè)用自然語言驅(qū)動(dòng)的入口。下面這張對(duì)比圖很直觀左邊幾行 Stagehand 代碼右邊是完成同樣任務(wù)需要的 Playwright 代碼。對(duì)新手來說這意味著什么你不用再逐個(gè)研究頁面 DOM 結(jié)構(gòu)把「提取 AI 資助公司及批次號(hào)」這樣的需求直接說給 SDK它會(huì)自己找到對(duì)應(yīng)元素。頁面改版后它也會(huì)重新定位而不是直接報(bào)錯(cuò)——官方把這叫作 self-healing自愈動(dòng)作。十分鐘跑通第一個(gè)自動(dòng)化上手路徑很短裝 SDK、配密鑰、跑一個(gè)腳本。以 TypeScript 為例mkdir my-stagehand-app cd my-stagehand-app pnpm init -y pnpm install browserbasehq/stagehand zod裝好之后準(zhǔn)備兩個(gè)環(huán)境變量OPENAI_API_KEY或其他 LLM 提供商的密鑰和BROWSERBASE_API_KEY云端瀏覽器憑據(jù)。腳本部分可以先從官方示例抄起const browser await browserbase.launch({ apiKey: BROWSERBASE_API_KEY }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(https://example.com); const result await stagehand.extract( Extract the page heading and description, z.object({ heading: z.string(), description: z.string() }), );這段代碼完成了完整閉環(huán)啟動(dòng)瀏覽器、打開頁面、用一句話提取結(jié)構(gòu)化數(shù)據(jù)。你需要關(guān)注的只有兩處——extract第一個(gè)參數(shù)是自然語言任務(wù)描述第二個(gè)參數(shù)是 zod schema用來約束返回的 JSON 結(jié)構(gòu)保證拿到的數(shù)據(jù)字段穩(wěn)定。完整腳本可以照著 packages/sdk-ts/examples/ 目錄下的示例寫里面按功能分好了文件act.ts負(fù)責(zé)點(diǎn)擊操作observe.ts負(fù)責(zé)頁面探索caching.ts、batch.ts演示進(jìn)階用法。如果你用 Python 或 Go對(duì)應(yīng)的 packages/sdk-python/ 和 packages/sdk-go/ 下也有 README 和同名示例。想直接搭一個(gè)可運(yùn)行的項(xiàng)目腳手架可以用官方 CLInpx create-browser-app執(zhí)行后會(huì)生成一個(gè)帶瀏覽器演示頁面的項(xiàng)目跑起來就能看到自動(dòng)化的實(shí)時(shí)效果比對(duì)著文檔空想要快得多。三個(gè)入口 一個(gè)代理覆蓋自動(dòng)化日常Stagehand 把自動(dòng)化能力拆成四個(gè)入口日常 90% 的需求都在這幾行 API 里act —— 執(zhí)行操作。傳入一句指令即可比如stagehand.act(Click the Evals button.)。它內(nèi)部會(huì)先找到目標(biāo)元素再執(zhí)行點(diǎn)擊、輸入等動(dòng)作找到失敗時(shí)會(huì)重試而不是直接崩掉。extract —— 結(jié)構(gòu)化取數(shù)。上面示例已經(jīng)見過特點(diǎn)是返回嚴(yán)格符合 schema 的對(duì)象方便直接喂給后端或下游模型。observe —— 先看再動(dòng)。如果你不確定頁面上有哪些可交互元素可以先問一句「這個(gè)頁面上我能點(diǎn)什么」它會(huì)返回一組候選動(dòng)作和對(duì)應(yīng)選擇器。適合寫多步腳本前做偵察也能把結(jié)果交給page.locator(selector).click()走確定性的 Playwright 式路徑執(zhí)行。agent —— 交給代理自主完成。當(dāng)任務(wù)步驟多、路徑不確定時(shí)比如「滾動(dòng)到頁面底部點(diǎn) Leaderboard告訴我第一名是誰」可以直接創(chuàng)建一個(gè) agent給它一句指令讓它自己規(guī)劃步驟、操作頁面、返回結(jié)果。下面這張圖展示的就是一個(gè)瀏覽器代理接到提問后自動(dòng)操作的完整過程。選擇建議很簡(jiǎn)單步驟固定、追求確定性就用actobserve要取數(shù)就用extract任務(wù)開放、步驟動(dòng)態(tài)才上agent。能不用 agent 就不用token 成本和執(zhí)行時(shí)間都會(huì)更可控。生產(chǎn)環(huán)境才關(guān)心的幾件事如果你的腳本只是個(gè)人跑一跑前面的用法就夠用了要進(jìn)生產(chǎn)Stagehand 還準(zhǔn)備了幾塊基礎(chǔ)設(shè)施?？捎^測(cè)性官方支持與 OpenTelemetry 及 Browserbase 遙測(cè)平臺(tái)打通每一次 extract、act、observe 的輸入輸出都會(huì)記錄成軌跡出問題時(shí)能回放具體哪一步、在哪頁出錯(cuò)。成本與緩存同樣頁面的重復(fù)請(qǐng)求可以直接命中緩存packages/docs/v4/best-practices/caching.mdx 和 cost-optimization.mdx 里講得很細(xì)。回歸測(cè)試倉(cāng)庫自帶的 packages/evals/ 是一套評(píng)測(cè)框架內(nèi)置 WebVoyager、online-Mind2Web 等公開數(shù)據(jù)集可以批量驗(yàn)證代理在真實(shí)網(wǎng)站上的成功率。改完提示詞或升級(jí) SDK 后跑一輪回歸比「手動(dòng)點(diǎn)兩下看看」可靠得多。什么樣的任務(wù)適合交給它幾個(gè)比較順手的場(chǎng)景數(shù)據(jù)管道從價(jià)格頁、榜單、招聘列表里定時(shí)抽取結(jié)構(gòu)化數(shù)據(jù)extract zod schema 直接產(chǎn)出入庫格式。表單與多步驟流程注冊(cè)、下單、申請(qǐng)這類點(diǎn)擊填寫混合的流程用act串起來失敗步驟靠自愈機(jī)制兜底。站點(diǎn)監(jiān)控定時(shí)observe關(guān)鍵頁面檢查核心按鈕和入口是否還在比選擇器監(jiān)控更抗改版。給 AI 應(yīng)用加「手」如果你在做 agent 類產(chǎn)品Stagehand 可以作為它的瀏覽器執(zhí)行層官方還提供了 MCP 集成方案文檔在 packages/docs/v4/best-practices/mcp-integrations.mdx與 Claude Code 等編碼代理的接入示例在 packages/integrations/ 下。接下來可以做的三件事克隆倉(cāng)庫git clone https://gitcode.com/GitHub_Trending/stag/stagehand照著根目錄 README 用just工具鏈把三個(gè) SDK 都跑一遍示例先建立對(duì) API 的整體印象。精讀 packages/docs/v4/first-steps/ 下的 installation 和 quickstart 兩篇把本地瀏覽器localBrowser.launch和云端瀏覽器browserbase.launch兩種模式都配通——前者免費(fèi)但占本機(jī)資源后者適合要跑在服務(wù)器上的場(chǎng)景。把自己手頭一個(gè)最煩的重復(fù)性網(wǎng)頁任務(wù)拿出來先用observe試探頁面結(jié)構(gòu)再?zèng)Q定用act還是extract實(shí)現(xiàn)。跑通一個(gè)真實(shí)任務(wù)比讀完所有文檔更能建立手感。Stagehand 的定位一句話概括Playwright 是為測(cè)試寫的Stagehand 是給代理寫的。它沒有替代底層瀏覽器控制而是給 AI 加了一層「看得懂頁面、修得好動(dòng)作」的接口讓自動(dòng)化腳本從「寫一次修一年」變成「說一句話就行」?！久赓M(fèi)下載鏈接】stagehandThe SDK For Browser Agents項(xiàng)目地址: https://gitcode.com/GitHub_Trending/stag/stagehand創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 用一句話驅(qū)動(dòng)瀏覽器：Stagehand 瀏覽器代理 SDK 入門與實(shí)踐
用一句話驅(qū)動(dòng)瀏覽器Stagehand 瀏覽器代理 SDK 入門與實(shí)踐【免費(fèi)下載鏈接】stagehandThe SDK For Browser Agents項(xiàng)目地址: https://gitcode.com/GitHub_Trending/stag/stagehand如果你寫過網(wǎng)頁自動(dòng)化腳本大概都體會(huì)過這種煩惱選擇器寫好了網(wǎng)站一改版就全線報(bào)廢還得回來手動(dòng)修。Stagehand 正是為解決這個(gè)問題而生的瀏覽器代理browser agentSDK它把「打開頁面、點(diǎn)擊按鈕、抓取數(shù)據(jù)」這些操作變成一句自然語言指令并提供 TypeScript、Python、Go 三套 SDK適合想給項(xiàng)目加自動(dòng)化能力的開發(fā)者和 AI 應(yīng)用作者。從選擇器地獄里走出來傳統(tǒng)做法是 Playwright 那一路page.click(div.container ul li:nth-child(3) a)。這種方式確定性強(qiáng)但對(duì)真實(shí)網(wǎng)頁來說非常脆弱——頁面結(jié)構(gòu)一變腳本就失效而且你要為每個(gè)操作手工維護(hù)選擇器路徑。Stagehand 換了一個(gè)思路既然維護(hù)選擇器這么痛苦那就讓 AI 來判斷該點(diǎn)哪里、該抓什么。它保留了 Playwright 風(fēng)格的 APIgoto、click、locator、screenshot你熟悉的調(diào)用方式基本不變同時(shí)新增了三個(gè)用自然語言驅(qū)動(dòng)的入口。下面這張對(duì)比圖很直觀左邊幾行 Stagehand 代碼右邊是完成同樣任務(wù)需要的 Playwright 代碼。對(duì)新手來說這意味著什么你不用再逐個(gè)研究頁面 DOM 結(jié)構(gòu)把「提取 AI 資助公司及批次號(hào)」這樣的需求直接說給 SDK它會(huì)自己找到對(duì)應(yīng)元素。頁面改版后它也會(huì)重新定位而不是直接報(bào)錯(cuò)——官方把這叫作 self-healing自愈動(dòng)作。十分鐘跑通第一個(gè)自動(dòng)化上手路徑很短裝 SDK、配密鑰、跑一個(gè)腳本。以 TypeScript 為例mkdir my-stagehand-app cd my-stagehand-app pnpm init -y pnpm install browserbasehq/stagehand zod裝好之后準(zhǔn)備兩個(gè)環(huán)境變量OPENAI_API_KEY或其他 LLM 提供商的密鑰和BROWSERBASE_API_KEY云端瀏覽器憑據(jù)。腳本部分可以先從官方示例抄起const browser await browserbase.launch({ apiKey: BROWSERBASE_API_KEY }); const stagehand await Stagehand.create({ browser }); const [page] await browser.context.pages(); await page.goto(https://example.com); const result await stagehand.extract( Extract the page heading and description, z.object({ heading: z.string(), description: z.string() }), );這段代碼完成了完整閉環(huán)啟動(dòng)瀏覽器、打開頁面、用一句話提取結(jié)構(gòu)化數(shù)據(jù)。你需要關(guān)注的只有兩處——extract第一個(gè)參數(shù)是自然語言任務(wù)描述第二個(gè)參數(shù)是 zod schema用來約束返回的 JSON 結(jié)構(gòu)保證拿到的數(shù)據(jù)字段穩(wěn)定。完整腳本可以照著 packages/sdk-ts/examples/ 目錄下的示例寫里面按功能分好了文件act.ts負(fù)責(zé)點(diǎn)擊操作observe.ts負(fù)責(zé)頁面探索caching.ts、batch.ts演示進(jìn)階用法。如果你用 Python 或 Go對(duì)應(yīng)的 packages/sdk-python/ 和 packages/sdk-go/ 下也有 README 和同名示例。想直接搭一個(gè)可運(yùn)行的項(xiàng)目腳手架可以用官方 CLInpx create-browser-app執(zhí)行后會(huì)生成一個(gè)帶瀏覽器演示頁面的項(xiàng)目跑起來就能看到自動(dòng)化的實(shí)時(shí)效果比對(duì)著文檔空想要快得多。三個(gè)入口 一個(gè)代理覆蓋自動(dòng)化日常Stagehand 把自動(dòng)化能力拆成四個(gè)入口日常 90% 的需求都在這幾行 API 里act —— 執(zhí)行操作。傳入一句指令即可比如stagehand.act(Click the Evals button.)。它內(nèi)部會(huì)先找到目標(biāo)元素再執(zhí)行點(diǎn)擊、輸入等動(dòng)作找到失敗時(shí)會(huì)重試而不是直接崩掉。extract —— 結(jié)構(gòu)化取數(shù)。上面示例已經(jīng)見過特點(diǎn)是返回嚴(yán)格符合 schema 的對(duì)象方便直接喂給后端或下游模型。observe —— 先看再動(dòng)。如果你不確定頁面上有哪些可交互元素可以先問一句「這個(gè)頁面上我能點(diǎn)什么」它會(huì)返回一組候選動(dòng)作和對(duì)應(yīng)選擇器。適合寫多步腳本前做偵察也能把結(jié)果交給page.locator(selector).click()走確定性的 Playwright 式路徑執(zhí)行。agent —— 交給代理自主完成。當(dāng)任務(wù)步驟多、路徑不確定時(shí)比如「滾動(dòng)到頁面底部點(diǎn) Leaderboard告訴我第一名是誰」可以直接創(chuàng)建一個(gè) agent給它一句指令讓它自己規(guī)劃步驟、操作頁面、返回結(jié)果。下面這張圖展示的就是一個(gè)瀏覽器代理接到提問后自動(dòng)操作的完整過程。選擇建議很簡(jiǎn)單步驟固定、追求確定性就用actobserve要取數(shù)就用extract任務(wù)開放、步驟動(dòng)態(tài)才上agent。能不用 agent 就不用token 成本和執(zhí)行時(shí)間都會(huì)更可控。生產(chǎn)環(huán)境才關(guān)心的幾件事如果你的腳本只是個(gè)人跑一跑前面的用法就夠用了要進(jìn)生產(chǎn)Stagehand 還準(zhǔn)備了幾塊基礎(chǔ)設(shè)施?？捎^測(cè)性官方支持與 OpenTelemetry 及 Browserbase 遙測(cè)平臺(tái)打通每一次 extract、act、observe 的輸入輸出都會(huì)記錄成軌跡出問題時(shí)能回放具體哪一步、在哪頁出錯(cuò)。成本與緩存同樣頁面的重復(fù)請(qǐng)求可以直接命中緩存packages/docs/v4/best-practices/caching.mdx 和 cost-optimization.mdx 里講得很細(xì)。回歸測(cè)試倉(cāng)庫自帶的 packages/evals/ 是一套評(píng)測(cè)框架內(nèi)置 WebVoyager、online-Mind2Web 等公開數(shù)據(jù)集可以批量驗(yàn)證代理在真實(shí)網(wǎng)站上的成功率。改完提示詞或升級(jí) SDK 后跑一輪回歸比「手動(dòng)點(diǎn)兩下看看」可靠得多。什么樣的任務(wù)適合交給它幾個(gè)比較順手的場(chǎng)景數(shù)據(jù)管道從價(jià)格頁、榜單、招聘列表里定時(shí)抽取結(jié)構(gòu)化數(shù)據(jù)extract zod schema 直接產(chǎn)出入庫格式。表單與多步驟流程注冊(cè)、下單、申請(qǐng)這類點(diǎn)擊填寫混合的流程用act串起來失敗步驟靠自愈機(jī)制兜底。站點(diǎn)監(jiān)控定時(shí)observe關(guān)鍵頁面檢查核心按鈕和入口是否還在比選擇器監(jiān)控更抗改版。給 AI 應(yīng)用加「手」如果你在做 agent 類產(chǎn)品Stagehand 可以作為它的瀏覽器執(zhí)行層官方還提供了 MCP 集成方案文檔在 packages/docs/v4/best-practices/mcp-integrations.mdx與 Claude Code 等編碼代理的接入示例在 packages/integrations/ 下。接下來可以做的三件事克隆倉(cāng)庫git clone https://gitcode.com/GitHub_Trending/stag/stagehand照著根目錄 README 用just工具鏈把三個(gè) SDK 都跑一遍示例先建立對(duì) API 的整體印象。精讀 packages/docs/v4/first-steps/ 下的 installation 和 quickstart 兩篇把本地瀏覽器localBrowser.launch和云端瀏覽器browserbase.launch兩種模式都配通——前者免費(fèi)但占本機(jī)資源后者適合要跑在服務(wù)器上的場(chǎng)景。把自己手頭一個(gè)最煩的重復(fù)性網(wǎng)頁任務(wù)拿出來先用observe試探頁面結(jié)構(gòu)再?zèng)Q定用act還是extract實(shí)現(xiàn)。跑通一個(gè)真實(shí)任務(wù)比讀完所有文檔更能建立手感。Stagehand 的定位一句話概括Playwright 是為測(cè)試寫的Stagehand 是給代理寫的。它沒有替代底層瀏覽器控制而是給 AI 加了一層「看得懂頁面、修得好動(dòng)作」的接口讓自動(dòng)化腳本從「寫一次修一年」變成「說一句話就行」?！久赓M(fèi)下載鏈接】stagehandThe SDK For Browser Agents項(xiàng)目地址: https://gitcode.com/GitHub_Trending/stag/stagehand創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考