MCP-сервер Model Context Protocol для захвата скриншотов веб-сайта с функциями полной страницы, элемента и размера устройства.

Особенности

** Полностраничный снимок экрана** с автоматической прокруткой ** Скриншоты для конкретных элементов** с использованием CSS-селекторов Множественные предустановки устройств (мобильные, планшетные, настольные) Конфигурации пользовательского вида Передовые условия ожидания (селекторы CSS, сетевое бездействие, пользовательские задержки) ** Обработка и проверка ошибок** для безопасной работы ** Ограничение ставок** для предотвращения истощения ресурсов

##Установка

1.Клонировать или загружать проект 2. Перейдите в каталог: cd /path/to/ScreenshotMCP 3. переименовать [[Т1]] в [[Т2]] 2. Установить зависимости: npm install 4. Стартовый сервер: npm start

Использование кода Клода

Вы можете использовать Screenshot MCP непосредственно в Claude Code CLI или Claude Desktop для захвата скриншотов в рамках рабочего процесса разработки.

**Для Claude Code CLI: ** Добавьте к своему [5]:

или

[[Т6]]

Для Claude Desktop: ** Добавьте к [7]:

Использование с курсором

Screenshot MCP

A Model Context Protocol MCP server for capturing website screenshots with full page, element, and device size features.

Features

• Full-page screenshot capture with automatic scrolling
• Element-specific screenshots using CSS selectors
• Multiple device presets (mobile, tablet, desktop)
• Custom viewport configurations
• Advanced wait conditions (CSS selectors, network idle, custom delays)
• Error handling and validation for secure operation
• Rate limiting to prevent resource exhaustion

Installation

1. Clone or download this project
2. Move to the directory: cd /path/to/ScreenshotMCP
3. rename .env.example to .env
4. Install dependencies: npm install
5. Start Server: npm start

Using with Claude Code

You can use Screenshot MCP directly within the Claude Code CLI or Claude Desktop to capture screenshots as part of your development workflow.

For Claude Code CLI: Add to your ~/.config/claude/mcp_servers.json:

{
  "screenshot-full-page-mcp": {
    "command": "node",
    "args": ["/path/to/screenshot-full-page-mcp/index.js"]
  }
}

or

claude mcp add screenshot-full-page-mcp node ./index.js

For Claude Desktop: Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "screenshot-full-page-mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

Using with Cursor

You can use Screenshot MCP directly within the Cursor IDE to capture screenshots as part of your development workflow.

1. Open Cursor.

2. Go to Settings > MCP Servers.

3. Add a new MCP server entry for Screenshot MCP:

   {
     "mcpServers": {
       "screenshot-full-page-mcp": {
         "command": "node",
         "args": ["/path/to/screenshot-full-page-mcp/index.js"]
       }
     }
   }
   

4. Save your settings.

Usage

Once configured, you can use natural language commands with Claude Code:

Basic Screenshot

"Take a screenshot of https://example.com"

Mobile Screenshot

"Capture a mobile screenshot of https://myapp.com"

Custom Viewport

"Screenshot https://myapp.com at 1024x768 resolution"

Wait for Element

"Take a screenshot of https://example.com after the loading spinner disappears"

Element Screenshot

"Capture just the navigation bar from https://example.com"

Available Tools

capture_screenshot

Captures a full-page screenshot with advanced configuration options.

Parameters:

• url (required): The webpage URL to screenshot
• viewport: Viewport configuration
  • preset: Device preset (mobile, tablet, desktop)
  • width: Custom width in pixels (100-5000)
  • height: Custom height in pixels (100-5000)