Aller au contenu principal

AgentBrowser

Le package @mastra/agent-browser fournit une automatisation de navigateur avec Playwright et un ciblage d’éléments privilégiant l’accessibilité. Les éléments sont identifiés par des refs issues de l’arbre d’accessibilité de la page, ce qui rend les interactions fiables malgré les différences de mise en page.

Quand utiliser AgentBrowser
Lien direct vers Quand utiliser AgentBrowser

Utilisez AgentBrowser lorsque vous avez besoin :

  • D’un ciblage fiable des éléments grâce aux refs d’accessibilité
  • D’un contrôle précis des actions du navigateur
  • Des capacités d’automatisation fiables de Playwright
  • De la prise en charge des raccourcis clavier et des interactions complexes

Démarrage rapide
Lien direct vers Démarrage rapide

Installez le package :

npm install @mastra/agent-browser

Créez une instance de navigateur et attribuez-la à un agent :

src/mastra/agents/browser-agent.ts
import { Agent } from '@mastra/core/agent'
import { AgentBrowser } from '@mastra/agent-browser'

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

export const browserAgent = new Agent({
  id: 'browser-agent',
  name: 'Browser Agent',
  model: 'openai/gpt-5.6-sol',
  browser,
  instructions: `You are a web automation assistant.

When interacting with pages:
1. Use browser_snapshot to get the current page state and element refs
2. Use the refs (like @e1, @e2) to target elements for clicks and typing
3. After actions, take another snapshot to verify the result`,
})
remarque

Pour les lancements locaux, qui sont le comportement par défaut, AgentBrowser requiert un binaire Chromium installé par Playwright. Celui-ci est normalement téléchargé automatiquement lorsque vous installez @mastra/agent-browser. Si le lancement du navigateur échoue avec "browser executable is missing", exécutez npx playwright install chromium. Si vous vous connectez à un navigateur distant avec l’option cdpUrl, le navigateur distant fournit Chromium.

Captures d’écran
Lien direct vers Captures d’écran

Lorsque l’agent utilise le tool browser_screenshot, il capture une image PNG de la page actuelle et la renvoie sous forme de contenu image que les modèles capables de vision peuvent interpréter directement.

Utilisez les captures d’écran lorsque vous devez inspecter visuellement la page, par exemple pour évaluer les images, la mise en page ou les couleurs. Pour le texte ou les données structurées, utilisez plutôt browser_snapshot.

Pour désactiver le tool de capture d’écran pour les modèles qui ne prennent pas en charge la vision, utilisez excludeTools :

const browser = new AgentBrowser({
  headless: false,
  excludeTools: ['browser_screenshot'],
})

Refs d’éléments
Lien direct vers Refs d’éléments

AgentBrowser utilise les refs de l’arbre d’accessibilité pour identifier les éléments. Lorsqu’un agent appelle browser_snapshot, il reçoit une représentation textuelle de la page avec des refs telles que @e1, @e2, etc. L’agent utilise ensuite ces refs avec d’autres tools pour interagir avec les éléments.

Recording
Lien direct vers Recording

AgentBrowser peut activer des tools alpha d’enregistrement du navigateur :

const browser = new AgentBrowser({
  headless: false,
  recording: {
    outputDir: './browser-recordings',
  },
})

Cela ajoute browser_record et browser_record_caption à l’ensemble de tools de l’agent. Consultez Enregistrement du navigateur (alpha) pour plus de détails, ainsi que la référence AgentBrowser pour toutes les options de configuration et les détails des tools.

On this page