MCP Server

The official Model Context Protocol (MCP) server for SnapSharp. Lets AI tools like Claude Desktop, Cursor, and Windsurf call SnapSharp as a native tool — take screenshots, run site audits, generate OG images, and more using natural language.

You need a SnapSharp API key to use the MCP server. Get one at snapsharp.dev/api-keys.

Install

No installation required — run on demand with npx:

npx snapsharp-mcp

Or install globally to skip the startup delay:

npm install -g snapsharp-mcp

Setup

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "snapsharp": {
      "command": "npx",
      "args": ["-y", "snapsharp-mcp"],
      "env": {
        "SNAPSHARP_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Restart Claude Desktop. SnapSharp tools appear in the tool selector (hammer icon).

Cursor

Create .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global access):

{
  "mcpServers": {
    "snapsharp": {
      "command": "npx",
      "args": ["-y", "snapsharp-mcp"],
      "env": {
        "SNAPSHARP_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "snapsharp": {
      "command": "npx",
      "args": ["-y", "snapsharp-mcp"],
      "env": {
        "SNAPSHARP_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Other MCP clients

Any MCP-compatible client can use this config:

{
  "command": "npx",
  "args": ["-y", "snapsharp-mcp"],
  "env": {
    "SNAPSHARP_API_KEY": "sk_live_your_key_here"
  }
}

Environment variables

Variable	Required	Description
`SNAPSHARP_API_KEY`	Yes	Your SnapSharp API key
`SNAPSHARP_BASE_URL`	No	Override API base URL (default: `https://api.snapsharp.dev`)

Available tools

Tool	Plan	Description
`snapsharp_screenshot`	Free+	Screenshot any URL with full control over viewport, device, dark mode, full-page
`snapsharp_og_image`	Starter+	Generate OG images from templates
`snapsharp_html_to_image`	Starter+	Render HTML/CSS string to an image
`snapsharp_site_audit`	Starter+	Extract colors, fonts, tech stack, and accessibility issues
`snapsharp_analyze`	Starter+	AI vision analysis of a webpage (requires BYOK AI provider)
`snapsharp_extract`	Starter+	Extract metadata: title, OG tags, description, favicons
`snapsharp_diff`	Growth+	Compare two URLs pixel-by-pixel and return a diff image
`snapsharp_video`	Growth+	Record a webpage as MP4, WebM, or GIF
`snapsharp_scroll`	Growth+	Capture an auto-scrolling GIF or MP4
`snapsharp_pdf`	Growth+	Generate PDF from a URL or HTML
`snapsharp_batch_screenshot`	Growth+	Batch screenshot up to 100 URLs

Example prompts

Once configured, use natural language:

"Take a screenshot of stripe.com in dark mode at 1440px wide"
"Run a site audit on vercel.com and show me the color palette"
"Screenshot github.com on an iPhone 14"
"Record a 10-second video of framer.com"
"Generate an OG image using the blog-post template with title 'My Article' and author 'Jane Doe'"
"Extract OG metadata from linear.app"
"Compare the homepage before and after this deploy"
"Batch screenshot all these URLs and zip them up"

Troubleshooting

Tools don't appear in Claude Desktop

Restart Claude Desktop completely (quit from tray, not just close)
Check that the config file is valid JSON (Command + K → open config)
Verify your API key is correct — run SNAPSHARP_API_KEY=sk_live_... npx snapsharp-mcp in terminal to test

npx snapsharp-mcp times out

The first run downloads the package. Run it in a terminal once to pre-cache, then restart your AI tool.

plan_required error

Check the plan column in the tools table above. Some tools require Starter or Growth.

The MCP server uses the official Node.js SDK under the hood. Any parameter supported by the REST API is available as a tool input.