MCP (Model Context Protocol) 서버는 Puppeteer를 사용하여 웹 페이지의 스크린 샷을 캡처합니다. 이 서버는 AI 에이전트가 웹 응용 프로그램을 시각화하고 웹 앱을 생성 할 때 진행 상황을 볼 수 있습니다.

특징

• **풀 페이지 스크린 샷 **: 전체 웹 페이지 또는 viewport 캡처
• **Element 스크린 샷 ** : CSS selectors를 이용한 특정 요소
• **Multiple 형식 **: PNG, JPEG 및 WebP 형식 지원
• Customizable 옵션: viewport 크기, 이미지 품질, 대기 조건 및 지연 설정
• Base64 인코딩: 쉬운 통합을위한 base64 인코딩 된 이미지로 스크린 샷을 반환
• ** 인증 지원**: 수동 로그인 및 쿠키 지속
• 기본 브라우저 통합: 시스템의 기본 브라우저를 사용하여 더 자연스러운 경험
• Session persistence: 멀티스텝 워크플로우를 위한 브라우저 세션을 유지

설치

빠른 시작 (Claude 데스크탑 확장)

생성 된 드래그 및 드롭 screenshot-webpage-mcp.dxt] 자동 설치 용 Claude Desktop에 파일!

수동 설치

소스에서 MCP를 설치하고 구축하려면:

MCP 서버는 TypeScript를 사용하고 JavaScript로 컴파일됩니다.

Webpage Screenshot MCP Server

An MCP (Model Context Protocol) server that captures screenshots of web pages using Puppeteer. This server allows AI agents to visually verify web applications and see their progress when generating web apps.

Features

• Full page screenshots: Capture entire web pages or just the viewport
• Element screenshots: Target specific elements using CSS selectors
• Multiple formats: Support for PNG, JPEG, and WebP formats
• Customizable options: Set viewport size, image quality, wait conditions, and delays
• Base64 encoding: Returns screenshots as base64 encoded images for easy integration
• Authentication support: Manual login and cookie persistence
• Default browser integration: Use your system’s default browser for a more natural experience
• Session persistence: Keep browser sessions open for multi-step workflows

Installation

Quick Start (Claude Desktop Extension)

Drag and drop the generated screenshot-webpage-mcp.dxt file into Claude Desktop for automatic installation!

Manual Installation

To install and build the MCP from source:

# Clone the repository (if you haven't already)
git clone https://github.com/ananddtyagi/webpage-screenshot-mcp.git
cd webpage-screenshot-mcp

# Install dependencies
npm install

# Build the project
npm run build

The MCP server is built using TypeScript and compiled to JavaScript. The dist folder contains the compiled JavaScript files.

Adding to Claude or Cursor

To add this MCP to Claude Desktop or Cursor:

1. Claude Desktop:

   • Go to Settings > Developer
   • Click “Edit Config”
   • Add the following:

    "webpage-screenshot": {
      "command": "node",
      "args": [
        "~/path/to/webpage-screenshot-mcp/dist/index.js"
      ]
    }
   

   • Save and reload Claude

2. Cursor:

   • Open Cursor and go to Cursor Settings > MCP
   • Click “Add new global MCP server”
   • Add the following:

  "webpage-screenshot": {
    "command": "node",
    "args": ["~/path/to/webpage-screenshot-mcp/dist/index.js"]
  }

• Save and reload Cursor

Usage

Tools

This MCP server provides several tools:

1. login-and-wait

Opens a webpage in a visible browser window for manual login, waits for user to complete login, then saves cookies.

{
  "url": "https://example.com/login",
  "waitMinutes": 5,
  "successIndicator": ".dashboard-welcome",
  "useDefaultBrowser": true
}

• url (required): The URL of the login page
• waitMinutes (optional): Maximum minutes to wait for login (default: 5)
• successIndicator (optional): CSS selector or URL pattern that indicates successful login
• useDefaultBrowser (optional): Whether to use the system’s default browser (default: true)

2. screenshot-page