@screenshothis/sdk

Developer-friendly & type-safe Typescript SDK specifically catered to leverage @screenshothis/sdk API.

Important

This SDK is not yet ready for production use. To complete setup please follow the steps outlined in your workspace. Delete this section before > publishing to a package manager.

Summary

Screenshothis API: API designed to take screenshots of websites

SDK Installation

The SDK can be installed with either npm, pnpm, bun or yarn package managers.

NPM

npm add @screenshothis/sdk

PNPM

pnpm add @screenshothis/sdk

Bun

bun add @screenshothis/sdk

Yarn

yarn add @screenshothis/sdk zod

# Note that Yarn does not install peer dependencies automatically. You will need
# to install zod as shown above.

Note

This package is published with CommonJS and ES Modules (ESM) support.

Model Context Protocol (MCP) Server

This SDK is also an installable MCP server where the various SDK methods are exposed as tools that can be invoked by AI applications.

Node.js v20 or greater is required to run the MCP server from npm.

Claude installation steps

Add the following server definition to your claude_desktop_config.json file:

{
  "mcpServers": {
    "Screenshothis": {
      "command": "npx",
      "args": [
        "-y", "--package", "@screenshothis/sdk",
        "--",
        "mcp", "start"
      ]
    }
  }
}

Cursor installation steps

Create a .cursor/mcp.json file in your project root with the following content:

{
  "mcpServers": {
    "Screenshothis": {
      "command": "npx",
      "args": [
        "-y", "--package", "@screenshothis/sdk",
        "--",
        "mcp", "start"
      ]
    }
  }
}

You can also run MCP servers as a standalone binary with no additional dependencies. You must pull these binaries from available Github releases:

curl -L -o mcp-server \
    https://github.com/{org}/{repo}/releases/download/{tag}/mcp-server-bun-darwin-arm64 && \
chmod +x mcp-server

If the repo is a private repo you must add your Github PAT to download a release -H "Authorization: Bearer {GITHUB_PAT}".

{
  "mcpServers": {
    "Todos": {
      "command": "./DOWNLOAD/PATH/mcp-server",
      "args": [
        "start"
      ]
    }
  }
}

For a full list of server arguments, run:

npx -y --package @screenshothis/sdk -- mcp start --help

Requirements

For supported JavaScript runtimes, please consult RUNTIMES.md.

SDK Example Usage

Example

import { Screenshothis } from "@screenshothis/sdk";

const screenshothis = new Screenshothis();

async function run() {
  const result = await screenshothis.screenshots.take({
    apiKey: "sk_live_abcdef1234567890abcdef1234567890",
    url: "https://example.com",
    selector: ".main-content",
    blockRequests: "*.doubleclick.net\n"
      + "*.googletagmanager.com\n"
      + "*/analytics/*",
    blockResources: [
      "script",
      "stylesheet",
      "font",
    ],
    cacheKey: "homepage-desktop-light",
    userAgent:
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    headers: "User-Agent: MyBot/1.0\n"
      + "Authorization: Bearer token123\n"
      + "X-Custom-Header: value",
    cookies: "session_id=abc123; Domain=example.com; Path=/; Secure\n"
      + "user_pref=dark_mode; Max-Age=3600",
  });

  console.log(result);
}

run();

Available Resources and Operations

Available methods

health

get - Comprehensive health check
getReady - Readiness probe
getLive - Liveness probe

screenshots

take - Generate optimized website screenshot

Standalone functions

All the methods listed above are available as standalone functions. These functions are ideal for use in applications running in the browser, serverless runtimes or other environments where application bundle size is a primary concern. When using a bundler to build your application, all unused functionality will be either excluded from the final bundle or tree-shaken away.

To read more about standalone functions, check FUNCTIONS.md.

Available standalone functions

healthGet - Comprehensive health check
healthGetLive - Liveness probe
healthGetReady - Readiness probe
screenshotsTake - Generate optimized website screenshot

Retries

Some of the endpoints in this SDK support retries. If you use the SDK without any configuration, it will fall back to the default retry strategy provided by the API. However, the default retry strategy can be overridden on a per-operation basis, or across the entire SDK.

To change the default retry strategy for a single API call, simply provide a retryConfig object to the call:

import { Screenshothis } from "@screenshothis/sdk";

const screenshothis = new Screenshothis();

async function run() {
  const result = await screenshothis.screenshots.take({
    apiKey: "sk_live_abcdef1234567890abcdef1234567890",
    url: "https://example.com",
    selector: ".main-content",
    blockRequests: "*.doubleclick.net\n"
      + "*.googletagmanager.com\n"
      + "*/analytics/*",
    blockResources: [
      "script",
      "stylesheet",
      "font",
    ],
    cacheKey: "homepage-desktop-light",
    userAgent:
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    headers: "User-Agent: MyBot/1.0\n"
      + "Authorization: Bearer token123\n"
      + "X-Custom-Header: value",
    cookies: "session_id=abc123; Domain=example.com; Path=/; Secure\n"
      + "user_pref=dark_mode; Max-Age=3600",
  }, {
    retries: {
      strategy: "backoff",
      backoff: {
        initialInterval: 1,
        maxInterval: 50,
        exponent: 1.1,
        maxElapsedTime: 100,
      },
      retryConnectionErrors: false,
    },
  });

  console.log(result);
}

run();

If you'd like to override the default retry strategy for all operations that support retries, you can provide a retryConfig at SDK initialization:

import { Screenshothis } from "@screenshothis/sdk";

const screenshothis = new Screenshothis({
  retryConfig: {
    strategy: "backoff",
    backoff: {
      initialInterval: 1,
      maxInterval: 50,
      exponent: 1.1,
      maxElapsedTime: 100,
    },
    retryConnectionErrors: false,
  },
});

async function run() {
  const result = await screenshothis.screenshots.take({
    apiKey: "sk_live_abcdef1234567890abcdef1234567890",
    url: "https://example.com",
    selector: ".main-content",
    blockRequests: "*.doubleclick.net\n"
      + "*.googletagmanager.com\n"
      + "*/analytics/*",
    blockResources: [
      "script",
      "stylesheet",
      "font",
    ],
    cacheKey: "homepage-desktop-light",
    userAgent:
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    headers: "User-Agent: MyBot/1.0\n"
      + "Authorization: Bearer token123\n"
      + "X-Custom-Header: value",
    cookies: "session_id=abc123; Domain=example.com; Path=/; Secure\n"
      + "user_pref=dark_mode; Max-Age=3600",
  });

  console.log(result);
}

run();

Error Handling

ScreenshothisError is the base class for all HTTP error responses. It has the following properties:

Property	Type	Description
`error.message`	`string`	Error message
`error.statusCode`	`number`	HTTP response status code eg `404`
`error.headers`	`Headers`	HTTP response headers
`error.body`	`string`	HTTP body. Can be empty string if no body is returned.
`error.rawResponse`	`Response`	Raw HTTP response
`error.data$`		Optional. Some errors may contain structured data. See Error Classes.

Example

import { Screenshothis } from "@screenshothis/sdk";
import * as errors from "@screenshothis/sdk/models/errors";

const screenshothis = new Screenshothis();

async function run() {
  try {
    const result = await screenshothis.screenshots.take({
      apiKey: "sk_live_abcdef1234567890abcdef1234567890",
      url: "https://example.com",
      selector: ".main-content",
      blockRequests: "*.doubleclick.net\n"
        + "*.googletagmanager.com\n"
        + "*/analytics/*",
      blockResources: [
        "script",
        "stylesheet",
        "font",
      ],
      cacheKey: "homepage-desktop-light",
      userAgent:
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
      headers: "User-Agent: MyBot/1.0\n"
        + "Authorization: Bearer token123\n"
        + "X-Custom-Header: value",
      cookies: "session_id=abc123; Domain=example.com; Path=/; Secure\n"
        + "user_pref=dark_mode; Max-Age=3600",
    });

    console.log(result);
  } catch (error) {
    // The base class for HTTP error responses
    if (error instanceof errors.ScreenshothisError) {
      console.log(error.message);
      console.log(error.statusCode);
      console.log(error.body);
      console.log(error.headers);

      // Depending on the method different errors may be thrown
      if (error instanceof errors.ForbiddenError) {
        console.log(error.data$.error); // string
        console.log(error.data$.requestId); // string
      }
    }
  }
}

run();

Error Classes

Primary error:

ScreenshothisError: The base class for HTTP error responses.

Less common errors (11)

Network errors:

ConnectionError: HTTP client was unable to make a request to a server.
RequestTimeoutError: HTTP request timed out due to an AbortSignal signal.
RequestAbortedError: HTTP request was aborted by the client.
InvalidRequestError: Any input used to create a request is invalid.
UnexpectedClientError: Unrecognised or unexpected error.

Inherit from ScreenshothisError:

ForbiddenError: Quota exceeded. Status code 403. Applicable to 1 of 4 methods.*
InternalServerError: Internal server error. Status code 500. Applicable to 1 of 4 methods.*
HealthCheckError: Performs a comprehensive health check of all critical system components including database connectivity, storage availability, job queue status, and S3 functionality. Returns detailed status information for monitoring and alerting systems. Status code 503. Applicable to 1 of 4 methods.*
NotReadyError: Service is not ready. Status code 503. Applicable to 1 of 4 methods.*
NotAliveError: Service is not alive. Status code 503. Applicable to 1 of 4 methods.*
ResponseValidationError: Type mismatch between the data returned from the server and the structure expected by the SDK. See error.rawValue for the raw value and error.pretty() for a nicely formatted multi-line string.

* Check the method documentation to see if the error is applicable.

Server Selection

Override Server URL Per-Client

The default server can be overridden globally by passing a URL to the serverURL: string optional parameter when initializing the SDK client instance. For example:

import { Screenshothis } from "@screenshothis/sdk";

const screenshothis = new Screenshothis({
  serverURL: "https://api.screenshothis.com",
});

async function run() {
  const result = await screenshothis.screenshots.take({
    apiKey: "sk_live_abcdef1234567890abcdef1234567890",
    url: "https://example.com",
    selector: ".main-content",
    blockRequests: "*.doubleclick.net\n"
      + "*.googletagmanager.com\n"
      + "*/analytics/*",
    blockResources: [
      "script",
      "stylesheet",
      "font",
    ],
    cacheKey: "homepage-desktop-light",
    userAgent:
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    headers: "User-Agent: MyBot/1.0\n"
      + "Authorization: Bearer token123\n"
      + "X-Custom-Header: value",
    cookies: "session_id=abc123; Domain=example.com; Path=/; Secure\n"
      + "user_pref=dark_mode; Max-Age=3600",
  });

  console.log(result);
}

run();

Custom HTTP Client

The TypeScript SDK makes API calls using an HTTPClient that wraps the native Fetch API. This client is a thin wrapper around fetch and provides the ability to attach hooks around the request lifecycle that can be used to modify the request or handle errors and response.

The HTTPClient constructor takes an optional fetcher argument that can be used to integrate a third-party HTTP client or when writing tests to mock out the HTTP client and feed in fixtures.

The following example shows how to use the "beforeRequest" hook to to add a custom header and a timeout to requests and how to use the "requestError" hook to log errors:

import { Screenshothis } from "@screenshothis/sdk";
import { HTTPClient } from "@screenshothis/sdk/lib/http";

const httpClient = new HTTPClient({
  // fetcher takes a function that has the same signature as native `fetch`.
  fetcher: (request) => {
    return fetch(request);
  }
});

httpClient.addHook("beforeRequest", (request) => {
  const nextRequest = new Request(request, {
    signal: request.signal || AbortSignal.timeout(5000)
  });

  nextRequest.headers.set("x-custom-header", "custom value");

  return nextRequest;
});

httpClient.addHook("requestError", (error, request) => {
  console.group("Request Error");
  console.log("Reason:", `${error}`);
  console.log("Endpoint:", `${request.method} ${request.url}`);
  console.groupEnd();
});

const sdk = new Screenshothis({ httpClient });

Debugging

You can setup your SDK to emit debug logs for SDK requests and responses.

You can pass a logger that matches console's interface as an SDK option.

Warning

Beware that debug logging will reveal secrets, like API tokens in headers, in log messages printed to a console or files. It's recommended to use this feature only during local development and not in production.

import { Screenshothis } from "@screenshothis/sdk";

const sdk = new Screenshothis({ debugLogger: console });

You can also enable a default debug logger by setting an environment variable SCREENSHOTHIS_DEBUG to true.

Development

Maturity

This SDK is in beta, and there may be breaking changes between versions without a major version update. Therefore, we recommend pinning usage to a specific package version. This way, you can install the same version each time without breaking changes unless you are intentionally looking for the latest version.

Contributions

While we value open-source contributions to this SDK, this library is generated programmatically. Any manual changes added to internal files will be overwritten on the next generation. We look forward to hearing your feedback. Feel free to open a PR or an issue with a proof of concept and we'll do our best to include it in a future release.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.devcontainer		.devcontainer
.github/workflows		.github/workflows
.speakeasy		.speakeasy
docs		docs
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
CONTRIBUTING.md		CONTRIBUTING.md
FUNCTIONS.md		FUNCTIONS.md
README.md		README.md
RELEASES.md		RELEASES.md
RUNTIMES.md		RUNTIMES.md
USAGE.md		USAGE.md
codeSamples.yaml		codeSamples.yaml
eslint.config.mjs		eslint.config.mjs
jsr.json		jsr.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

@screenshothis/sdk

Summary

Table of Contents

SDK Installation

NPM

PNPM

Bun

Yarn

Model Context Protocol (MCP) Server

Requirements

SDK Example Usage

Example

Available Resources and Operations

health

screenshots

Standalone functions

Retries

Error Handling

Example

Error Classes

Server Selection

Override Server URL Per-Client

Custom HTTP Client

Debugging

Development

Maturity

Contributions

SDK Created by Speakeasy

About

Uh oh!

Releases 6

Packages

Contributors 4

Uh oh!

Languages

screenshothis/screenshothis-js

Folders and files

Latest commit

History

Repository files navigation

@screenshothis/sdk

Summary

Table of Contents

SDK Installation

NPM

PNPM

Bun

Yarn

Model Context Protocol (MCP) Server

Requirements

SDK Example Usage

Example

Available Resources and Operations

health

screenshots

Standalone functions

Retries

Error Handling

Example

Error Classes

Server Selection

Override Server URL Per-Client

Custom HTTP Client

Debugging

Development

Maturity

Contributions

SDK Created by Speakeasy

About

Resources

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 6

Packages 0

Contributors 4

Uh oh!

Languages

Packages