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

# Browser の概要

Browser サポートにより、Agent は Web サイト内を移動し、ページ要素を操作し、フォームに入力してデータを抽出できます。Mastra は、ブラウザ自動化ライブラリをラップする SDK Provider と、コマンドライン Tool を通じてブラウザを操作する Agent 向けの CLI Provider により、ブラウザ機能を提供します。

Mastra は、3 つの SDK Provider と 1 つの CLI Provider をサポートしています。

- [**AgentBrowser**](https://mastra.zisheng.pro/ja/docs/browser/agent-browser): アクセシビリティを優先して要素を指定する Playwright ベースの Provider です。一般的な Web 自動化とスクレイピングに最適です。
- [**Stagehand**](https://mastra.zisheng.pro/ja/docs/browser/stagehand): AI を利用して要素を検出する Browserbase Provider です。自然言語セレクターが役立つ複雑な操作に最適です。
- [**FirecrawlBrowser**](https://mastra.zisheng.pro/ja/docs/browser/firecrawl): ホストされたブラウザセッションに対して AgentBrowser Tool を実行する Firecrawl Browser Sandbox Provider です。ローカルのブラウザインフラストラクチャを管理せずに、ホストされたブラウザセッションで自動化を実行する場合に最適です。
- [**BrowserViewer**](https://mastra.zisheng.pro/ja/docs/browser/browser-viewer): Chrome を起動し、agent-browser、browser-use、browse などの CLI Tool に CDP URL を渡す CLI Provider です。シェルコマンドを通じてブラウザを操作する Workspace Agent に最適です。
- [**ブラウザ録画（アルファ版）**](https://mastra.zisheng.pro/ja/docs/browser/recording): ブラウザセッションを、任意のキャプション付き Motion-JPEG AVI 動画として保存するオプトイン方式の Tool レイヤーです。

## Browser を使用する場面

Agent で次の操作が必要な場合に Browser を使用します。

- Web サイトに移動してページ要素を操作する
- フォームに入力してデータを送信する
- Web ページから構造化データを抽出する
- 複数ステップの Web Workflow を自動化する
- 実際のブラウザが必要な操作を実行する（JavaScript のレンダリング、認証フロー）

## 仕組み

Browser を Agent に割り当てると、Mastra は Provider の Tool を Agent の Tool セットに追加します。Agent はこれらの Tool を使用して、URL への移動、要素の選択、テキストの入力、ページ内容の読み取りなど、ブラウザを操作します。

各 Provider は、それぞれの方式に最適化された異なる Tool セットを提供します。

## クイックスタート

使用する Provider をインストールします。この例では AgentBrowser Provider を使用します。

**npm**:

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

**pnpm**:

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

**Yarn**:

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

**Bun**:

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

新しいブラウザインスタンスを作成します。

```typescript
import { AgentBrowser } from '@mastra/agent-browser'

export const browser = new AgentBrowser({
  headless: false,
})
```

Browser を Agent に割り当てます。

```typescript
import { Agent } from '@mastra/core/agent'
import { browser } from '../browsers'

export const webAgent = new Agent({
  id: 'web-agent',
  name: 'Web Agent',
  description: 'A web automation assistant that can navigate websites and complete tasks.',
  model: 'openai/gpt-5.6-sol',
  browser,
  instructions:
    'You are a web automation assistant. Use browser tools to navigate websites and complete tasks.',
})
```

Agent は Provider のすべての Browser Tool を自動的に受け取ります。

## クラウド Provider

すべての SDK Provider は、ローカルブラウザを起動する代わりに、クラウドブラウザサービスへの接続をサポートしています。

### Firecrawl Browser Sandbox（FirecrawlBrowser ネイティブ）

FirecrawlBrowser は、Firecrawl API を通じてホストされたセッションをプロビジョニングします。

```typescript
import { FirecrawlBrowser } from '@mastra/browser-firecrawl'

const browser = new FirecrawlBrowser({
  apiKey: process.env.FIRECRAWL_API_KEY,
})
```

### Browserbase（Stagehand ネイティブ）

Stagehand は Browserbase とネイティブに統合されています。

```typescript
import { StagehandBrowser } from '@mastra/stagehand'

const browser = new StagehandBrowser({
  env: 'BROWSERBASE',
  apiKey: process.env.BROWSERBASE_API_KEY,
  projectId: process.env.BROWSERBASE_PROJECT_ID,
})
```

### CDP URL（任意の Provider）

Chrome DevTools Protocol（CDP）エンドポイントを公開する任意のブラウザに接続します。

```typescript
import { AgentBrowser } from '@mastra/agent-browser'

const browser = new AgentBrowser({
  cdpUrl: process.env.BROWSER_CDP_URL,
  headless: true,
})
```

これは、任意の [CDP 互換](https://chromedevtools.github.io/devtools-protocol/)ブラウザサービスで動作します。

## スクリーンキャスト

Browser Provider は、ブラウザのライブ映像を Mastra Studio UI にストリーミングします。これにより、Agent がページを操作する様子をリアルタイムで確認できます。

スクリーンキャストには WebSocket のサポートが必要です。プロジェクトに次のパッケージをインストールします。

**npm**:

```bash
npm install ws @hono/node-ws
```

**pnpm**:

```bash
pnpm add ws @hono/node-ws
```

**Yarn**:

```bash
yarn add ws @hono/node-ws
```

**Bun**:

```bash
bun add ws @hono/node-ws
```

> **注記:** これらのパッケージは Cloudflare Workers などのサーバーレス環境と互換性がないため、デフォルトでは含まれていません。インストールされていない場合、スクリーンキャストは無効になりますが、その他のすべての Browser 機能は通常どおり動作します。

スクリーンキャストはデフォルトで有効になっており、次のように設定できます。

```typescript
const browser = new AgentBrowser({
  screencast: {
    enabled: true,
    format: 'jpeg',
    quality: 80,
    maxWidth: 1280,
    maxHeight: 720,
  },
})
```

## 次のステップ

- [AgentBrowser](https://mastra.zisheng.pro/ja/docs/browser/agent-browser)
- [Stagehand](https://mastra.zisheng.pro/ja/docs/browser/stagehand)
- [Firecrawl](https://mastra.zisheng.pro/ja/docs/browser/firecrawl)
- [ブラウザ録画（アルファ版）](https://mastra.zisheng.pro/ja/docs/browser/recording)
- [BrowserViewer](https://mastra.zisheng.pro/ja/docs/browser/browser-viewer)
- [MastraBrowser リファレンス](https://mastra.zisheng.pro/ja/reference/browser/mastra-browser)
- 📹 [Mastra Browser 機能ワークショップ](https://www.youtube.com/watch?v=E9KFsZEnQO8\&t=5s)