> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ja/llms.txt

# BrowserViewer

`@mastra/browser-viewer` パッケージは、[agent-browser](https://www.npmjs.com/package/agent-browser)、[browser-use](https://pypi.org/project/browser-use/)、[browse](https://www.npmjs.com/package/browse) などの CLI ベースの Tool にブラウザ自動化機能を提供します。BrowserViewer は Playwright 経由で Chrome を起動し、Chrome DevTools Protocol（CDP）の URL を公開して、[Workspace Tool](https://mastra.zisheng.pro/ja/docs/workspace/overview)から実行される CLI コマンドへ自動的に注入します。

## BrowserViewer を使用する場面

Agent が SDK ではなく CLI Tool を介してブラウザを操作する場合に BrowserViewer を使用します。BrowserViewer は次の処理を担います。

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

SDK ベースのブラウザ自動化には、代わりに [AgentBrowser](https://mastra.zisheng.pro/ja/docs/browser/agent-browser) または [Stagehand](https://mastra.zisheng.pro/ja/docs/browser/stagehand) を使用してください。

## クイックスタート

`@mastra/browser-viewer` と Agent が使用する CLI Tool をインストールします。BrowserViewer は Chrome を管理しますが、CLI Tool 自体は別途インストールする必要があります。

**npm**:

```bash
npm install @mastra/browser-viewer
```

**pnpm**:

```bash
pnpm add @mastra/browser-viewer
```

**Yarn**:

```bash
yarn add @mastra/browser-viewer
```

**Bun**:

```bash
bun add @mastra/browser-viewer
```

Workspace 環境に CLI Tool をインストールします。この例では `browser-use` を使用します。

```bash
pip install browser-use
```

Agent が CLI の使用方法を理解できるように、対応する [Skill](https://mastra.zisheng.pro/ja/docs/workspace/skills) をインストールします。

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

BrowserViewer を設定した Workspace を作成し、Agent に割り当てます。

```typescript
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

BrowserViewer は 3 つの CLI Provider に対応しています。各 CLI は Workspace 環境に別途インストールする必要があります。また、各 CLI はコマンドと Workflow を Agent に教える [Skill](https://mastra.zisheng.pro/ja/docs/workspace/skills) も公開しています。

Agent が使用する CLI に合わせて `cli` オプションを設定します。

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

### `agent-browser`

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

CDP フラグ: `--cdp`

### `browser-use`

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

CDP フラグ: `--cdp-url`

### `browse`

```bash
npm install -g browse
browse skills install
```

CDP フラグ: `--ws` すべての設定オプション、高度な接続モード、メソッドの詳細については、[BrowserViewer リファレンス](https://mastra.zisheng.pro/ja/reference/browser/browser-viewer)を参照してください。

## 関連情報

- [Browser の概要](https://mastra.zisheng.pro/ja/docs/browser/overview)
- [AgentBrowser](https://mastra.zisheng.pro/ja/docs/browser/agent-browser)
- [Stagehand](https://mastra.zisheng.pro/ja/docs/browser/stagehand)
- [Workspace の概要](https://mastra.zisheng.pro/ja/docs/workspace/overview)
- [Workspace Skill](https://mastra.zisheng.pro/ja/docs/workspace/skills)