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

# BrowserViewer

Le package `@mastra/browser-viewer` fournit l’automatisation du navigateur aux Tools fondés sur une CLI, tels que [agent-browser](https://www.npmjs.com/package/agent-browser), [browser-use](https://pypi.org/project/browser-use/) et [browse](https://www.npmjs.com/package/browse). BrowserViewer lance Chrome via Playwright, expose une URL Chrome DevTools Protocol (CDP) et l’injecte automatiquement dans les commandes CLI exécutées par les [Tools du Workspace](https://mastra.zisheng.pro/fr/docs/workspace/overview).

## Quand utiliser BrowserViewer

Utilisez BrowserViewer lorsque votre Agent pilote un navigateur au moyen d’un Tool CLI plutôt que d’un SDK. BrowserViewer prend en charge :

- Le lancement et la gestion de Chrome pour la connexion des Tools CLI
- L’injection automatique de l’URL CDP dans les appels à `workspace_execute_command`
- La diffusion en direct de l’écran dans Studio
- L’isolation du navigateur limitée au thread

Pour automatiser le navigateur au moyen d’un SDK, utilisez plutôt [AgentBrowser](https://mastra.zisheng.pro/fr/docs/browser/agent-browser) ou [Stagehand](https://mastra.zisheng.pro/fr/docs/browser/stagehand).

## Démarrage rapide

Installez `@mastra/browser-viewer` et le Tool CLI qu’utilisera votre Agent. BrowserViewer gère Chrome, mais le Tool CLI doit être installé séparément.

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

Installez le Tool CLI dans l’environnement de votre Workspace. Cet exemple utilise `browser-use` :

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

Installez la [compétence](https://mastra.zisheng.pro/fr/docs/workspace/skills) correspondante afin que l’Agent sache utiliser la CLI :

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

Créez un Workspace avec BrowserViewer et attribuez-le à un 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',
  }),
})
```

Lorsque l’Agent exécute une commande CLI telle que `browser-use open https://example.com`, Mastra lance automatiquement Chrome, injecte la connexion CDP et commence à diffuser l’écran dans Studio.

## Fonctionnement

1. L’Agent appelle `workspace_execute_command` avec une commande CLI de navigateur.
2. Mastra détecte la commande CLI et lance Chrome via Playwright (s’il n’est pas déjà en cours d’exécution).
3. L’URL CDP est injectée dans la commande afin que la CLI se connecte au navigateur géré.
4. Les images de la diffusion d’écran sont envoyées à Studio depuis les sessions CDP de chaque page.

## CLI prises en charge

BrowserViewer prend en charge trois Providers de CLI. Chaque CLI doit être installée séparément dans l’environnement de votre Workspace. Chacune publie également une [compétence](https://mastra.zisheng.pro/fr/docs/workspace/skills) qui enseigne ses commandes et ses Workflows à l’Agent.

Définissez l’option `cli` en fonction de la CLI utilisée par votre Agent :

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

Option CDP : `--cdp`

### `browser-use`

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

Option CDP : `--cdp-url`

### `browse`

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

Option CDP : `--ws`. Consultez la [référence de BrowserViewer](https://mastra.zisheng.pro/fr/reference/browser/browser-viewer) pour découvrir toutes les options de configuration, les modes de connexion avancés et le détail des méthodes.

## Pages connexes

- [Présentation du navigateur](https://mastra.zisheng.pro/fr/docs/browser/overview)
- [AgentBrowser](https://mastra.zisheng.pro/fr/docs/browser/agent-browser)
- [Stagehand](https://mastra.zisheng.pro/fr/docs/browser/stagehand)
- [Présentation de Workspace](https://mastra.zisheng.pro/fr/docs/workspace/overview)
- [Compétences du Workspace](https://mastra.zisheng.pro/fr/docs/workspace/skills)