PageBolt의 MCP 서버를 Claude Desktop, Cursor, 그리고 Windsurf에서 사용하는 방법
Source: Dev.to
소개
AI 에이전트는 웹 접근이 필요하지만, 로컬에서 Chromium을 실행하는 것은 비용이 많이 듭니다: 배포 크기, 콜드 스타트, 메모리 급증 등. 대부분의 에이전트는 이를 처리하지 못합니다.
Model Context Protocol (MCP) 은 AI 어시스턴트가 외부 도구를 네이티브하게 호출하도록 하여, 별도 설치 없이 해결합니다. PageBolt의 MCP 서버는 AI 에이전트에 두 가지 초능력을 제공합니다:
screenshot— 任意의 URL에 대한 스크린샷을 찍음record_video— AI 내레이션이 포함된 브라우저 워크플로를 MP4로 기록
로컬 Chromium 인스턴스나 추가 인프라 없이—단 한 번의 API 호출만으로 가능합니다.
Claude Desktop에 PageBolt MCP 설치하기
Claude Desktop은 설정 파일을 통해 MCP 서버를 자동으로 발견합니다.
단계 1: 설정 파일 만들기
{
"pagebolt": {
"command": "npx",
"args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
}
}~/.claude/mcp-servers.json 파일로 저장합니다.
단계 2: API 키 얻기
방문하여 API 키를 복사합니다.
단계 3: Claude Desktop 재시작
재시작 후 Claude Desktop은 PageBolt의 스크린샷 및 비디오 도구를 네이티브하게 호출할 수 있습니다.
Claude Desktop에서 PageBolt 사용하기
Claude Desktop을 열고 예를 들어 다음과 같이 물어봅니다:
“https://example.com 의 스크린샷을 찍고 페이지에 뭐가 있는지 알려줘”
Claude는 자동으로:
- PageBolt의
screenshot도구 호출 - 이미지 다운로드
- 이미지 분석
- 결과를 사용자에게 보고
추가 프롬프트가 필요 없습니다.
예시: AI 에이전트 워크플로
User: "우리 랜딩 페이지가 살아있는지 확인해줘"
Agent (thinks): 랜딩 페이지 URL을 스크린샷해야겠다
Agent: PageBolt screenshot 도구 호출 → 이미지 획득
Agent: 이미지 분석 → "404 Not Found" 확인
Agent: 보고: "랜딩 페이지가 404를 반환하고 있습니다. 배포가 실패했을 수 있습니다."Cursor에 PageBolt MCP 설치하기
Cursor도 동일한 MCP 프로토콜과 설정 파일을 사용합니다.
단계 1: 설정 파일 만들기
{
"pagebolt": {
"command": "npx",
"args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
}
}~/.cursor/mcp-servers.json 파일로 저장합니다.
단계 2: Cursor 재시작
이제 Cursor의 AI 에이전트는 스크린샷 및 비디오 녹화에 네이티브하게 접근할 수 있습니다.
실제 예시: Cursor 에이전트 테스트
Developer: "에이전트를 사용해 결제 흐름을 테스트해줘"
Agent:
1. 홈페이지 스크린샷
2. "Add to Cart" 버튼 확인
3. 버튼 클릭 (PageBolt record_video 통해)
4. 전체 결제 흐름을 비디오로 기록
5. MP4를 outputs/에 저장
Developer는 결제가 정상 작동한다는 비디오 증거를 받습니다.Windsurf에 PageBolt MCP 설치하기
Windsurf는 Cursor 포크이며 동일한 설정을 사용합니다.
단계 1: 설정 파일 만들기
{
"pagebolt": {
"command": "npx",
"args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
}
}~/.windsurf/mcp-servers.json (또는 Cursor 설정 재사용) 파일로 저장합니다.
단계 2: Windsurf 재시작
Windsurf의 AI 에이전트가 이제 스크린샷 및 비디오 도구를 네이티브하게 사용할 수 있습니다.
왜 중요한가
MCP 이전에 AI 에이전트는 다음과 같은 제한이 있었습니다:
- 코드를 분석할 수는 있지만 UI를 볼 수 없음
- 테스트를 작성할 수는 있지만 시각적으로 검증할 수 없음
- 코드를 배포할 수는 있지만 배포 성공 여부를 확인할 수 없음
PageBolt MCP를 사용하면 에이전트는:
- 任意의 URL을 즉시 스크린샷
- 워크플로를 비디오로 기록
- IDE를 떠나지 않고 자체 작업을 검증하고 디버깅
가격 정책
- 무료 티어: 월 100 요청
- 유료 티어: 월 $29부터, 500 요청 제공 (설정 비용, 인프라 비용 없음)
다음 단계
- IDE(Claude Desktop, Cursor, Windsurf)에서 PageBolt MCP를 설치합니다.
- 에이전트에게 URL 스크린샷을 요청합니다.
- 워크플로 비디오 녹화를 요청합니다.
- 결과를 확인합니다—추가 인프라가 필요 없습니다.
PageBolt는 웹 자동화를 위한 MCP 서버입니다. Claude Desktop, Cursor, Windsurf 또는 MCP를 지원하는 모든 IDE에서 사용하세요.