Сервер MCP (Model Context Protocol), который захватывает скриншоты веб-страниц с помощью Puppeteer. Этот сервер позволяет агентам ИИ визуально проверять веб-приложения и видеть их прогресс при создании веб-приложений.

Особенности

** Полные скриншоты страниц**: Захват целых веб-страниц или просто просмотра ** Скриншоты элементов**: Целевые элементы с использованием CSS-селекторов ** Несколько форматов**: Поддержка форматов PNG, JPEG и WebP ** Настраиваемые варианты**: Установите размер порта просмотра, качество изображения, условия ожидания и задержки

• ** База 64 кодирования**: Возвращает скриншоты в виде закодированных изображений base64 для простой интеграции ** Поддержка аутентификации**: Логин вручную и стойкость cookie Интеграция браузера по умолчанию Используйте браузер по умолчанию вашей системы для более естественного опыта
• ** Сессионная настойчивость**: Держите сессии браузера открытыми для многоэтапных рабочих процессов

##Установка

Быстрый старт (расширение рабочего стола)

Перетащите сгенерированный файл в 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