Skip to main content
Glama
Website-Screenshot-Online

WebsiteScreenshot.online MCP Server

Official

WebsiteScreenshot.online MCP 服务器

License: MIT Node >= 18.18 MCP

一个封装了 WebsiteScreenshot.online REST API 的 Model Context Protocol 服务器,将其以三个 MCP 工具的形式暴露出来,任何兼容 MCP 的主机(Claude Desktop、Claude Code、Cursor、Cline、Continue、Zed、Raycast 等)都可以直接调用。


⚡ 大多数用户不需要这个包

如果你只是想让 AI 助手截图和录制视频,请改用托管端点——零安装,只需一行 JSON:

https://websitescreenshot.online/api/mcp

请参阅各主机配置示例,了解 Claude Code、Claude Desktop、Cursor、Cline、Codex CLI、Gemini CLI、Continue、Windsurf 和 Zed 的配置方法。

只有在以下情况之一下,你才需要这个 npm 包:

  • 🛰️ 隔离或受限网络——你的 AI 主机无法直接访问 websitescreenshot.online。

  • 🏠 自托管 WebsiteScreenshot——你运行自己的实例,需要将 SCREENSHOT_API_BASE 指向它。

  • 🔧 你想审计/修改服务器——这与托管端点运行的代码相同,只是没有 Next.js 包装层。

在其他所有情况下,托管端点都严格更优(无需 Node 依赖、自动更新、零维护负担)。


Related MCP server: MCP Browser Screenshot Server

1. 前置要求


2. 获取 API 密钥

  1. 在 https://websitescreenshot.online 注册(GitHub OAuth 或邮箱)。

  2. 如有需要,切换到你的语言环境(例如 /en/dashboard/api-keys、/zh-CN/dashboard/api-keys)。

  3. 打开仪表盘 → API 密钥 → 创建新密钥。

  4. 复制密钥。它以 ws_ 开头,后跟 64 个十六进制字符(例如 ws_<your-key-here>),并且只显示一次——请妥善保管。

MCP 服务器只会从环境中读取密钥。它永远不会被记录、永远不会发送给模型,也永远不会被此包写入磁盘。


3. 安装与构建

git clone https://github.com/Website-Screenshot-Online/websitescreenshot-mcp.git
cd websitescreenshot-mcp
npm install
npm run build

就这样——build/index.js 是一个自包含的可执行文件,你可以将其接入任何 MCP 主机。


4. 配置你的 MCP 主机

Claude Desktop — claude_desktop_config.json

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

{
  "mcpServers": {
    "websitescreenshot": {
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": {
        "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key",
        "SCREENSHOT_REQUEST_TIMEOUT_MS": "60000"
      }
    }
  }
}

Claude Code — ~/.claude.json

{
  "mcpServers": {
    "websitescreenshot": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": {
        "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key"
      }
    }
  }
}

Cursor / VS Code(.cursor/mcp.json)

{
  "mcpServers": {
    "websitescreenshot": {
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": { "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key" }
    }
  }
}

Cline / Continue / Zed / Raycast

它们都接受相同的 command + args + env 结构——只需将它们指向 build/index.js 并通过 env 传入 SCREENSHOT_API_KEY。

编辑配置后重启主机,这三个工具就会出现在其工具面板中。


5. 自托管 WebsiteScreenshot

如果你运行自己的 WebsiteScreenshot 实例,请将服务器指向它:

"env": {
  "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key",
  "SCREENSHOT_API_BASE": "https://your-self-hosted.example.com"
}

6. 使用示例

你不需要手动编写 JSON——模型会替你完成。以下是模型实际会发送的请求体。

截图——落地页的视口

take_screenshot({
  url: "https://example.com",
  resolution: { width: 1440, height: 900 },
  format: "png",
  fullSize: false,
  blockAds: true,
  blockCookiesGdpr: true,
  delay: 1
})

截图——用于归档的整页 PDF

take_screenshot({
  url: "https://news.ycombinator.com",
  fullSize: true,
  format: "pdf"
})

同步视频(≤ 6 分钟)

record_website_video({
  url: "https://stripe.com",
  format: "mp4",
  scrollMode: "smooth",
  smoothScrollSpeed: "normal",
  resolution: { width: 1280, height: 720 }
})

异步视频 + 状态轮询

record_website_video({ url: "https://stripe.com", async: true })
// → { "success": true, "requestId": "f7c1..." }

check_video_status({ requestId: "f7c1..." })
// → { "status": "pending", ... }  // poll again
// → { "status": "completed", "videoUrl": "https://...", ... }

7. 工具参考

take_screenshot

字段

类型

默认值

说明

url

string (URL)

—

必填

resolution

{ width, height }

1920×1080

任意预设或自定义尺寸

fullSize

bool

false

捕获整个可滚动页面

format

png | jpeg | pdf

png

blockCookiesGdpr

bool

true

先关闭 Cookie 横幅

blockAds

bool

true

屏蔽广告网络

delay

int(0–10 秒)

1

捕获前等待时间

响应结构:

{
  "success": true,
  "imageUrl": "https://websitescreenshot.online/screenshots/abc.png",
  "filename": "abc.png"
}

record_website_video

字段与上表相同,另加:

字段

类型

默认值

format

webm | mp4 | gif

webm

scrollMode

step | smooth

step

smoothScrollSpeed

slow | normal | fast

normal

scrollDistance

int 100–1000(px)

500

scrollDelay

int 200–5000(ms)

1000

async

bool

false

同步响应:

{ "success": true, "videoUrl": "https://…/abc.webm", "filename": "abc.webm" }

异步响应:

{ "success": true, "requestId": "f7c1…" }

check_video_status

字段

类型

requestId

string

响应:

{
  "status": "completed",
  "siteUrl": "https://…",
  "result": { "success": true, "videoUrl": "https://…", "filename": "abc.webm" },
  "updatedAt": 1730000000000
}

status 为 pending | completed | error 之一。结果保留 24 小时后删除。


8. 错误处理

每个 API 错误都会映射为包含 code、status 和 error 字段的 MCP isError: true 结果。常见错误码:

代码

含义

UNAUTHORIZED

密钥缺失或已吊销

RATE_LIMITED

达到每密钥或每 IP 限制;请稍后重试

USAGE_LIMIT_EXCEEDED

套餐配额已用尽

INVALID_PARAMETERS

输入未通过 Zod 校验

INTERNAL_ERROR

服务端错误;请退避重试

TIMEOUT

请求耗时超过 SCREENSHOT_REQUEST_TIMEOUT_MS

NOT_FOUND

requestId 未知或已过期

速率限制:每个 API 密钥 每分钟 10 次截图和每分钟 5 次视频。


9. 环境变量

变量

是否必填

默认值

用途

SCREENSHOT_API_KEY

是

—

发送给 API 的 Bearer 令牌

SCREENSHOT_API_BASE

否

https://websitescreenshot.online

用于自托管/预发布环境的覆盖地址

SCREENSHOT_REQUEST_TIMEOUT_MS

否

60000

单请求中止超时时间(毫秒)


10. 开发

npm run dev       # tsx, hot reload stdio
npm run lint      # type-check only
npm run build     # emit build/index.js

要将开发服务器指向自托管 API:

SCREENSHOT_API_BASE=http://localhost:3000 \
SCREENSHOT_API_KEY=ws_dev_replace_me \
npm run dev

11. 许可证

MIT © Crownbyte LTD——参见 LICENSE。

网站:https://websitescreenshot.online 托管 MCP:https://websitescreenshot.online/api/mcp 文档:https://websitescreenshot.online/en/docs/mcp 支持:support@websitescreenshot.online

Available Tools

3 tools
check_video_statusA

Poll the status of an async video job created by record_website_video(async=true).

ParametersJSON Schema
NameRequiredDescriptionDefault
requestIdYesThe requestId returned from record_website_video with async=true.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden. It discloses that this is a polling operation on status, implying a non-destructive read. But it does not describe what the response looks like (e.g., possible statuses like pending/completed/failed), nor does it mention any polling cadence or eventual termination. The description is safe but minimal, lacking deeper behavioral context like potential errors or rate limits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single, focused sentence that front-loads the action and the source of the input. There is no extraneous wording; every part earns its place, making it easy to scan and understand.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple polling tool with one well-documented parameter and no output schema, the description adequately covers what the tool does and where the requestId originates. It could mention that polling is repeated until a terminal status is reached, but this is a minor gap given the minimal complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema provides full coverage (100%) and the requestId parameter has an explicit description stating it comes from record_website_video with async=true. The tool description adds no additional meaning beyond that, so baseline 3 applies. The schema already handles parameter semantics effectively.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states a specific verb ('poll'), the target resource ('status of an async video job'), and ties it explicitly to the creating tool, record_website_video with async=true. It distinguishes itself from siblings by stating its specific role in the async workflow, so an agent can easily identify its purpose.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies when to use it: after calling record_website_video with async=true and receiving a requestId. It gives context on where the requestId comes from. However, it does not explicitly state when not to use it (e.g., for sync jobs) or mention alternatives. Still, the context is clear enough for basic usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

record_website_videoA

Record a scrolling webm/mp4/gif capture of any public URL. Returns the public video URL (24h TTL). Pass async=true to receive a requestId; poll check_video_status until status=completed or status=error.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesFully-qualified URL of the page to record.
asyncNoIf true, return a requestId immediately and check status with check_video_status.
delayNo
formatNoOutput video container.webm
blockAdsNo
resolutionNoOptional {width,height}. Leave undefined to use the API default (1920x1080). Common presets: 1280x720 (HD 16:9), 1280x800 (16:10), 1280x1024 (5:4), 1366x768 (16:9), 1600x900 (HD+), 1920x1080 (Full HD), 1080x1080 (Square), 360x640 (Galaxy S10), 375x667 (iPhone 6/7/8), 375x812 (iPhone X), 414x736 (iPhone 6+/7+/8+), 414x896 (iPhone XR).
scrollModeNostep = pause-and-snap scrolling, smooth = continuous scroll.step
scrollDelayNoMilliseconds between scroll steps.
scrollDistanceNoPixels to move per scroll step.
blockCookiesGdprNo
smoothScrollSpeedNoHow fast the smooth scroll travels (only used when scrollMode=smooth).normal

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses key behaviors: returns a public video URL with 24h TTL and supports async polling. It implicitly indicates that sync mode returns the video URL directly, implying it waits for completion. It does not mention failure modes or rate limits, but it covers essential outcome and async flow.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with no fluff. The first states purpose and output; the second explains async usage. It is front-loaded and efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

While the tool has many parameters, the schema covers their specifics. The description mentions the async workflow and TTL, and references check_video_status. It does not mention limitations like recording duration or errors, nor guidance on when to use this vs take_screenshot, but the essential usage is covered with the schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 73%, so the schema already documents most parameters. The description adds meaningful guidance for the async parameter: 'Pass async=true to receive a requestId; poll check_video_status until status=completed or status=error,' which explains the workflow and connection to the polling tool. It also clarifies that the URL must be public, aiding interpretation of the url parameter.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action: 'Record a scrolling webm/mp4/gif capture of any public URL.' It distinguishes from the sibling take_screenshot by emphasizing 'scrolling' and 'video capture' with format options. It also mentions the output URL with TTL, providing a specific verb+resource.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives explicit guidance for async mode: 'Pass async=true to receive a requestId; poll check_video_status until status=completed or status=error.' It references the sibling check_video_status and explains the workflow. However, it does not explicitly contrast with take_screenshot or state when to prefer this tool over a screenshot, so it lacks a full when/when-not directive.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

take_screenshotA

Capture a PNG/JPEG/PDF screenshot of any public URL via WebsiteScreenshot.online. Returns the public image URL (24h TTL) and metadata. Use fullSize=true for full-page captures.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesFully-qualified URL of the page to capture.
delayNoSeconds to wait after navigation before taking the shot.
formatNoOutput image format.png
blockAdsNoBlock ad networks before capturing.
fullSizeNoCapture the full scrollable page instead of the viewport.
resolutionNoOptional {width,height}. Leave undefined to use the API default (1920x1080). Common presets: 1280x720 (HD 16:9), 1280x800 (16:10), 1280x1024 (5:4), 1366x768 (16:9), 1600x900 (HD+), 1920x1080 (Full HD), 1080x1080 (Square), 360x640 (Galaxy S10), 375x667 (iPhone 6/7/8), 375x812 (iPhone X), 414x736 (iPhone 6+/7+/8+), 414x896 (iPhone XR).
blockCookiesGdprNoBlock GDPR/cookie banners before capturing.

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the burden of behavioral disclosure. It adds useful details like 'Returns the public image URL (24h TTL) and metadata', but it does not explain what happens on failure, rate limits, authentication requirements, or how rendering works. This is partial transparency, not comprehensive.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two compact sentences with no filler. The core action and deliverable are front-loaded, followed by a useful usage tip. Every clause earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description gives essential output context (public URL, 24h TTL, metadata) and the schema fully documents parameters. It is not a 5 because there is no output schema and the description does not cover error cases or operational constraints like network reachability or rendering behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage for all parameters, so the schema already explains url, delay, format, blockAds, fullSize, resolution, and blockCookiesGdpr. The description only reinforces fullSize and the format list, adding no new parameter-level meaning beyond the schema. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Capture'), names the resource ('a PNG/JPEG/PDF screenshot of any public URL'), and mentions the service ('WebsiteScreenshot.online'). This clearly differentiates it from sibling tools like record_website_video and check_video_status, which are about video capture/status rather than static screenshots.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides a usage hint ('Use fullSize=true for full-page captures') and constrains to public URLs, but it does not explicitly state when to choose this tool over record_website_video or check_video_status, nor does it mention exclusions. Usage is implied rather than directly compared with alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 3 tool updatesv1.0.0
    • First observedcheck_video_status
    • First observedrecord_website_video
    • First observedtake_screenshot

TDQS

A4.2/5.0

Scored across 3 tools

Disambiguation5/5

Each tool has a clearly distinct role: take_screenshot captures an image, record_website_video captures a video, and check_video_status polls an async video job. There is no ambiguity about which tool to select for a given task.

Naming Consistency5/5

All tool names follow a consistent snake_case verb_noun pattern: take_screenshot, record_website_video, check_video_status. The pattern is predictable and clearly indicates the action being performed.

Tool Count5/5

Three tools is well-scoped for a screenshot/video capture server: one for screenshots, one for video, and one for async status polling. Each tool earns its place without unnecessary redundancy.

Completeness4/5

The core capture lifecycle is covered: synchronous screenshot capture, synchronous or asynchronous video capture, and async job polling. Minor gaps exist such as listing or canceling active video jobs, but the main workflows are fully usable.

Maintenance

ActivitySlowing
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers