PageBolt와 GitHub Copilot CLI 사용: MCP를 통한 자동 스크린샷 및 비디오 데모

Source: Dev.to

소개

GitHub Copilot CLI가 이제 MCP(Model Context Protocol)를 지원합니다. 이를 통해 AI 에이전트가 터미널에서 직접 스크린샷을 캡처하고 비디오를 녹화할 수 있습니다—Chromium을 설치하거나 추가 인프라를 관리할 필요가 없습니다. PageBolt은 Copilot CLI와 원활하게 통합되는 MCP 서버를 제공하여 다음을 가능하게 합니다:

• 모든 URL에 대한 스크린샷 촬영
• 데모, 테스트, 문서화를 위한 브라우저 워크플로우 녹화
• 전부 명령줄에서 작동

설정

단계 1: MCP 서버 구성 만들기

다음 내용을 포함한 파일 ~/.copilot/mcp-servers.json을 생성합니다:

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}

단계 2: API 키 얻기

**pagebolt.dev**에서 API 키를 발급받으세요.

단계 3: Copilot CLI 재시작

구성을 저장하고 API 키를 추가한 뒤, Copilot CLI를 재시작하여 새로운 MCP 서버를 로드하도록 합니다.

PageBolt과 함께 Copilot CLI 사용하기

스크린샷 찍기

copilot "Take a screenshot of https://example.com and tell me what you see"

Copilot은 다음을 수행합니다:

1. PageBolt의 스크린샷 도구 호출
2. 이미지 다운로드
3. 이미지 분석
4. 결과 보고

프로덕션 대시보드 확인하기

copilot "Check if our production dashboard is live at https://app.example.com. Take a screenshot and verify it loaded correctly."

결과: Copilot이 대시보드를 캡처하고, 정상 여부를 분석한 뒤 “Dashboard is live. All metrics visible. Status: OK.”와 같은 상태를 반환합니다.

데모 비디오 녹화하기

copilot "Record a video of our checkout flow starting at https://shop.example.com and ending at the order confirmation page. Save it to outputs/checkout-demo.mp4"

Copilot은 다음을 수행합니다:

1. 워크플로우 단계 정의
2. PageBolt의 record_video 엔드포인트 호출
3. (선택적 내레이션 포함) 전문 MP4 파일 수신
4. outputs/checkout-demo.mp4에 저장

전체 MCP 서버 구성 예시

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "pk_live_abc123xyz"]
  },
  "filesystem": {
    "command": "node",
    "args": ["~/.copilot/tools/filesystem.js"]
  }
}

Copilot CLI는 두 서버를 자동으로 탐지하고 사용합니다.

일반적인 사용 사례

1. CI/CD 검증

copilot "After deploying to production, take a screenshot of https://app.example.com and verify the new feature is visible"

2. 시각적 회귀 테스트

copilot "Compare the current homepage screenshot to the baseline. Report any visual differences."

3. 문서 자동화

copilot "Record videos of our top 5 features for the product docs. Save them to docs/videos/"

4. QA 자동화

copilot "Test the entire signup flow. Take screenshots at each step and verify the happy path works."

5. 모니터링

copilot "Every hour, screenshot our status page and alert if anything looks broken"

Pre‑MCP 에이전트 대비 장점

• 시각적 피드백: 에이전트가 이제 자신이 생성하거나 테스트하는 UI를 볼 수 있습니다.
• 자동 검증: 시각적 검사가 자동으로 수행됩니다.
• 전체 스택 데모: 인간 촬영자 없이도 비디오를 생성합니다.
• 인프라 제로: 브라우저나 헤드리스 서비스를 관리할 필요가 없습니다.

가격

• 무료 티어: 월 100 요청
• 유료 플랜: 월 $29부터 500 요청 제공 (설정 비용, 인프라 비용 없음)

호환성

PageBolt의 MCP 서버는 MCP를 지원하는 모든 도구와 함께 작동합니다, 예를 들어:

• GitHub Copilot CLI
• Claude Desktop
• Cursor
• MCP 통합을 지원하는 기타 IDE

이제 터미널이 완전한 데모 스튜디오가 됩니다—PageBolt을 설정하고 Copilot 명령을 내리면 AI가 스크린샷, 비디오 녹화, 시각적 검증을 모두 처리합니다.