MCP를 통해 Cursor와 Windsurf에 스크린샷 및 PDF 도구 추가하는 방법

Source: Dev.to

번역을 진행하려면 전체 텍스트(코드 블록 및 URL 제외)를 제공해 주시겠어요? 해당 내용을 받는 대로 요청하신 대로 한국어로 번역해 드리겠습니다.

Introduction

Cursor와 Windsurf는 MCP(Model Context Protocol) 플러그인을 지원하는 AI 코드 편집기로, AI에 새로운 도구를 제공합니다. PageBolt MCP 서버는 웹 캡처 기능을 추가합니다: 스크린샷, PDF, 비디오 녹화 및 페이지 검사. 설치가 완료되면 편집기의 AI에게 다음과 같이 요청할 수 있습니다:

• “localhost:3000을 스크린샷 찍고 레이아웃이 올바른지 알려줘.”
• “스테이징 환경의 로그인 페이지를 검사하고 E2E 테스트 작성을 위해 필요한 셀렉터를 찾아줘.”
• “내 PR 프리뷰의 전체 페이지 스크린샷을 찍어 PR 설명에 첨부해줘.”
• “이 인보이스 HTML을 PDF로 생성하고 ./output/invoice.pdf에 저장해줘.”

Setup (≈ 2 minutes)

Cursor configuration

프로젝트 루트에 .cursor/mcp.json 파일을 만들거나 편집하세요:

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

또는 전역 Cursor MCP 설정(~/.cursor/mcp.json)에 동일한 블록을 추가하여 모든 프로젝트에서 사용할 수 있습니다.

Cursor를 재시작하세요. PageBolt 도구가 도구 패널에 표시됩니다.

Windsurf configuration

Windsurf MCP 설정에 동일한 블록을 추가하세요:

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

Windsurf를 재시작하세요.

도구 사용하기

스크린샷

Screenshot http://localhost:3000 — does the hero section look right?
Take a mobile screenshot of localhost:3000/pricing — check if the table is responsive
Full‑page screenshot of localhost:3000/dashboard

AI는 스크린샷을 인라인으로 보고 구체적인 시각적 피드백을 제공할 수 있습니다.

검사

Inspect https://staging.myapp.com/login — give me the selectors for the email field, password field, and submit button. I need to write a Playwright test.
Inspect https://staging.myapp.com/checkout and give me all the interactive element selectors. I'm writing a Playwright test for the checkout flow.

검사 도구는 고유한 CSS 선택자를 가진 모든 인터랙티브 요소의 구조화된 맵을 반환하여 추측을 없애줍니다.

PDF 생성

Here's my invoice template. Generate a PDF and save it to ./test-output/invoice.pdf
Generate a PDF of https://staging.myapp.com/invoices/1 and tell me if the page breaks look right

비디오 녹화

Record a demo video of the signup flow on localhost:3000 — use a spotlight cursor, dramatic pace, save as demo.mp4

사용 가능한 PageBolt 도구

PageBolt이 돋보이는 이유

• Localhost 지원 – 공개하지 않고 개발 서버에서 실행 중인 페이지의 스크린샷을 찍을 수 있습니다.
• 신속한 시각 디버깅 – 커밋하기 전에 변경 사항을 미리 볼 수 있습니다.
• 반응형 레이아웃 검사 – 편집기에서 직접 모바일, 태블릿, 데스크톱 뷰포트를 캡처합니다.
• 테스트 픽스처 생성 – 자동화 테스트를 위한 PDF 또는 스크린샷을 생성합니다.

재사용 가능한 구성 패턴

동일한 JSON 블록은 모든 MCP‑호환 클라이언트에서 작동합니다:

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

npx -y 명령은 전역 설치가 필요하지 않도록 보장합니다; 패키지는 처음 사용할 때 다운로드되고 자동으로 캐시됩니다.

무료 체험

PageBolt는 신용카드 없이 월 100개의 무료 요청을 제공합니다.
2분 안에 시작하기 →