Integrations/MCP
⚡

MCP + ScreenshotDEV

Model Context Protocol

Expose ScreenshotDEV as an MCP tool server. Any MCP-compatible client — Claude Desktop, Cursor, Windsurf, or custom agents — can discover and use screenshot capabilities through the standard protocol.

Get free API key →API docs
ClaudeOpenClawAI Tool UseMCP

Key features

  • ✓Standard MCP tool interface
  • ✓Auto-discovery by MCP-compatible clients
  • ✓Works with Claude Desktop, Cursor, Windsurf
  • ✓Simple HTTP transport — easy to self-host
  • ✓Structured JSON responses for LLM reasoning
  • ✓Composable with other MCP tools
Step by step

How to set it up

Install, configure, and start capturing.

1

Define the MCP tool

Create an MCP tool server that exposes a screenshot tool. The tool definition follows the standard MCP schema.

{
  "name": "screenshot",
  "description": "Capture a website screenshot",
  "inputSchema": {
    "type": "object",
    "properties": {
      "url": { "type": "string" },
      "format": {
        "type": "string",
        "enum": ["png", "jpeg", "webp"]
      },
      "full_page": { "type": "boolean" }
    },
    "required": ["url"]
  }
}
2

Implement the handler

When the tool is called, make a request to the ScreenshotDEV API and return the result.

server.setRequestHandler(
  CallToolRequestSchema,
  async (request) => {
    const { url, ...opts } = request.params.arguments;
    const params = new URLSearchParams({
      url,
      access_key: process.env.SSDEV_KEY,
      format: opts.format || "webp",
      ...opts
    });
    const res = await fetch(
      `https://api.screenshotdev.com/v1/screenshot?${params}`
    );
    const data = await res.json();
    return {
      content: [{
        type: "text",
        text: JSON.stringify(data, null, 2)
      }]
    };
  }
);
3

Register in your MCP config

Add the tool server to your MCP client's configuration file (e.g. Claude Desktop's claude_desktop_config.json).

{
  "mcpServers": {
    "screenshotdev": {
      "command": "node",
      "args": ["./screenshot-mcp-server.js"],
      "env": {
        "SSDEV_KEY": "ak_live_your_key_here"
      }
    }
  }
}
4

Use from any MCP client

Any MCP-compatible client now has screenshot capabilities. Just ask it to capture a page.

> Capture acme.com in dark mode

Agent calls tool "screenshot":
  { "url": "https://acme.com", "full_page": true }

→ {
    "url": "https://cdn.ssdev.io/s/mcp01.webp",
    "width": 1280,
    "height": 2340
  }
Full example

MCP tool server implementation

import { Server } from "@modelcontextprotocol/sdk/server";
import { StdioServerTransport } from
  "@modelcontextprotocol/sdk/server/stdio";

const server = new Server({
  name: "screenshotdev",
  version: "1.0.0",
});

// List available tools
server.setRequestHandler(
  ListToolsRequestSchema,
  async () => ({
    tools: [{
      name: "screenshot",
      description: "Capture a website screenshot",
      inputSchema: {
        type: "object",
        properties: {
          url: { type: "string" },
          format: { type: "string" },
          full_page: { type: "boolean" },
          dark_mode: { type: "boolean" },
          block_ads: { type: "boolean" }
        },
        required: ["url"]
      }
    }]
  })
);

// Handle tool calls
server.setRequestHandler(
  CallToolRequestSchema,
  async (request) => {
    const { url, ...opts } = request.params.arguments;
    const params = new URLSearchParams({
      url, access_key: process.env.SSDEV_KEY,
      format: opts.format || "webp",
      ...Object.fromEntries(
        Object.entries(opts)
          .filter(([k]) => k !== "format")
          .map(([k, v]) => [k, String(v)])
      )
    });
    const res = await fetch(
      `https://api.screenshotdev.com/v1/screenshot?${params}`
    );
    const data = await res.json();
    return {
      content: [{
        type: "text",
        text: JSON.stringify(data, null, 2)
      }]
    };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

Pro tip: Publish your MCP server as an npm package so anyone on your team can add screenshot capabilities to their AI tools with a single config line.

Start with 100 free API calls →

No credit card required

Use cases

What people build with MCP

Claude Desktop screenshots

Add screenshot capabilities to Claude Desktop. Ask it to capture any page and analyze the visual content.

IDE-integrated captures

Use with Cursor or Windsurf to capture your app during development. Debug visual issues without leaving your editor.

Multi-tool compositions

Combine the screenshot tool with other MCP tools — capture a page, analyze it, write results to a database, all in one flow.

Team-shared capabilities

Deploy one MCP server and every team member's AI tools get screenshot capabilities. Centralized API key management.

FAQ

MCP + ScreenshotDEV — Common questions

What is MCP?
Model Context Protocol (MCP) is an open standard for connecting AI models to tools and data. It lets any compatible client discover and use your tools through a standard interface.
Which clients support MCP?
Claude Desktop, Cursor, Windsurf, Continue, and many other AI development tools support MCP. The ecosystem is growing rapidly.
Can I use this without writing an MCP server?
Yes — use the ssdev CLI directly (Claude Code auto-discovers it), or use the REST API with function calling. MCP is just another integration option.
Is MCP transport required to be stdio?
No. MCP supports stdio, HTTP/SSE, and WebSocket transports. Stdio is simplest for local tools; HTTP is better for shared servers.

MCP + screenshots.
Ready in minutes.

100 free API calls per month. No credit card. No complex setup.

Get free API key →
MCP Integration — ScreenshotDEV