PageBolt를 사용하여 모든 MCP 서버에 브라우저 자동화 추가하는 방법

Source: Dev.to

Claude와 함께 AI 에이전트를 만들고 있습니다. 에이전트는 웹과 상호작용해야 합니다 — 스크린샷 촬영, PDF 생성, 데모 비디오 녹화, 페이지 구조 검사 등.

• Puppeteer를 호출하는 Python 스크립트를 작성 (취약하고 유지보수 부담)
• 자체 헤드리스 브라우저 풀 관리 (인프라 오버헤드)
• PageBolt의 MCP 서버 사용 (툴 호출, 완료)

옵션 3은 5 분 걸립니다.

PageBolt는 Claude, Cursor, Windsurf에 브라우저 자동화 도구에 대한 네이티브 접근을 제공하는 오픈 MCP 서버를 제공합니다. 에이전트는 take_screenshot()를 직접 호출합니다. Python이 필요 없습니다. 서브프로세스 관리도 없습니다. 인프라도 필요 없습니다.

PageBolt MCP란 무엇인가요?

MCP(모델 컨텍스트 프로토콜)는 AI 에이전트가 외부 도구를 호출하기 위한 표준입니다. PageBolt는 MCP 사양을 구현하여 AI 에이전트가 다음을 수행할 수 있게 합니다:

• 모든 URL의 스크린샷 촬영
• HTML 또는 웹 페이지에서 PDF 생성
• 브라우저 상호작용을 내레이션이 포함된 비디오로 기록
• 페이지 구조 검사( CSS 선택자, 요소 텍스트 등)
• 다단계 브라우저 시퀀스 실행

이 모든 기능은 Claude Code, Cursor IDE, Windsurf에서 직접 함수 호출을 통해 사용할 수 있습니다. PageBolt MCP는 이러한 호출을 호스팅된 API 요청으로 변환하므로 사용자는 별도의 인프라를 구축할 필요가 없습니다.

설치 (2 분)

단계 1 – PageBolt MCP 전역 설치

npm install -g pagebolt-mcp

단계 2 – API 키 받기

가입하세요 (무료 티어: 월 100 요청) 그리고 API 키를 복사하세요.

단계 3 – Claude Desktop 구성

~/.claude/claude_desktop_config.json 파일을 편집하세요:

{
  "mcpServers": {
    "pagebolt": {
      "command": "pagebolt-mcp",
      "env": {
        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

Claude Desktop을 재시작하세요. 완료.

단계 4 – Cursor 구성 (선택 사항)

프로젝트 루트에 있는 .cursor/mcp.json (또는 전역 Cursor 설정) 파일을 편집하세요:

{
  "mcpServers": {
    "pagebolt": {
      "command": "pagebolt-mcp",
      "env": {
        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

Cursor를 재시작하세요. 이제 에이전트가 PageBolt 도구를 호출할 수 있습니다.

Source:

사용 가능한 도구

에이전트를 설치하면 다음 함수들을 호출할 수 있습니다.

take_screenshot(url, options)

任意의 URL을 스크린샷으로 캡처합니다.

Agent: "Take a screenshot of example.com on mobile"
Tool: take_screenshot("https://example.com", {
  "device": "iphone_14_pro",
  "fullPage": true
})
Result: base64 PNG image

generate_pdf(url, options)

URL 또는 HTML로부터 PDF를 생성합니다.

Agent: "Generate a PDF of the checkout page"
Tool: generate_pdf("https://mystore.com/checkout", {
  "format": "A4",
  "margin": "1in"
})
Result: base64 PDF

record_video(steps, narration)

브라우저 상호작용을 MP4 형식으로 녹화하고 내레이션을 추가합니다.

Agent: "Record a demo of adding a product to cart and checking out"
Tool: record_video([
  {"action": "navigate", "url": "https://mystore.com"},
  {"action": "click", "selector": "button.add-to-cart"},
  {"action": "click", "selector": "a.checkout"}
], {
  "narration": true,
  "audioGuide": "Adding product to cart. Proceeding to checkout."
})
Result: base64 MP4 video

inspect_page(url)

페이지 요소(버튼, 입력 필드, 링크 등)의 구조화된 맵을 CSS 선택자와 함께 제공합니다.

Agent: "Inspect the login page and find the submit button"
Tool: inspect_page("https://myapp.com/login")
Result: {
  "forms": [{
    "selector": "form.login-form",
    "inputs": [
      {"selector": "#email", "type": "text", "placeholder": "Email"},
      {"selector": "#password", "type": "password", "placeholder": "Password"}
    ],
    "buttons": [{"selector": "button[type=submit]", "text": "Sign In"}]
  }]
}

run_sequence(steps, options)

다단계 브라우저 자동화 시퀀스를 실행합니다.

Agent: "Run through the checkout flow and tell me if it succeeds"
Tool: run_sequence([
  {"action": "navigate", "url": "https://mystore.com/checkout"},
  {"action": "fill", "selector": "input[name=email]", "value": "test@example.com"},
  {"action": "click", "selector": "button[type=submit]"},
  {"action": "wait_for", "selector": ".order-confirmation", "timeout": 5000}
], {
  "captureScreenshots": true
})
Result: success/failure + screenshot evidence

Source: …

실용적인 예시

예시 1 – 스크린샷 촬영 에이전트

User: "Take a screenshot of each competitor's pricing page"
Agent: Calls take_screenshot() for each URL
Result: PNG images for comparison analysis

이제 에이전트가 Puppeteer 코드를 직접 작성하지 않고도 자동으로 스크린샷을 캡처하고 분석할 수 있습니다.

예시 2 – 데모 비디오 생성기

User: "Record a narrated demo of our checkout flow"
Agent: Calls record_video() with checkout steps + narration script
Result: MP4 demo video auto‑generated, saved to S3

5분짜리 화면 녹화를 수동으로 할 필요 없이 에이전트가 약 30초 만에 작업을 수행합니다.

예시 3 – PDF 보고서 자동화

User: "Generate a PDF report of all product pages"
Agent:
  1. Inspect each product page with inspect_page()
  2. Collect relevant data (titles, prices, images)
  3. Build an HTML template
  4. Call generate_pdf() on the template
Result: Consolidated PDF report

예시 4 – 자동 웹 테스트

User: “Test if our checkout flow works on mobile and desktop”

Agent:

1. iPhone 프리셋으로 결제 흐름 실행
2. 데스크톱 프리셋으로 결제 흐름 실행
3. 시각적 회귀 검증을 위해 스크린샷 비교

Result: 증거(스크린샷)와 함께 통과/실패 결과 제공

실제 사용 사례: 제품을 시연하는 AI 에이전트

User: "Record a demo of the new dashboard feature"

Agent:
1. Calls inspect_page() on staging dashboard
2. Gets CSS selectors for "Add Widget" button, filter controls, etc.
3. Calls record_video() with step‑by‑step interactions
   - Navigate to dashboard
   - Click "Add Widget"
   - Select "Sales Chart"
   - Configure chart options
   - Click "Save"
4. Adds narration: "Adding a sales chart widget to your dashboard..."
5. Returns MP4 file

Result: Professional demo video, auto‑generated, ready to ship

결과: 자동 생성된 전문 데모 비디오, 바로 배포 가능
수동 스크린캐스트 없음. 비디오 편집자를 기다릴 필요 없음. 약 30 초 만에 완료.

비용 비교: 수동 vs. 에이전트 기반

주당 절감된 총 시간: ≈ 10 시간

시작하기

1. 설치

   npm install -g pagebolt-mcp

2. API 키 받기 – 가입하기

3. 구성 – 키를 Claude Desktop / Cursor 설정에 추가

4. 사용 – 이제 에이전트가 브라우저 도구를 기본적으로 사용

인프라가 필요 없습니다. 설정이 필요 없습니다. 이제 AI 에이전트가 웹의 파워 유저가 되었습니다. 🚀

제한 및 주의사항

• Authentication: 필요 시 쿠키/헤더 전달
• JavaScript rendering: 전체 Chromium 사용, 네트워크가 유휴 상태가 될 때까지 대기
• Localhost: 접근 불가 (우리는 호스팅 서비스입니다)
• Rate limits: 무료 티어 = 월 100 요청; 유료 티어는 확장됩니다

다음 단계

Your agent can now:

• ✅ 웹사이트 스크린샷 캡처
• ✅ 필요에 따라 PDF 생성
• ✅ 비디오 녹화 및 내레이션
• ✅ 페이지 구조 검사
• ✅ 복잡한 브라우저 시퀀스 실행

이 도구들을 사용하여 이전에 수동 작업이나 불안정한 Python 스크립트가 필요했던 작업을 자동화하세요.

무료 시작 — 월 100회 요청, 신용카드 필요 없음. 5분 안에 MCP 서버에 브라우저 자동화를 추가하세요.