@framesnap/mcp-server

Give your AI coding agent the ability to take screenshots. Works with Claude Code, Cursor, Windsurf, and any MCP-compatible tool.

Setup

Claude Code

claude mcp add framesnap -- npx -y @framesnap/mcp-server

Then set your API key:

export FRAMESNAP_API_KEY=fs_your_key_here

Manual MCP Configuration

Add to your MCP settings (Claude Code, Cursor, etc.):

{
  "mcpServers": {
    "framesnap": {
      "command": "npx",
      "args": ["-y", "@framesnap/mcp-server"],
      "env": {
        "FRAMESNAP_API_KEY": "fs_your_key_here"
      }
    }
  }
}

Tools

framesnap_screenshot

Take a screenshot of any URL. Returns the image for visual analysis.

Parameters:

• url (required) — The URL to screenshot
• width — Viewport width (320-3840, default 1280)
• height — Viewport height (240-2160, default 800)
• full_page — Capture entire scrollable page
• format — png or jpeg (default jpeg)
• dark_mode — Use dark color scheme
• delay — Wait ms before capture (0-5000)
• scale — Device scale factor (0.5-3.0)
• block_ads — Block ad networks and trackers

framesnap_diff

Compare two URLs visually. Highlights pixel differences in red.

Parameters:

• url1 (required) — First URL (before state)
• url2 (required) — Second URL (after state)
• width, height, full_page, dark_mode, delay — Same as screenshot
• threshold — Diff sensitivity (0.0-1.0, default 0.1)

Get an API Key

Sign up at framesnap.dev — 100 free screenshots per month, no credit card required.