Stagehand 教學｜AI 驅動的瀏覽器自動化神器，TypeScript 與 Python 都支援！
想用 AI 控制網頁自動化，但程式碼又要精準可靠，同時享受自然語言，高效又方便？那你絕不能錯過由 Browserbase 團隊推出的 Stagehand —— 這款專為 AI 時代設計的瀏覽器自動化框架，不僅支援 TypeScript 與 Python、可本地或雲端部署，還比 Browser‑Use 更快、更耐變動！
Stagehand 兼具控制力與智慧的 AI 瀏覽器自動化框架
Stagehand 是以 Playwright 為核心構建的 AI-native 自動化工具，它加入了 LLM 判斷能力，結合程式精準控制與自然語言指令，令自動化腳本更穩定、更智慧也更高效
- 自然語言 + 程式碼混合操作：你可以用程式寫明確動作，也能用「act(‘點擊第一個 Stagehand 元件’)」這樣類人語法完成UI操作 。
- 接口完整，支援察看、執行與資料萃取：核心三大命令
act、observe、extract，讓操作更透明、更可控 - 容錯與自恢復能力：UI 略有變動也不怕，Stagehand 的
observe+ 快取策略讓腳本更具彈性 - 完美整合 Playwright：所有 Playwright 腳本都能無縫升級 Stagehand，省心又高效
核心玩法！TypeScript/JavaScript 快速上手範例
// Use Playwright functions on the page object
const page = stagehand.page;
await page.goto("https://github.com/browserbase");
// Use act() to execute individual actions
await page.act("click on the stagehand repo");
// Use Computer Use agents for larger actions
const agent = stagehand.agent({
provider: "openai",
model: "computer-use-preview",
});
await agent.execute("Get to the latest PR");
// Use extract() to read data from the page
const { author, title } = await page.extract({
instruction: "extract the author and title of the PR",
schema: z.object({
author: z.string().describe("The username of the PR author"),
title: z.string().describe("The title of the PR"),
}),
});這段程式完整示範了初始化、導航、AI 驅動操作到資料萃取的流程，不僅省事，也大幅提升開發效率。
Stagehand 與 Browser-Use 比較
| 功能面 | Stagehand（此文主角） | Browser-Use |
|---|---|---|
| 控制精準度 | Token 級動作掌控 + 自然語言指令混合 | 攻擊角度偏自然語言，程式控制較弱 |
| 容錯能力 | observe + 快取策略，對 DOM 變化更耐受 | 缺少自恢復機制 |
| 雲端支援 | 原生整合 Browserbase，輕鬆雲端部署 | 需額外集成，無預設雲平台支援 |
| 語言支援 | TypeScript / Python | 主要依賴 Python |
| AI 整合 | 天生結合 LLM，支援複雜任務拆解 | 依賴外部 LLM，不那麼一體化 |
只要先學四個指令，快速上手
指定去那一個網頁
goto()：
# 初始化
page = stagehand.page
# 指定去那一個頁面
await page.goto("https://rain.tips/")使用自然語言操作
act()：
await page.act("點選確定按鈕");抓取數據資料
extract()：
post = await page.extract("取得標題")預覽功能
observe()：
links = await page.observe("找到頁面中的所有連結")實戰快速導覽
安裝
# 用 pip pip install stagehand python-dotenv # 安裝playwright python -m playwright install # 裝 chromium 瀏覽器 python -m playwright install chromium
建立 .env
export BROWSERBASE_API_KEY="your_browserbase_api_key" export BROWSERBASE_PROJECT_ID="your_browserbase_project_id" export MODEL_API_KEY="your_model_api_key" # OpenAI, Anthropic, etc.
建立程式碼 main.py
import asyncio
import os
from stagehand import Stagehand, StagehandConfig
from dotenv import load_dotenv
load_dotenv()
async def main():
config = StagehandConfig(
env="BROWSERBASE",
api_key=os.getenv("BROWSERBASE_API_KEY"),
project_id=os.getenv("BROWSERBASE_PROJECT_ID"),
model_name="gpt-4o",
model_api_key=os.getenv("MODEL_API_KEY")
)
stagehand = Stagehand(config)
try:
await stagehand.init()
page = stagehand.page
await page.goto("https://docs.stagehand.dev/")
await page.act("click the quickstart link")
result = await page.extract("extract the main heading of the page")
print(f"Extracted: {result}")
finally:
await stagehand.close()
if __name__ == "__main__":
asyncio.run(main())驗證與測試
python main.py
若要用本地端的瀏覽器的話，可以改成下面的程式碼
import asyncio
import os
from dotenv import load_dotenv
from stagehand import StagehandConfig, Stagehand
load_dotenv()
async def main():
# 检查API密钥是否设置
api_key = os.getenv("OPENAI_API_KEY")
config = StagehandConfig(
env="LOCAL", # 本地运行
# AI模型配置 - 使用环境变量
model_name="gpt-4o-mini", # 使用更便宜的模型
model_api_key=api_key, # 从环境变量读取
# 本地运行配置
headless=False, # 显示浏览器窗口
verbose=3, # 详细日志
debug_dom=True, # DOM调试
)
# 使用配置创建Stagehand实例
stagehand = Stagehand(config)
# 初始化Stagehand（启动浏览器会话）
await stagehand.init()
# 获取页面对象，用于后续的页面操作
page = stagehand.page
await page.goto("https://rain.tips/")
# # 使用observe()取得文章的連結
blog_links = await page.observe("取得文章中的所有連結)
print(f"✅ Page link: {blog_links}")
await page.act(blog_links[0])
data_post_1 = await page.extract("取得文章的標題和內文")
print(f"✅ 文章資訊如下: {data_post_1}")
if __name__ == "__main__":
asyncio.run(main())
總結：為什麼 Stagehand 是下一代自動化框架？
- 語言直覺更自然，人類可理解
- 對 UI 變化具彈性、不易失效
- 結合 LLM，自動拆解任務，效率提升數倍
- 支援本地與雲端，開發與生產環境都得心應手
Stagehand 正重新定義瀏覽器自動化，不再只是死板指令，而是一場「程式控＋AI 智能」的完美結合，無論對開發者或 AI 自動化愛好者，都是一大利器。快一起駕馭它，打造更強、更智慧的自動化流程！
參考資料
https://www.aivi.fyi/aiagents/introduce-stagehand
近期留言