Aller au contenu principal

BrowserViewer

Le package @mastra/browser-viewer fournit l’automatisation du navigateur aux Tools fondés sur une CLI, tels que agent-browser, browser-use et 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.

Quand utiliser BrowserViewer
Lien direct vers 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 ou Stagehand.

Démarrage rapide
Lien direct vers 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 install @mastra/browser-viewer

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

pip install browser-use

Installez la compétence correspondante afin que l’Agent sache utiliser la CLI :

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

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

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
Lien direct vers 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
Lien direct vers 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 qui enseigne ses commandes et ses Workflows à l’Agent.

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

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

agent-browser
Lien direct vers agent-browser

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

Option CDP : --cdp

browser-use
Lien direct vers browser-use

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

Option CDP : --cdp-url

browse
Lien direct vers browse

npm install -g browse
browse skills install

Option CDP : --ws. Consultez la référence de BrowserViewer pour découvrir toutes les options de configuration, les modes de connexion avancés et le détail des méthodes.

On this page