広告掲載
MCP.so
ログイン

Screenshotmcp MCP Server

@upnorthmedia

リポジトリ

基本情報

カテゴリ

その他

トランスポート

stdio

作者

upnorthmedia

投稿者

Up North Media

Screenshotmcp MCP Server について

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

#screenshots#ux-design#website-screenshot

Screenshotmcp MCP Server の設定

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

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

Screenshotmcp MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

ツールは 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

よくある質問

1

What are the system requirements?

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

2

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.

3

Can I take a mobile screenshot?

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

4

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.

コメント

「その他」の他のコンテンツ

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K

Klarix Intelligence Engine

Klarix

B2B competitive intelligence, live sales battlecards, 5-axis ICP prospect fit scoring, and tech stack teardowns over MCP and REST with cited public-web evidence.

MCP Toolbox for Databases

googleapis

MCP Toolbox for Databases is an open source MCP server for databases.

15.9K

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

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K
広告掲載