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

# 브라우저뷰어

그만큼`@mastra/browser-viewer`패키지는 다음과 같은 CLI 기반 Tool에 대한 브라우저 자동화를 제공합니다.[Agent 브라우저](https://www.npmjs.com/package/agent-browser), [브라우저 사용](https://pypi.org/project/browser-use/), 그리고[먹다](https://www.npmjs.com/package/browse). BrowserViewer는 Playwright를 통해 Chrome을 실행하고 CDP(Chrome DevTools Protocol) URL을 노출한 뒤 실행 중인 CLI 명령에 해당 URL을 자동으로 삽입합니다.[작업 공간 Tool](https://mastra.zisheng.pro/ko/docs/workspace/overview).

## BrowserViewer를 사용해야 하는 경우

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

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

SDK 기반 브라우저 자동화에는 대신 [AgentBrowser](https://mastra.zisheng.pro/ko/docs/browser/agent-browser) 또는 [Stagehand](https://mastra.zisheng.pro/ko/docs/browser/stagehand)를 사용하세요.

## 빠른 시작

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

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

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

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

Agent가 CLI 사용법을 알 수 있도록 해당 [Skill](https://mastra.zisheng.pro/ko/docs/workspace/skills)을 설치하세요.

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

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

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](https://mastra.zisheng.pro/ko/docs/workspace/skills)도 필요합니다. Agent에서 사용하는 CLI에 맞게 `cli` 옵션을 설정하세요.

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

CDP 플래그:`--cdp`

### `browser-use`

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

CDP 플래그:`--cdp-url`

### `browse`

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

CDP 플래그: `--ws` 모든 구성 옵션, 고급 연결 모드 및 메서드 세부 정보는 [BrowserViewer 레퍼런스](https://mastra.zisheng.pro/ko/reference/browser/browser-viewer)를 참조하세요.

## 관련된

- [브라우저 개요](https://mastra.zisheng.pro/ko/docs/browser/overview)
- [Agent브라우저](https://mastra.zisheng.pro/ko/docs/browser/agent-browser)
- [무대 담당자](https://mastra.zisheng.pro/ko/docs/browser/stagehand)
- [작업공간 개요](https://mastra.zisheng.pro/ko/docs/workspace/overview)
- [작업 공간 기술](https://mastra.zisheng.pro/ko/docs/workspace/skills)