跳至主要內容

BrowserViewer

@mastra/browser-viewer 套件為 agent-browser、browser-use 和 browse 等 CLI Tool 提供瀏覽器自動化。BrowserViewer 透過 Playwright 啟動 Chrome、公開 Chrome DevTools Protocol（CDP）URL，並自動將其注入透過 Workspace Tool 執行的 CLI 命令。

適合使用 BrowserViewer 的時機
「適合使用 BrowserViewer 的時機」的直接連結

當 Agent 透過 CLI Tool 而非 SDK 操作瀏覽器時，請使用 BrowserViewer。BrowserViewer 會處理：

  • 啟動並管理 Chrome，供 CLI Tool 連線
  • 自動將 CDP URL 注入 workspace_execute_command 呼叫
  • 將即時螢幕串流傳送至 Studio
  • 以 thread 為範圍隔離瀏覽器

若要使用 SDK 進行瀏覽器自動化，請改用 AgentBrowser 或 Stagehand。

快速開始
「快速開始」的直接連結

安裝 @mastra/browser-viewer 和 Agent 將使用的 CLI Tool。BrowserViewer 會管理 Chrome，但仍須另外安裝 CLI Tool 本身。

npm install @mastra/browser-viewer

在 Workspace 環境中安裝 CLI Tool。此範例使用 browser-use：

pip install browser-use

安裝對應的 Skill，讓 Agent 知道如何使用 CLI：

npx skills add browser-use/browser-use --skill browser-use

建立使用 BrowserViewer 的 Workspace，並將其指派給 Agent：

src/mastra/index.ts
import { Mastra } from '@mastra/core/mastra'
import { Agent } from '@mastra/core/agent'
import { Memory } from '@mastra/memory'
import { LibSQLStore } from '@mastra/libsql'
import { Workspace, LocalSandbox } from '@mastra/core/workspace'
import { BrowserViewer } from '@mastra/browser-viewer'

const workspace = new Workspace({
  sandbox: new LocalSandbox({
    workingDirectory: './workspace',
  }),
  browser: new BrowserViewer({
    cli: 'browser-use',
    headless: false,
  }),
})

const browserAgent = new Agent({
  id: 'browser-agent',
  model: 'openai/gpt-5.6-sol',
  workspace,
  instructions: `You are a web automation assistant.
Use browser-use commands to navigate and interact with websites.`,
  memory: new Memory(),
})

export const mastra = new Mastra({
  agents: { browserAgent },
  storage: new LibSQLStore({
    id: 'mastra-storage',
    url: 'file:./mastra.db',
  }),
})

當 Agent 執行 browser-use open https://example.com 之類的 CLI 命令時，Mastra 會自動啟動 Chrome 並注入 CDP 連線，同時開始將螢幕串流傳送至 Studio。

運作方式
「運作方式」的直接連結

  1. Agent 使用瀏覽器 CLI 命令呼叫 workspace_execute_command。
  2. Mastra 偵測到 CLI 命令，並透過 Playwright 啟動 Chrome（若尚未執行）。
  3. CDP URL 會注入命令，讓 CLI 連線至受管理的瀏覽器。
  4. 螢幕串流影格會從頁面層級的 CDP 工作階段傳送至 Studio。

支援的 CLI
「支援的 CLI」的直接連結

BrowserViewer 支援三種 CLI Provider。每個 CLI 都必須另外安裝至 Workspace 環境。每個 CLI 也會發布 Skill，教導 Agent 相關命令和工作流程。

設定 cli 選項，使其符合 Agent 使用的 CLI：

const viewer = new BrowserViewer({
  cli: 'browser-use',
  headless: false,
})

agent-browser
「agent-browser」的直接連結

npm install -g agent-browser
npx skills add vercel-labs/agent-browser

CDP 旗標：--cdp

browser-use
「browser-use」的直接連結

pip install browser-use
npx skills add browser-use/browser-use --skill browser-use

CDP 旗標：--cdp-url

browse
「browse」的直接連結

npm install -g browse
browse skills install

CDP 旗標：--ws 所有設定選項、進階連線模式和方法詳情請參閱 BrowserViewer 參考文件。

On this page