Stagehand AI 瀏覽器自動化：從代碼 SDK 到桌面原生 Agent
Stagehand 把自然語言瀏覽器操控濃縮成三個 API——act()、extract()、observe()，交給開發者。本文解析這套模型如何運作、邊界在哪，以及 Tabbit 如何把同樣的 Agent 自動化帶進你每天使用的桌面瀏覽器——零代碼。
Tabbit 瀏覽器（原生 Agent）如果你在用 TypeScript 或 Python 搭建無頭流水線，Stagehand 是優秀的 SDK。但面對日常工作——調研、填表、登入後的內部系統、多分頁任務——Tabbit 直接在你真實使用的瀏覽器裡執行同類 Agent 動作，免環境設定、免選擇器維護。
免費下載 • macOS（Apple Silicon / Intel）• Windows 11/10
Tabbit Agent 實況：自然語言任務輸入，規劃好的瀏覽器動作輸出——每一步在側邊欄可見、可中斷。
Stagehand AI 瀏覽器自動化的運作原理
Stagehand 由 Browserbase 基於 Playwright 打造，用 LLM 意圖理解取代脆弱的 CSS 選擇器。三個 API 覆蓋完整閉環：
自然語言動作執行
act("click the login button") 讓大模型從頁面上下文中定位正確元素並執行點擊、輸入或導覽——不再需要維護 XPath。
結構化資料擷取
把指令和 schema 配對，Stagehand 就能從任意頁面回傳強型別 JSON——表格、清單或散落各處的欄位都能抓。
動作發現與快取
observe("find the checkout options") 列出頁面上可操作的元素。快取產生的選擇器，下次執行即可低成本重放。
import { Stagehand } from "@browserbasehq/stagehand";
const stagehand = new Stagehand();
await stagehand.init();
await stagehand.page.goto("https://example.com/pricing");
await stagehand.page.act("click the annual plan toggle");
const plans = await stagehand.page.extract({
instruction: "extract each plan name and price",
schema: {plan: z.string(), price: z.string()},
});
await stagehand.close();典型的 Stagehand 流程：init、act、extract、close——真實的代碼、真實的 API Key、真實的無頭工作階段。
Stagehand.dev：開發者優先的定位、npm 安裝方式，以及 batch/click/type 場景下對比原生 Playwright 的基準資料。
瀏覽器 SDK 與日常自動化之間的四道鴻溝
這些都不是缺陷——它們是代碼優先 SDK 的天然邊界。但當自動化需要融入你的工作日時，它們就開始變得重要。
只有工程師能用
第一次呼叫 act() 之前，你得裝好 Node.js 或 Python、設好 LLM API Key、搭好無頭 Chromium。非開發者連第一步都邁不過去。
與已登入的瀏覽器割裂
工作階段和 Cookie 存在 storageState 檔案裡，而不是你已經登入好的瀏覽器裡。SSO、2FA 和驗證碼都需要額外處理。
沒有視覺化回饋
無頭執行全程不可見。流程在第 7 步（共 12 步）中斷時，你只能靠日誌和截圖排查，而不是親眼看頁面。
單任務腳本，而非工作空間
每個自動化都是一個獨立腳本，配自己的儲存庫和 CI。日常瀏覽、分頁、筆記和調研都遊離在外。
開發者體驗的真實樣貌：真實代碼、環境設定和遠端 page-extension 架構——對工程師強大，對其他人遙不可及。
Tabbit 瀏覽器：在你工作的地方完成自動化
Tabbit 是一款內建 Agent 的 AI 原生桌面瀏覽器。Stagehand 交給程式的意圖驅動動作，Tabbit 直接交給你——用自然語言，在真實分頁裡，在真實網站上。
自然語言任務，零代碼
在側邊欄輸入「比較這三個商品並填進表格」。Agent 規劃步驟，然後點擊、輸入、捲動、擷取——全程可見。
你的登入狀態，開箱即用
Agent 直接在你的常規瀏覽器設定檔裡執行。Google、LinkedIn、內部後台——都已登入。遇到 2FA？你自己幾秒確認即可。
多分頁上下文，一個任務
Agent 跨分頁閱讀、對比來源，並把結果寫入筆記或表格——無需編寫任何多上下文調度程式。
預設人在迴圈
每個計畫步驟都顯示在側邊欄。隨時暫停、糾正或接管——這是你能真正監督的自動化。
Tabbit 深度研究：Agent 搜尋、閱讀多個頁面並綜合成報告——全部過程在執行流中可見。
Stagehand vs. Playwright vs. Tabbit：8 個維度
瀏覽器操控的三代形態：確定性腳本、LLM 輔助 SDK、原生 Agent 瀏覽器。
| 維度 | Stagehand | Playwright | Tabbit 瀏覽器 |
|---|---|---|---|
| 產品形態 | 瀏覽器 SDK（TypeScript、Python、Go） | 測試與自動化函式庫 | AI 原生桌面瀏覽器 |
| 適用人群 | 開發者 | 開發者與 QA 工程師 | 任何人——零代碼 |
| 環境設定 | Node/Python + 無頭 Chromium 或 Browserbase 雲 | Node/Python/.NET + 內建瀏覽器 | 裝完應用即完成全部設定 |
| 選擇器處理 | LLM 定位元素，自癒 | 手寫選擇器，UI 變更即失效 | Agent 語意化理解頁面，即時自癒 |
| 登入與工作階段 | storageState / Cookie 注入，2FA 需額外處理 | 手動管理工作階段 | 直接使用真實登入設定檔；2FA 由你即時確認 |
| 多分頁工作流 | 編寫多上下文調度程式 | 編寫多上下文調度程式 | 原生分頁、分割檢視與工作區 |
| 回饋與除錯 | 日誌、trace、遠端除錯 | Trace 檢視器、無頭重放 | 即時觀看每一步，隨時中斷 |
| 大模型接入 | 自備 OpenAI/Anthropic Key，按 token 計費 | 無 LLM——純確定性代碼 | 內建頂級模型，首次啟動即可用 |
經驗法則：確定性測試套件選 Playwright，伺服器無頭 LLM 流水線選 Stagehand，日常瀏覽中的自動化選 Tabbit。
桌面原生 Agent 自動化的日常樣貌
三個團隊在 Tabbit 裡高頻執行的工作流——用 Stagehand 寫腳本反而是殺雞用牛刀。
商品上架與價格同步
Agent 開啟供應商頁面、擷取商品資料並填入你的表格或後台——欄位對應都包了。
- 1指令：「抓取這 5 個供應商頁面今天的報價」
- 2Agent 逐一開啟分頁，定位 SKU 與價格，統一單位
- 3你核對表格後，一鍵匯出或同步
競品深度調研
一條指令啟動完整研究循環：Agent 搜尋、閱讀、對比，並替你寫好摘要。
- 1指令：「調研前 5 名競品的定價頁，總結本月變化」
- 2Agent 多源檢索並帶引用地閱讀每個頁面
- 3結構化報告直接落入筆記，隨時分享
表單與後台批次操作
在需要登入的多個門戶間重複提交——Agent 負責填寫，你在送出前審核。
- 1把 Agent 指向你已經登入的後台
- 2Agent 映射表單欄位，從表格批次填入
- 3敏感步驟暫停等你確認——然後送出
Tabbit 中的 Agent 工作流：來源、步驟和結果都在同一個工作空間裡，而不是散落在終端機視窗。
關於 Stagehand 與 AI 瀏覽器自動化的核心問答
關於架構、使用場景、安全性與選型的直接回答。
讓瀏覽器自動化發生在你工作的地方
跳過 SDK 設定、API Key 和無頭除錯。下載 Tabbit 瀏覽器，今天就用自然語言下達你的第一個 Agent 任務。
免費下載 • macOS 與 Windows • 無需代碼