We believe a screenshot API should work where you work — not just as a raw HTTP endpoint. SnapSharp ships with a complete integration ecosystem: interactive API docs, Postman Collection, SDKs in five languages, MCP Server for AI assistants, and native support in n8n, Zapier, Make, and GitHub Actions.
Interactive API Reference (Swagger UI)
Browse every endpoint, parameter, and response schema at snapsharp.dev/api-docs. The reference is powered by Swagger UI with a dark theme and try-it-out enabled for every endpoint — authenticate with your API key and run live requests without leaving the browser.
Endpoints covered include:
| Endpoint | Description |
|---|---|
GET /v1/screenshot | Capture a URL as PNG, JPEG, WebP, or PDF |
POST /v1/og-image | Generate OG social cards from templates |
POST /v1/html-to-image | Render arbitrary HTML/CSS to image |
POST /v1/pdf | Generate PDF from URL or HTML template |
POST /v1/batch | Capture up to 100 URLs in one request |
POST /v1/async/screenshot | Enqueue a screenshot job (non-blocking) |
GET /v1/jobs/:id | Poll async job status |
POST /v1/diff | Pixel-level visual diff of two images or URLs |
GET /v1/site-audit | Extract design tokens from any URL |
POST /v1/extract | Extract OG tags, meta, and favicons |
POST /v1/analyze | AI-powered analysis of a screenshot |
POST /v1/sitemap/crawl | Screenshot every URL in a sitemap |
POST /v1/video | Record a page load as MP4 or GIF |
GET /v1/usage | Current quota, daily usage, and stats |
GET /v1/templates | List available OG image templates |
OpenAPI 3.0.3 Specification
The full machine-readable spec is served at:
https://api.snapsharp.dev/openapi.jsonIt's a valid OpenAPI 3.0.3 document with full schema definitions for every request body, response shape, and error code. You can import it into:
- Insomnia — import collection, authenticate with your key, run requests
- HTTPie —
httpie plugins install httpie-openapithen import - Redoc — self-host your own documentation site
- Speakeasy / openapi-typescript — generate type-safe client code for your language
- Prism — mock server for local testing without hitting the real API
Generating a TypeScript client from the spec
npx openapi-typescript https://api.snapsharp.dev/openapi.json -o src/snapsharp.d.tsThen use with your fetch client:
import type { paths } from './snapsharp.d.ts';
import createClient from 'openapi-fetch';
const client = createClient<paths>({ baseUrl: 'https://api.snapsharp.dev' });
const { data, error } = await client.GET('/v1/screenshot', {
params: {
query: { url: 'https://example.com', format: 'png', full_page: true },
},
headers: { Authorization: `Bearer ${process.env.SNAPSHARP_API_KEY}` },
});This gives you fully type-safe API calls with autocomplete for all parameters.
Postman Collection
A pre-configured Postman Collection is available at:
https://snapsharp.dev/postman-collection.jsonImport it into Postman Desktop → set the {{api_key}} collection variable → start testing. Every endpoint has a description, example request body, and documented response schema. The collection is organized by endpoint category (screenshots, OG images, monitoring, batch, etc.).
Quick start:
- Open Postman → Import → Link → paste the URL above
- Click the collection → Variables tab → set
api_keyto your key - Open any request → Send
The collection also includes a pre-request script that logs X-Request-Id for debugging — useful when correlating requests with your Axiom logs.
Language SDKs
SnapSharp ships official SDKs for five languages:
Node.js / TypeScript
npm install @snapsharp/sdkimport { SnapSharp } from '@snapsharp/sdk';
const snap = new SnapSharp({ apiKey: process.env.SNAPSHARP_API_KEY });
// Screenshot
const image = await snap.screenshot({ url: 'https://github.com', fullPage: true, format: 'png' });
await fs.writeFile('screenshot.png', image);
// OG image
const og = await snap.ogImage({ template: 'blog-post', data: { title: 'Hello World', author: 'John' } });Python
pip install snapsharpfrom snapsharp import SnapSharp
snap = SnapSharp(api_key=os.getenv("SNAPSHARP_API_KEY"))
image_bytes = snap.screenshot(url="https://stripe.com", dark_mode=True, format="jpeg")
with open("stripe-dark.jpg", "wb") as f:
f.write(image_bytes)Go
go get github.com/snapsharp/sdk-goclient := snapsharp.New(os.Getenv("SNAPSHARP_API_KEY"))
img, err := client.Screenshot(ctx, &snapsharp.ScreenshotParams{
URL: "https://example.com",
FullPage: true,
Format: "png",
})SDKs for Ruby and PHP follow the same pattern. All SDKs are open source and available on GitHub under @snapsharp/sdk-*.
CLI
The CLI is the fastest way to use SnapSharp from the terminal or CI pipeline:
npx snapsharp-cli screenshot --url https://example.com --format png --output screenshot.png
npx snapsharp-cli og-image --template blog-post --title "Hello" --author "Me" --output card.jpg
npx snapsharp-cli site-audit --url https://stripe.com --format jsonSet SNAPSHARP_API_KEY in your environment and the CLI will pick it up automatically. The --output flag accepts a file path or - to pipe to stdout.
Claude MCP Server (AI-native integration)
SnapSharp ships a native MCP (Model Context Protocol) server that works with Claude Desktop, Cursor, and Windsurf. This means your AI assistant can take screenshots, run site audits, generate OG images, and query usage stats — without leaving the editor.
Install the MCP server
npm install -g snapsharp-mcpConfigure Claude Desktop
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"snapsharp": {
"command": "snapsharp-mcp",
"env": {
"SNAPSHARP_API_KEY": "sk_live_your_key_here"
}
}
}
}Restart Claude Desktop. You can now ask:
- "Take a screenshot of stripe.com in dark mode"
- "Run a site audit on our competitor's homepage and show me their color palette"
- "Generate an OG image for this blog post"
- "Check my API usage for this month"
Configure Cursor
Add to your Cursor MCP settings:
{
"snapsharp": {
"command": "snapsharp-mcp",
"env": { "SNAPSHARP_API_KEY": "sk_live_..." }
}
}Available MCP tools: take_screenshot, generate_og_image, run_site_audit, render_html_to_image, get_usage, list_monitors, create_monitor.
ChatGPT GPT Action
Turn ChatGPT into a screenshot and design tool by adding a GPT Action:
- Open ChatGPT → My GPTs → Create a GPT
- Go to the Configure tab → Actions → Add action
- Import from URL:
https://api.snapsharp.dev/openapi.json - Authentication: API Key → Bearer → paste your API key
- Save
ChatGPT now has access to all SnapSharp endpoints. Example prompts:
- "Screenshot https://linear.app and describe the navigation structure"
- "Create an OG image card for a post titled 'Building a Screenshot API'"
- "Audit https://figma.com and tell me what fonts they use"
GitHub Actions
Integrate screenshots into your CI/CD pipeline for visual regression testing or automated documentation:
name: Visual Regression
on: [pull_request]
jobs:
screenshot:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Capture PR preview screenshot
run: |
curl -s "https://api.snapsharp.dev/v1/screenshot?url=${{ vars.PREVIEW_URL }}&full_page=true&format=png" \
-H "Authorization: Bearer ${{ secrets.SNAPSHARP_API_KEY }}" \
--output pr-preview.png
- name: Upload screenshot artifact
uses: actions/upload-artifact@v4
with:
name: pr-preview
path: pr-preview.pngFor visual diff in CI, use the diff endpoint to compare the PR preview against the production baseline:
- name: Visual diff vs production
run: |
DIFF=$(curl -s -X POST "https://api.snapsharp.dev/v1/diff" \
-H "Authorization: Bearer ${{ secrets.SNAPSHARP_API_KEY }}" \
-H "Content-Type: application/json" \
-d '{"url_a": "${{ vars.PROD_URL }}", "url_b": "${{ vars.PREVIEW_URL }}"}')
DIFF_PCT=$(echo $DIFF | jq '.diff_percent')
echo "Visual diff: ${DIFF_PCT}%"
if (( $(echo "$DIFF_PCT > 5" | bc -l) )); then
echo "::warning::Visual diff exceeds 5% threshold"
fin8n
Use SnapSharp in n8n workflows for automated screenshot pipelines:
HTTP Request node setup:
- Method:
GET - URL:
https://api.snapsharp.dev/v1/screenshot - Authentication: Header Auth →
Authorization→Bearer YOUR_KEY - Query parameters:
url,format,full_page, etc. - Response format: Binary
Example workflow: Google Sheets row added → SnapSharp screenshot → upload to Google Drive → send Slack notification with image.
For OG images:
- Method:
POST - Body (JSON):
{"template": "blog-post", "data": {"title": "{{$json.title}}", "author": "{{$json.author}}"}}
Zapier
Create a Zap with the Webhooks by Zapier action:
- Method:
GET - URL:
https://api.snapsharp.dev/v1/screenshot - Query string params:
url=YOUR_URL&format=jpeg&quality=85 - Headers:
Authorization: Bearer sk_live_... - Response type:
file(Zapier will handle the binary)
Trigger from: Google Sheets row updated, Notion database item, Airtable record created, or any of Zapier's 6,000+ app triggers.
Make (Integromat)
In Make, add an HTTP module:
- Make a request → URL: screenshot endpoint → Method: GET
- Add query parameters:
url,format,full_page - Headers:
Authorization: Bearer YOUR_KEY - Parse response:
Binary→ connect to a Google Drive, Dropbox, or Slack module
Chain with an Iterator module to process a list of URLs from a Google Sheet and screenshot each one.
RapidAPI
SnapSharp is listed on the RapidAPI marketplace for teams that prefer billing and key management centralized in RapidAPI's ecosystem:
https://snapsharp.dev/openapi-rapidapi.jsonSubscribe on RapidAPI for access with RapidAPI credentials. The spec is identical to the public API — same parameters, same response formats.
Why this matters for teams
Most screenshot APIs give you a REST endpoint and documentation. SnapSharp gives you:
- Interactive docs you can explore and test without writing any code
- Postman Collection ready to import in 10 seconds, pre-wired with auth
- SDKs in 5 languages so you don't write raw fetch calls
- MCP Server so AI assistants (Claude, Cursor, Windsurf) can use the API natively
- GPT Action for ChatGPT integration with no code
- CLI for shell scripts, cron jobs, and CI pipelines
- OpenAPI spec for automated client code generation in any language
- No-code support via n8n, Zapier, and Make — so non-engineers can automate too
One API. Every platform.
Windsurf and Cursor — detailed MCP setup
Both editors use the same MCP protocol but store config in slightly different locations.
Cursor
In Cursor, open Settings → Features → MCP Servers and add a new entry, or edit ~/.cursor/mcp.json directly:
{
"mcpServers": {
"snapsharp": {
"command": "npx",
"args": ["-y", "snapsharp-mcp"],
"env": {
"SNAPSHARP_API_KEY": "sk_live_your_key_here"
}
}
}
}After saving, restart Cursor. You'll see SnapSharp tools appear in the MCP panel. Ask the AI: "Screenshot the current URL open in my browser and analyze the layout" — the agent will call take_screenshot and run_site_audit automatically.
Windsurf
Windsurf reads MCP config from ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"snapsharp": {
"command": "npx",
"args": ["-y", "snapsharp-mcp"],
"env": {
"SNAPSHARP_API_KEY": "sk_live_your_key_here"
}
}
}
}Restart Windsurf after editing. The Cascade assistant will have access to all SnapSharp tools in its tool list.
Available MCP tools reference
| Tool | Description | Plan |
|---|---|---|
take_screenshot | Capture a URL as PNG/JPEG | Free+ |
generate_og_image | Render a template to OG card | Free+ |
render_html_to_image | Convert HTML string to image | Free+ |
run_site_audit | Extract design tokens from URL | Starter+ |
get_usage | Current quota and daily stats | Free+ |
list_monitors | List active visual monitors | Starter+ |
create_monitor | Set up new visual monitor | Starter+ |
Type-safe client generation from the OpenAPI spec
The OpenAPI 3.0.3 spec at https://api.snapsharp.dev/openapi.json is machine-readable — you can generate a fully type-safe client in any language in minutes.
TypeScript (openapi-typescript + openapi-fetch)
npx openapi-typescript https://api.snapsharp.dev/openapi.json -o src/snapsharp.d.ts
npm install openapi-fetchimport createClient from 'openapi-fetch';
import type { paths } from './snapsharp.d.ts';
const client = createClient<paths>({
baseUrl: 'https://api.snapsharp.dev',
headers: { Authorization: `Bearer ${process.env.SNAPSHARP_API_KEY}` },
});
// Fully typed — TypeScript knows all valid params and response shapes
const { data, error } = await client.GET('/v1/screenshot', {
params: {
query: {
url: 'https://stripe.com',
format: 'png',
full_page: true,
dark_mode: true,
},
},
});
if (error) throw new Error(`Screenshot failed: ${JSON.stringify(error)}`);
// `data` is typed as the binary responsePython (openapi-python-client)
pip install openapi-python-client
openapi-python-client generate --url https://api.snapsharp.dev/openapi.jsonThis generates a Python package with typed models for every request/response. Import and use:
from snapsharp_client import Client
from snapsharp_client.api.screenshots import get_v1_screenshot
client = Client(base_url="https://api.snapsharp.dev", headers={"Authorization": f"Bearer {api_key}"})
response = get_v1_screenshot.sync(client=client, url="https://example.com", format_="png")Go (oapi-codegen)
go install github.com/deepmap/oapi-codegen/cmd/oapi-codegen@latest
oapi-codegen -generate types,client -package snapsharp https://api.snapsharp.dev/openapi.json > snapsharp_client.goGenerated Go client with full type safety for all endpoints and parameters.
Using Prism for local mock testing
Prism turns your OpenAPI spec into a mock server — no real API calls, no quota consumption, perfect for testing your integration in CI:
npx @stoplight/prism-cli mock https://api.snapsharp.dev/openapi.json
# Prism is now listening on http://127.0.0.1:4010Point your test suite at http://127.0.0.1:4010 instead of https://api.snapsharp.dev. Prism will:
- Validate your request parameters against the schema
- Return example responses from the spec
- Reject requests with invalid parameters (404/422)
This means your integration tests can run in CI without network calls or API keys. They validate the contract between your code and the API spec.
// vitest / jest example
const TEST_BASE_URL = process.env.CI
? 'http://127.0.0.1:4010' // Prism mock in CI
: 'https://api.snapsharp.dev'; // Real API in local dev
const res = await fetch(`${TEST_BASE_URL}/v1/screenshot?url=https://example.com`, {
headers: { Authorization: `Bearer ${process.env.SNAPSHARP_API_KEY ?? 'test-key'}` },
});
expect(res.status).toBe(200);Slack slash command integration
You can wire a Slack slash command to SnapSharp in under 30 minutes using Slack's HTTP trigger + a serverless function.
Architecture: /screenshot https://stripe.com → Slack sends POST to your function → function calls SnapSharp → uploads PNG to Slack channel.
// pages/api/slack/screenshot.ts (or any serverless function)
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// Slack sends command in body as application/x-www-form-urlencoded
const text = String(req.body.text ?? '').trim();
if (!text.startsWith('http')) {
return res.json({ text: 'Usage: /screenshot <url>' });
}
// Acknowledge Slack immediately (3s timeout)
res.json({ text: `Taking screenshot of ${text}...` });
// Process async
const screenshotRes = await fetch(
`https://api.snapsharp.dev/v1/screenshot?url=${encodeURIComponent(text)}&format=png&full_page=true`,
{ headers: { Authorization: `Bearer ${process.env.SNAPSHARP_API_KEY}` } },
);
if (!screenshotRes.ok) return;
const imageBuffer = Buffer.from(await screenshotRes.arrayBuffer());
// Upload to Slack
const form = new FormData();
form.append('channels', req.body.channel_id);
form.append('filename', 'screenshot.png');
form.append('file', new Blob([imageBuffer], { type: 'image/png' }), 'screenshot.png');
await fetch('https://slack.com/api/files.upload', {
method: 'POST',
headers: { Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}` },
body: form,
});
}Set up in Slack: Apps → Slash Commands → Create New Command → point to your function URL → add screenshot as the command. Team members can now screenshot any URL directly in Slack.
API Reference → · SDK Docs → · Integrations docs → · Get your API key →
Related: Integrations docs · Pricing · Real-Time Screenshot Notifications with Webhooks · Screenshot API Comparison 2026