メインコンテンツへ移動

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 が SDK ではなく CLI Tool を介してブラウザを操作する場合に BrowserViewer を使用します。BrowserViewer は次の処理を担います。

  • CLI Tool が接続する Chrome の起動と管理
  • workspace_execute_command 呼び出しへの CDP URL の自動注入
  • Studio へのライブスクリーンキャスト配信
  • スレッド単位でのブラウザ分離

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

Agent が CLI の使用方法を理解できるように、対応する Skill をインストールします。

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 コマンドを検出し、Chrome がまだ実行されていなければ Playwright 経由で起動します。
  3. CLI が管理対象ブラウザに接続できるよう、コマンドに CDP URL が注入されます。
  4. ページ単位の CDP セッションから Studio へスクリーンキャストのフレームが配信されます。

対応 CLI
対応 CLIへの直接リンク

BrowserViewer は 3 つの CLI Provider に対応しています。各 CLI は Workspace 環境に別途インストールする必要があります。また、各 CLI はコマンドと Workflow を Agent に教える Skill も公開しています。

Agent が使用する CLI に合わせて 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