mcpField
S
screenshotty

screenshotty

Local
github.com/niheyBrowser Automation0Updated 5w ago
Repository

About screenshotty

screenshotty is an MCP server for capturing web pages and rendering HTML as images or PDFs. It serves users of MCP clients who need inline image results, with options for page capture and HTML rendering.

Key features

  1. 01Capture web pages as PNG, JPEG, or WebP
  2. 02Render HTML as images
  3. 03Generate PDFs from pages or HTML
  4. 04Configure viewport, selectors, and appearance
  5. 05Return hosted URLs and inline images

Use cases

  1. 01Inspect a webpage at a mobile viewport
  2. 02Save a webpage as a PDF
  3. 03Render a social card or chart from HTML

MCP support

Exposes `screenshot_url`, `screenshot_html`, and `generate_pdf` tools to MCP clients for web capture and rendering.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "nihey-screenshotty": {
      "command": "npx",
      "args": [
        "-y",
        "screenshotty-mcp"
      ],
      "env": {
        "SCREENSHOTTY_API_KEY": "<SCREENSHOTTY_API_KEY>"
      }
    }
  }
}
Run commandnpx -y screenshotty-mcp
Environment variables to set
SCREENSHOTTY_API_KEYSecretScreenshotty API key from https://screenshotty.link/dashboard/api-keys

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmscreenshotty-mcp1.1.0

Tools

3

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
urlstringYesPage to capture (http:// or https://)
formatenumNoImage format. Default pngpng | jpeg | webp
adblockbooleanNoBlock ads
wait_msintegerNoExtra wait before capturing, in ms
selectorstringNoCSS selector of a single element to capture
full_pagebooleanNoCapture the whole scrollable page. Default true
light_modeenumNoForce light or dark color schemedefault | light | dark
viewport_widthintegerNoViewport width in pixels. Default 1920
viewport_heightintegerNoViewport height in pixels. Default 1080
block_cookie_bannerbooleanNoHide cookie consent banners
device_scale_factorintegerNo1 = standard, 2 = retina, 3 = high-dpi

Details

From the project README

screenshotty-mcp

Model Context Protocol server for the Screenshotty screenshot API. Lets Claude, Cursor, Cline, and any other MCP client capture web pages — or render HTML — as images or PDFs, and see the result, since images come back inline.

Get an API key

Sign up at https://screenshotty.link/sign-up?utm_source=mcp (250 screenshots/month free, no credit card) and copy a key from Dashboard → API Keys.

Configure your client

Claude Code
claude mcp add screenshotty --env SCREENSHOTTY_API_KEY=your_key -- npx -y screenshotty-mcp
Claude Desktop / Cursor / Cline
{
  "mcpServers": {
    "screenshotty": {
      "command": "npx",
      "args": ["-y", "screenshotty-mcp"],
      "env": {
        "SCREENSHOTTY_API_KEY": "your_key"
      }
    }
  }
}

Claude Desktop config lives at ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows).

Tools

ToolWhat it does
screenshot_urlScreenshot a page (PNG, JPEG, WebP). Returns the hosted URL, plus the image inline when it is 2 MB or smaller. Options: viewport, full page, CSS selector, wait, ad blocking, cookie-banner blocking, light/dark mode, device scale factor.
screenshot_htmlRender an HTML document (inline CSS/JS; public http(s) assets only) to PNG, JPEG, or WebP — social cards, charts, email previews. Returns the URL plus the image inline.
generate_pdfRender a page (url) or an HTML document (html) to PDF. Returns the hosted PDF URL.

Example prompts: "Screenshot https://example.com on a 390px-wide viewport and tell me what's broken on mobile", "Save our pricing page as a PDF", "Design a 1200×630 Open Graph card for this blog post and render it".

Environment variables

VariableRequiredDefault
SCREENSHOTTY_API_KEYyes—
SCREENSHOTTY_API_URLnohttps://api.screenshotty.link

Development

npm install
npm run build
SCREENSHOTTY_API_KEY=your_key npx @modelcontextprotocol/inspector node dist/index.js

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.