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.

其他分类下的更多 MCP 服务器

Reactive Resume

amruthpillai

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

39.5K