Puppeteerを使用してWebページのスクリーンショットをキャプチャするMCP(モデルコンテキストプロトコル)サーバー。 このサーバーでは、AIエージェントがWebアプリケーションを視覚的に検証し、Webアプリを生成する際に進捗状況を確認することができます。

##特徴

-フルページスクリーンショット: ウェブページ全体をキャプチャするか、ビューポートだけ -要素スクリーンショット: CSSセレクターを使用して特定の要素をターゲット

• 複数のフォーマット: PNG、JPEG、WebP形式のサポート -カスタマイズ可能なオプション: ビューポートのサイズ、画質、待ち条件、遅延の設定
• Base64 エンコーディング: スクリーンショットを base64 でエンコードした画像として簡単に統合
• 認証サポート: 手動ログインとクッキーの永続性 -デフォルトブラウザの統合: システムのデフォルトブラウザを使用して、より自然体験
• セッションの持続: ブラウザセッションをマルチステップのワークフローで開くようにする

インストール

##クイックスタート(デスクトップエクステンション)

生成された[screenshot-webpage-mcp.dxtファイルをClaudeデスクトップにドラッグ&ドロップして自動インストールします!

手動インストール

ソースから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