Claude Desktop에서 PageBolt MCP 서버를 사용하는 방법

Source: Dev.to

위에 제공된 텍스트만 포함되어 있습니다. 번역을 원하는 전체 내용(본문, 코드 블록 제외)을 알려주시면 한국어로 번역해 드리겠습니다.

개요

Claude Desktop은 웹을 탐색하고 코드를 작성하며 파일을 분석할 수 있지만, 기본적으로 스크린샷을 캡처하거나 PDF를 생성하거나 브라우저 비디오를 녹화할 수 없습니다. PageBolt MCP server를 추가하면 Claude에게 이러한 기능이 제공됩니다.

빠른 설정 (≈2 분)

1. 가입하세요 . 무료 티어는 월 100 요청을 포함하며 신용카드가 필요 없습니다.

2. ~/.claude/claude_desktop_config.json을 편집(또는 생성)하여 Claude Desktop을 구성합니다:

   {
     "mcpServers": {
       "pagebolt": {
         "command": "npx",
         "args": ["-y", "pagebolt-mcp"],
         "env": {
           "PAGEBOLT_API_KEY": "pf_live_your_key_here"
         }
       }
     }
   }

3. Claude Desktop을 종료하고 다시 실행합니다. PageBolt 도구가 도구 패널에 표시됩니다. 별도의 npm install이 필요하지 않으며 npx -y pagebolt-mcp가 서버를 자동으로 다운로드하고 실행합니다.

PageBolt 도구 사용하기

스크린샷

Screenshot https://example.com in dark mode at full page width
Take a screenshot of my staging site on an iPhone 14 Pro
Capture this HTML and show me what it looks

Hello World

The screenshot appears inline in the chat.

PDF Generation

Generate a PDF of https://news.ycombinator.com and save it to ~/Desktop/hn.pdf
Create a PDF from this invoice HTML in Letter format
PDF this URL: https://yourapp.com/invoices/123

PDF 파일은 지정된 경로에 저장됩니다.

DOM Inspection

Inspect https://example.com/login — what's the CSS selector for the email field and submit button?

Claude는 CSS 선택자를 포함한 모든 인터랙티브 요소의 구조화된 맵을 반환하며, 자동화에 유용합니다.

Multi‑step Automation (run_sequence)

Go to https://yourapp.com, click the 'Sign up' button, fill in the email field with test@example.com, click submit, and screenshot the result
Record a demo video of the login flow at https://yourapp.com — use a spotlight cursor and save as demo.mp4
Make a narrated walkthrough of the onboarding flow. Voice: nova. Pace: dramatic.

OG Image Creation

Create an OG image for a blog post titled 'How to build a SaaS in a weekend' — dark gradient, white text, save to og-image.png

OG 이미지는 채팅에 인라인으로 표시됩니다.

예시 상호작용

가격표 확인

You: Screenshot https://staging.yourapp.com/pricing — does the pricing table look right on mobile?
Claude: [mobile screenshot] The table overflows on mobile; the third column is cut off.

HTML 네비게이션 테스트

You: Here's my HTML. Screenshot it on mobile and tell me if the nav collapses correctly.
Claude: [screenshot] The hamburger menu appears but the dropdown is hidden behind the hero section (z-index issue).

결제 흐름

You: Go to https://yourapp.com/checkout, add the first product to cart, proceed to checkout, and screenshot each step.
Claude: [screenshots] The checkout form is missing the CVV field label on step 3.

배치 스크린샷

You: Screenshot every page in this list and save them to ./docs/screenshots/:
https://yourapp.com/dashboard
https://yourapp.com/settings
https://yourapp.com/billing
Claude: Screenshots saved:
- dashboard.png (1280×900)
- settings.png (1280×1240)
- billing.png (1280×680)

Cursor 설정

같은 ~/.cursor/mcp.json 패턴이 Cursor에서도 작동합니다:

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "pf_live_your_key_here"
      }
    }
  }
}

Cursor에서는 AI에게 실행 중인 개발 서버의 스크린샷을 찍어 달라고 요청하거나, 자동화 셀렉터를 위해 DOM을 검사하거나, 편집 중인 페이지의 PDF를 생성하도록 할 수 있습니다—편집기를 떠나지 않고.

사용 가능한 PageBolt 도구

스크린샷 및 OG 이미지는 채팅에 인라인으로 표시됩니다. PDF와 비디오는 지정한 경로에 저장됩니다.

시작하기

무료로 사용해 보세요—월 100회 요청, 신용카드 필요 없음. → 2분 안에 시작하기