render-website-screenshot
Capture and return website screenshots as images or JSON with cache URLs. Block ads, banners, and customize image quality or full-page rendering for enhanced visual context.
Instructions
Renders a screenshot of a website and returns it as an image or a JSON with the cache URL (preferred for full-page screenshots).
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| block_ads | No | Block ads | |
| block_banners | No | Block cookie, GDPR, and other banners and popups | |
| cache | No | Cache the screenshot to get the cache URL | |
| cache_key | No | Cache key to generate a new cache URL for each screenshot, e.g. timestamp | |
| full_page | No | Render the full page screenshot of the website | |
| image_quality | No | Image quality | |
| response_type | No | Response type: JSON (when the cache URL is needed) or the image itself | by_format |
| url | Yes | URL of the website to screenshot |
Implementation Reference
- src/index.ts:72-115 (handler)The handler function that executes the tool logic: constructs the ScreenshotOne API URL based on parameters, fetches the screenshot using the helper function, handles errors, and returns the image as base64 or text error.async ({ url, block_banners, block_ads, image_quality, full_page, response_type, cache, cache_key, }) => { let screenshotUrl = `${SCREENSHOTONE_BASE_URL}/take?url=${encodeURIComponent( url )}&response_type=${response_type}&cache=${cache}&format=jpeg&image_quality=${image_quality}&access_key=${apiKey}&block_cookie_banners=${block_banners}&block_banners_by_heuristics=${block_banners}&block_ads=${block_ads}&full_page=${full_page}`; if (cache && cache_key) { screenshotUrl += `&cache_key=${cache_key}`; } const screenshot = await makeScreenshotOneRequest<ArrayBuffer>( screenshotUrl ); if ("error" in screenshot) { return { content: [ { type: "text", text: `Failed to retrieve screenshot for ${url}: ${screenshot.error}`, }, ], }; } return { content: [ { type: "image", mimeType: "image/jpeg", data: Buffer.from(screenshot).toString("base64"), }, ], }; } );
- src/index.ts:37-71 (schema)Zod schema defining the input parameters and their validation, defaults, and descriptions for the tool.{ url: z.string().url().describe("URL of the website to screenshot"), block_banners: z .boolean() .default(true) .describe("Block cookie, GDPR, and other banners and popups"), block_ads: z.boolean().default(true).describe("Block ads"), image_quality: z .number() .min(1) .max(100) .default(80) .describe("Image quality"), full_page: z .boolean() .default(false) .describe("Render the full page screenshot of the website"), response_type: z .enum(["json", "by_format"]) .default("by_format") .describe( "Response type: JSON (when the cache URL is needed) or the image itself" ), cache: z .boolean() .default(false) .describe("Cache the screenshot to get the cache URL"), cache_key: z .string() .regex(/^[a-zA-Z0-9]+$/) .optional() .describe( "Cache key to generate a new cache URL for each screenshot, e.g. timestamp" ), },
- src/index.ts:34-36 (registration)Registration of the "render-website-screenshot" tool on the MCP server, including name, description, schema, and handler.server.tool( "render-website-screenshot", "Renders a screenshot of a website and returns it as an image or a JSON with the cache URL (preferred for full-page screenshots).",
- src/index.ts:15-32 (helper)Helper function to make requests to the ScreenshotOne API, handling fetch errors and returning array buffer or error object.async function makeScreenshotOneRequest<T>( url: string ): Promise<T | { error: string }> { try { const response = await fetch(url); if (!response.ok) { return { error: `Failed to render a screenshot status: ${response.status}`, }; } return (await response.arrayBuffer()) as T; } catch (error) { return { error: `Failed to render a screenshot: ${error}`, }; } }