브라우저뷰어

그만큼@mastra/browser-viewer패키지는 다음과 같은 CLI 기반 Tool에 대한 브라우저 자동화를 제공합니다.Agent 브라우저, 브라우저 사용, 그리고먹다. BrowserViewer는 Playwright를 통해 Chrome을 실행하고 CDP(Chrome DevTools Protocol) URL을 노출한 뒤 실행 중인 CLI 명령에 해당 URL을 자동으로 삽입합니다.작업 공간 Tool.

BrowserViewer를 사용해야 하는 경우

Agent가 SDK가 아닌 CLI Tool을 통해 브라우저를 구동하는 경우 BrowserViewer를 사용하십시오. BrowserViewer는 다음을 처리합니다.

• CLI Tool에 연결할 Chrome 실행 및 관리
• 자동 CDP URL 삽입workspace_execute_command calls
• Studio로 라이브 스크린캐스트 스트리밍
• 스레드 범위 브라우저 격리

SDK 기반 브라우저 자동화에는 대신 AgentBrowser 또는 Stagehand를 사용하세요.

빠른 시작

@mastra/browser-viewer와 Agent에서 사용할 CLI Tool을 설치하세요. BrowserViewer는 Chrome을 관리하지만 CLI Tool 자체는 별도로 설치해야 합니다.

npm

npm install @mastra/browser-viewer

pnpm

pnpm add @mastra/browser-viewer

Yarn

yarn add @mastra/browser-viewer

Bun

bun add @mastra/browser-viewer

작업공간 환경에 CLI Tool을 설치합니다. 이 예제에서는browser-use:

pip install browser-use

Agent가 CLI 사용법을 알 수 있도록 해당 Skill을 설치하세요.

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

BrowserViewer로 작업공간을 생성하고 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',
  }),
})

Agent가 browser-use open https://example.com과 같은 CLI 명령을 실행하면 Mastra가 자동으로 Chrome을 실행하고 CDP 연결을 삽입한 다음 Studio로 스크린캐스트 스트리밍을 시작합니다.

작동 원리

1. Agent가 브라우저 CLI 명령과 함께 workspace_execute_command를 호출합니다.
2. Mastra가 CLI 명령을 감지하고 아직 실행 중이 아니라면 Playwright를 통해 Chrome을 시작합니다.
3. CLI가 관리형 브라우저에 연결되도록 CDP URL이 명령에 삽입됩니다.
4. 페이지 수준 CDP 세션의 스크린캐스트 프레임이 Studio로 스트리밍됩니다.

지원되는 CLI

BrowserViewer는 세 가지 CLI Provider를 지원합니다. 각 CLI는 Workspace 환경에 별도로 설치해야 합니다. 각 CLI에는 Agent에 명령과 Workflow를 알려주는 Skill도 필요합니다. Agent에서 사용하는 CLI에 맞게 cli 옵션을 설정하세요.

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

agent-browser

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

CDP 플래그:--cdp

browser-use

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

CDP 플래그:--cdp-url

browse

npm install -g browse
browse skills install

CDP 플래그: --ws 모든 구성 옵션, 고급 연결 모드 및 메서드 세부 정보는 BrowserViewer 레퍼런스를 참조하세요.

관련된

• 브라우저 개요
• Agent브라우저
• 무대 담당자
• 작업공간 개요
• 작업 공간 기술