Screenshotmcp

Name: Screenshotmcp
Author: upnorthmedia

@upnorthmedia

Screenshotmcp について

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

#screenshots #ux-design #website-screenshot

基本情報

カテゴリ

その他

トランスポート

stdio

公開者

upnorthmedia

投稿者

Up North Media

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Screenshotmcp?

Screenshotmcp is an MCP server that captures screenshots of webpages using Puppeteer. It integrates with Claude Code CLI/Desktop, Cursor, and other MCP-compatible tools, allowing developers to automate screenshots through natural language commands.

How to use Screenshotmcp?

Install by cloning the repository, running npm install, then npm start. Configure Claude Code by adding the server to ~/.config/claude/mcp_servers.json or using claude mcp add. In Cursor, add it under Settings > MCP Servers. Once connected, issue commands like "Take a screenshot of https://example.com" or "Capture just the navigation bar from https://example.com".

Key features of Screenshotmcp

Full-page screenshots with custom viewports and device presets
Capture specific elements using CSS selectors
Wait for selectors, functions, timeouts, or network idle
Configurable via environment variables (.env file)
URL validation, rate limiting, and sandboxed browser execution
Three built-in device presets: mobile, tablet, desktop

Use cases of Screenshotmcp

Automate visual regression testing for web pages
Document UI states for bug reports or onboarding guides
Capture responsive views across mobile, tablet, and desktop
Integrate screenshot generation into CI/CD workflows
Debug specific elements by isolating them in a screenshot

FAQ from Screenshotmcp

What are the system requirements?

Node.js 18+, Chrome/Chromium (installed automatically via Puppeteer), minimum 2GB RAM, and 500MB disk space.

How do I configure Screenshotmcp?

Set environment variables in the .env file, such as BROWSER_HEADLESS, MAX_CONCURRENT_SCREENSHOTS, and DEFAULT_VIEWPORT_WIDTH. Rename .env.example to .env to get started.

Can I take a mobile screenshot?

Yes, use the viewport preset "mobile" in the capture_screenshot tool, or specify custom width, height, and deviceScaleFactor.

What security measures are included?

Screenshotmcp validates URLs (HTTP/HTTPS only), sanitizes CSS selectors, enforces per‑window rate limiting, and runs the browser in a sandboxed environment.