@just-every/mcp-screenshot-website-fast

Быстрое и эффективное создание скриншотов веб-страниц — оптимизировано для инструментов разработки CLI. Автоматически разбивает полные страницы на фрагменты 1072x1072 для оптимальной обработки.

Обзор

Этот инструмент, созданный специально для рабочих процессов компьютерного зрения ИИ, делает высококачественные скриншоты с автоматическим ограничением разрешения и разбивкой на фрагменты для оптимальной обработки Claude Vision API и другими моделями ИИ. Он гарантирует, что скриншоты имеют идеальный размер 1072x1072 пикселя (1,15 мегапикселя) для максимальной совместимости.

Related MCP server: ScreenshotOne MCP Server

Возможности

• 📸 Быстрое создание скриншотов с использованием безголового браузера Puppeteer

• 🎯 Оптимизировано для Claude Vision с автоматическим ограничением разрешения (1072x1072 для оптимальных 1,15 мегапикселей)

• 🔲 Автоматическая разбивка на фрагменты — полные страницы автоматически делятся на фрагменты 1072x1072

• 🎬 Захват скринкастов — запись серии скриншотов с течением времени с настраиваемыми интервалами

• 🔄 Всегда свежий контент — отсутствие кэширования гарантирует получение актуальных скриншотов

• 📱 Настраиваемые области просмотра для адаптивного тестирования

• ⏱️ Стратегии ожидания для динамического контента (networkidle, пользовательские задержки)

• 📄 Захват всей страницы по умолчанию для получения полных скриншотов страницы

• 🎥 Экспорт в анимированный WebP — сохранение скринкастов в виде высококачественных анимированных файлов WebP

• 💉 Внедрение JavaScript — выполнение пользовательского JS перед захватом скринкаста

• 📦 Минимальные зависимости для быстрой установки через npm

• 🔌 Интеграция с MCP для бесшовных рабочих процессов ИИ

• 🪟 Запуск, совместимый с Windows, для использования MCP, установленного через npm

• 🔋 Эффективное использование ресурсов — автоматическая очистка браузера после 60 секунд бездействия

• 🧹 Управление памятью — страницы закрываются после каждого скриншота для предотвращения утечек

Установка

Claude Code

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

Cursor

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

JetBrains IDEs

Настройки → Инструменты → AI Assistant → Model Context Protocol (MCP) → Добавить

Выберите "As JSON" и вставьте:

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

Raw JSON (работает в любом клиенте MCP)

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

Добавьте это в файл mcp.json вашего клиента (например, .vscode/mcp.json, ~/.cursor/mcp.json или .mcp.json для Claude).

Предварительные требования

• Node.js 20.x или выше

• npm или npx

• Chrome/Chromium (автоматически загружается Puppeteer)

Быстрый старт

Использование MCP-сервера

После установки в вашей IDE будут доступны следующие инструменты:

Доступные инструменты

• take_screenshot — создает высококачественный скриншот веб-страницы

  • Параметры:

    • url (обязательно): URL HTTP/HTTPS для захвата

    • width (опционально): ширина области просмотра в пикселях (макс. 1072, по умолчанию: 1072)

    • height (опционально): высота области просмотра в пикселях (макс. 1072, по умолчанию: 1072)

    • fullPage (опционально): захват скриншота всей страницы с разбивкой на фрагменты (по умолчанию: true)

    • waitUntil (опционально): ждать события: load, domcontentloaded, networkidle0, networkidle2 (по умолчанию: domcontentloaded)

    • waitFor (опционально): дополнительное время ожидания в миллисекундах

    • directory (опционально): директория для сохранения скриншотов — возвращает пути к файлам вместо изображений в формате base64

• capture_selector — создает скриншот конкретного DOM-элемента, найденного по CSS-селектору

  • Параметры:

    • url (обязательно): URL HTTP/HTTPS для захвата

    • selector (обязательно): CSS-селектор элемента для захвата

    • width (опционально): ширина области просмотра в пикселях (макс. 1072, по умолчанию: 1072)

    • height (опционально): высота области просмотра в пикселях (макс. 1072, по умолчанию: 1072)

    • waitUntil (опционально): ждать события: load, domcontentloaded, networkidle0, networkidle2 (по умолчанию: domcontentloaded)

    • waitForMS (опционально): дополнительное время ожидания в миллисекундах

    • selectorTimeoutMS (опционально): сколько ждать появления селектора перед ошибкой (по умолчанию: 5000)

Примеры использования

Использование по умолчанию (возвращает изображения в base64):

take_screenshot(url="https://example.com")

Сохранение в директорию (возвращает пути к файлам):

take_screenshot(url="https://example.com", directory="/path/to/screenshots")

Захват конкретного элемента:

capture_selector(url="https://example.com", selector="#main")

При использовании параметра directory:

• Скриншоты сохраняются как PNG-файлы с метками времени

• Вместо данных base64 возвращаются пути к файлам

• Для скриншотов с разбивкой на фрагменты каждый фрагмент сохраняется как отдельный файл

• Директория создается автоматически, если она не существует

take_screencast

Создает серию скриншотов с течением времени для создания скринкаста. Захватывает только верхний фрагмент (1072x1072) области просмотра.

Параметры

• url (обязательно): URL для захвата

• duration (опционально): общая длительность в секундах (по умолчанию: 10)

• interval (опционально): интервал между скриншотами в секундах (по умолчанию: 2)

• jsEvaluate (опционально): JavaScript-код для выполнения в начале

• waitUntil (опционально): стратегия ожидания: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'

• waitForMS (опционально): дополнительное время ожидания перед началом

• directory (опционально): сохранить как анимированный WebP в директорию (захватывает каждую 1 секунду)

Примеры использования

Базовый скринкаст (5 кадров за 10 секунд):

take_screencast(url="https://example.com")

Пользовательский тайминг:

take_screencast(url="https://example.com", duration=15, interval=3)

С выполнением JavaScript:

take_screencast(
  url="https://example.com",
  jsEvaluate="document.body.style.backgroundColor = 'red';"
)

Сохранение как анимированный WebP:

take_screencast(url="https://example.com", directory="/path/to/output")

При использовании параметра directory:

• Создается анимированный WebP с интервалом в 1 секунду

• Отдельные кадры также сохраняются как PNG-файлы

• Анимация по умолчанию зациклена бесконечно

• WebP обеспечивает отличное качество:

  • Полная поддержка цвета (без ограничения в 256 цветов)

  • Эффективное сжатие для веб-анимаций

  • Идеально подходит для градиентных фонов и плавной анимации

  • Меньший размер файла по сравнению с GIF при лучшем качестве

Использование при разработке

Установка

npm install
npm run build

Создание скриншота

# Full page with automatic tiling (default)
npm run dev capture https://example.com -o screenshot.png

# Viewport-only screenshot  
npm run dev capture https://example.com --no-full-page -o screenshot.png

# Wait for specific conditions
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

Опции CLI

• -w, --width <pixels> — ширина области просмотра (макс. 1072, по умолчанию: 1072)

• -h, --height <pixels> — высота области просмотра (макс. 1072, по умолчанию: 1072)

• --no-full-page — отключить захват всей страницы и разбивку на фрагменты

• --wait-until <event> — ждать события: load, domcontentloaded, networkidle0, networkidle2

• --wait-for <ms> — дополнительное время ожидания в миллисекундах

• -o, --output <path> — путь к выходному файлу (обязательно для вывода фрагментов)

Функция автоматического перезапуска

MCP-сервер по умолчанию включает возможность автоматического перезапуска для повышения надежности:

• Автоматически перезапускает сервер в случае сбоя

• Обрабатывает необработанные исключения и отклоненные промисы

• Реализует экспоненциальную задержку (макс. 10 попыток за 1 минуту)

• Логирует все попытки перезапуска для мониторинга

• Корректно обрабатывает сигналы завершения (SIGINT, SIGTERM)

Для разработки/отладки без автоматического перезапуска:

# Run directly without restart wrapper
npm run serve:dev

Архитектура

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # Core screenshot capture logic
│   ├── utils/          # Logger and utilities
│   ├── index.ts        # CLI entry point
│   ├── serve.ts        # MCP server entry point
│   └── serve-restart.ts # Auto-restart wrapper

Разработка

# Run in development mode
npm run dev capture https://example.com -o screenshot.png

# Build for production
npm run build

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
npm run lint

Почему этот инструмент?

Создан специально для рабочих процессов компьютерного зрения ИИ:

1. Оптимизировано для Claude Vision API — автоматическое ограничение разрешения до 1072x1072 пикселей (1,15 мегапикселя)

2. Автоматическая разбивка на фрагменты — полные страницы делятся на идеальные части для обработки ИИ

3. Всегда свежий контент — отсутствие кэширования гарантирует получение самого актуального контента

4. Нативный MCP — первоклассная интеграция с инструментами разработки ИИ

5. Простой API — чистый и понятный интерфейс для создания скриншотов

Вклад в проект

Приветствуются любые вклады! Пожалуйста:

1. Сделайте форк репозитория

2. Создайте ветку для новой функции

3. Добавьте тесты для нового функционала

4. Отправьте pull request

Устранение неполадок

Проблемы с Puppeteer

• Убедитесь, что Chrome/Chromium может быть загружен

• Проверьте настройки брандмауэра

• Попробуйте установить PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true и предоставить собственный исполняемый файл

Качество скриншотов

• Настройте размеры области просмотра

• Используйте соответствующие стратегии ожидания

• Проверьте, требует ли сайт аутентификации

Ошибки тайм-аута

• Увеличьте время ожидания с помощью флага --wait-for

• Используйте другие стратегии --wait-until

• Проверьте доступность сайта

Лицензия

MIT