KakaFlow KB

Browser Overview

5 phút đọc

Browser Overview

Trust: ★★★☆☆ (0.90) · 0 validations · developer_reference

Published: 2026-05-10 · Source: crawler_authoritative

Tình huống

Mastra documentation covering browser automation capabilities for agents, targeting developers who need to enable web navigation, form filling, and data extraction.

Insight

Mastra provides browser support through three providers: AgentBrowser (Playwright-based, accessibility-first element targeting), Stagehand (Browserbase-based, AI-powered element detection), and BrowserViewer (CLI provider for Chrome CDP injection into shell tools). When a browser is assigned to an agent, Mastra automatically includes the provider’s tools in the agent’s toolset for controlling browser actions like URL navigation, element selection, text input, and page content reading. Both SDK providers support cloud browser services via Browserbase integration (Stagehand native) or any CDP-compatible endpoint. Screencast functionality streams live browser video to Mastra Studio UI via WebSocket, configurable with format (jpeg), quality (80), and resolution limits (maxWidth/maxHeight). The screencast packages (ws, @hono/node-ws) are not included by default due to serverless incompatibility (Cloudflare Workers) but can be installed separately.

Hành động

Install the desired provider package using npm install @mastra/agent-browser, pnpm add @mastra/agent-browser, yarn add @mastra/agent-browser, or bun add @mastra/agent-browser. Create a browser instance with new AgentBrowser({ headless: false }). For cloud support, configure with env: ‘BROWSERBASE’ and Browserbase API credentials, or set cdpUrl for any CDP-compatible service. Assign the browser to an agent via the browser property in Agent configuration. For screencast, install ws and @hono/node-ws packages, then configure via screencast: { enabled: true, format: ‘jpeg’, quality: 80, maxWidth: 1280, maxHeight: 720 }. The Agent constructor accepts browser property and receives all browser tools from the provider automatically.

Kết quả

Agents with assigned browsers receive the provider’s complete toolset for browser automation, enabling web navigation, element interaction, form submission, and data extraction. Screencast shows live browser activity in Mastra Studio UI when WebSocket packages are installed.

Điều kiện áp dụng

Screencast packages (ws, @hono/node-ws) are incompatible with serverless environments like Cloudflare Workers. Screencast is disabled without these packages but all other browser functionality continues normally.

Nội dung gốc (Original)

Browser overview

Browser support enables agents to navigate websites, interact with page elements, fill forms, and extract data. Mastra provides browser capabilities through SDK providers that wrap browser automation libraries and a CLI provider for agents that drive browsers through command-line tools.

Mastra supports two SDK providers and one CLI provider:

  • AgentBrowser: A Playwright-based provider with accessibility-first element targeting. Best for general web automation and scraping.
  • Stagehand: A Browserbase provider with AI-powered element detection. Best for complex interactions that benefit from natural language selectors.
  • BrowserViewer: A CLI provider that launches Chrome and injects CDP URLs into CLI tools like agent-browser, browser-use, and browse. Best for workspace agents that drive browsers through shell commands.

When to use browser

Use browser when your agent needs to:

  • Navigate websites and interact with page elements
  • Fill out forms and submit data
  • Extract structured data from web pages
  • Automate multi-step web workflows
  • Take actions that require a real browser (JavaScript rendering, authentication flows)

How it works

When you assign a browser to an agent, Mastra includes the provider’s tools in the agent’s toolset. The agent uses these tools to control the browser: navigating to URLs, selecting elements, typing text, and reading page content.

Each provider offers a different set of tools optimized for its approach.

Quickstart

Install your provider of choice, for this example you’ll use the AgentBrowser provider.

npm:

npm install @mastra/agent-browser

pnpm:

pnpm add @mastra/agent-browser

Yarn:

yarn add @mastra/agent-browser

Bun:

bun add @mastra/agent-browser

Create a new browser instance:

import { AgentBrowser } from '@mastra/agent-browser'
 
export const browser = new AgentBrowser({
  headless: false,
})

Assign the browser to an agent:

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.4',
  browser,
  instructions:
    'You are a web automation assistant. Use browser tools to navigate websites and complete tasks.',
})

The agent automatically receives all browser tools from the provider.

Cloud providers

Both SDK providers support connecting to cloud browser services instead of launching a local browser.

Browserbase (Stagehand native)

Stagehand has native Browserbase integration:

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 (any provider)

Connect to any browser exposing a Chrome DevTools Protocol (CDP) endpoint:

import { AgentBrowser } from '@mastra/agent-browser'
 
const browser = new AgentBrowser({
  cdpUrl: process.env.BROWSER_CDP_URL,
  headless: true,
})

This works with any CDP-compatible browser service.

Screencast

Browser providers stream a live video feed of the browser to the Mastra Studio UI. This lets you watch the agent interact with pages in real-time.

Screencast requires WebSocket support. Install these packages in your project:

npm:

npm install ws @hono/node-ws

pnpm:

pnpm add ws @hono/node-ws

Yarn:

yarn add ws @hono/node-ws

Bun:

bun add ws @hono/node-ws

Note: These packages are not included by default because they are incompatible with serverless environments like Cloudflare Workers. If they are not installed, screencast is disabled but all other browser functionality works normally.

Screencast is enabled by default and can be configured:

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

Next steps

Liên kết

Xem thêm:

Sơ đồ

Liên kết ngược