Stagehand 教學｜AI 驅動的瀏覽器自動化神器，TypeScript 與 Python 都支援！

by Rain Chu | 8 月 8, 2025 | Agent, AI, Javascript, Python, RPA, 瀏覽器, 程式開發

想用 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())