WebsiteScreenshot.online MCP Server
OfficialWebsiteScreenshot.online MCP 서버
Model Context Protocol 서버로, WebsiteScreenshot.online REST API를 래핑하여 MCP 호환 호스트(Claude Desktop, Claude Code, Cursor, Cline, Continue, Zed, Raycast 등)에서 직접 호출할 수 있는 세 가지 MCP 도구로 노출합니다.
⚡ 대부분의 사용자는 이 패키지가 필요 없습니다
AI 어시스턴트가 스크린샷을 찍고 비디오를 녹화하기만 하면 된다면, 호스팅 엔드포인트를 사용하세요 — 설치 없이 JSON 한 줄이면 됩니다:
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. 사전 요구 사항
Node.js ≥ 18.18 (LTS 권장)
무료 또는 유료 WebsiteScreenshot.online 계정
WebsiteScreenshot.online API 키 (§ 2 참조)
2. API 키 발급
https://websitescreenshot.online에서 가입합니다 (GitHub OAuth 또는 이메일).
필요한 경우 로케일을 전환합니다 (예:
/en/dashboard/api-keys,/zh-CN/dashboard/api-keys).대시보드 → API 키 → 새 키 만들기를 엽니다.
키를 복사합니다. 키는
ws_로 시작하고 64자리 16진수가 이어집니다 (예: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를
가리키고 SCREENSHOT_API_KEY를 env로 전달하기만 하면 됩니다.
구성 파일을 편집한 후 호스트를 재시작하면 세 가지 도구가 도구 팔레트에 표시됩니다.
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
필드 | 유형 | 기본값 | 참고 사항 |
| string (URL) | — | 필수 |
|
| 1920×1080 | 모든 프리셋 또는 사용자 지정 크기 |
| bool |
| 스크롤 가능한 전체 페이지 캡처 |
|
|
| |
| bool |
| 먼저 쿠키 배너 닫기 |
| bool |
| 광고 네트워크 차단 |
| int (0–10초) |
| 캡처 전 대기 시간 |
응답 형식:
{
"success": true,
"imageUrl": "https://websitescreenshot.online/screenshots/abc.png",
"filename": "abc.png"
}record_website_video
위 필드와 동일하며 다음이 추가됩니다:
필드 | 유형 | 기본값 |
|
|
|
|
|
|
|
|
|
| int 100–1000 (px) |
|
| int 200–5000 (ms) |
|
| bool |
|
동기 응답:
{ "success": true, "videoUrl": "https://…/abc.webm", "filename": "abc.webm" }비동기 응답:
{ "success": true, "requestId": "f7c1…" }check_video_status
필드 | 유형 |
| 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 결과로 매핑됩니다. 일반적인 코드:
코드 | 의미 |
| 키 누락 또는 폐기됨 |
| 키별 또는 IP별 한도 도달; 나중에 재시도 |
| 플랜 할당량 소진 |
| 입력이 Zod 검증에 실패함 |
| 서버 측 버그; 백오프 후 재시도 |
| 요청이 |
|
|
속도 제한: API 키당 스크린샷 10개/분 및 비디오 5개/분.
9. 환경 변수
변수 | 필수 | 기본값 | 용도 |
| 예 | — | API에 전송되는 Bearer 토큰 |
| 아니요 |
| 자체 호스팅 / 스테이징용 재정의 |
| 아니요 |
| 요청별 중단 제한 시간 (ms) |
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 dev11. 라이선스
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 toolscheck_video_statusA
Poll the status of an async video job created by record_website_video(async=true).
| Name | Required | Description | Default |
|---|---|---|---|
| requestId | Yes | The requestId returned from record_website_video with async=true. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Fully-qualified URL of the page to record. | |
| async | No | If true, return a requestId immediately and check status with check_video_status. | |
| delay | No | ||
| format | No | Output video container. | webm |
| blockAds | No | ||
| resolution | No | Optional {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). | |
| scrollMode | No | step = pause-and-snap scrolling, smooth = continuous scroll. | step |
| scrollDelay | No | Milliseconds between scroll steps. | |
| scrollDistance | No | Pixels to move per scroll step. | |
| blockCookiesGdpr | No | ||
| smoothScrollSpeed | No | How fast the smooth scroll travels (only used when scrollMode=smooth). | normal |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Fully-qualified URL of the page to capture. | |
| delay | No | Seconds to wait after navigation before taking the shot. | |
| format | No | Output image format. | png |
| blockAds | No | Block ad networks before capturing. | |
| fullSize | No | Capture the full scrollable page instead of the viewport. | |
| resolution | No | Optional {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). | |
| blockCookiesGdpr | No | Block GDPR/cookie banners before capturing. |
TDQS
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.
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.
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.
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.
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.
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.
3 tool updates
v1.0.0- First observed
check_video_status - First observed
record_website_video - First observed
take_screenshot
TDQS
Scored across 3 tools
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.
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.
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.
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
Related MCP Connectors
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Screenshots of any public web page as PNG, JPEG, WebP, PDF or a scrolling video.
Screenshot API for AI agents. Any public page as image or PDF, banners hidden, 227 countries.
Screenshot any URL/HTML as PNG/JPEG/WebP, or read it as clean Markdown/text for LLMs.
Related MCP Servers
- AlicenseAqualityFmaintenanceCaptures screenshots of web pages using Puppeteer, allowing AI agents to visually verify web applications and see their progress when generating web apps.556MIT
- AlicenseAqualityDmaintenanceEnables AI assistants to capture screenshots of web pages using automated browser sessions. Supports full-page and element-specific screenshots, device simulation, and JavaScript execution for comprehensive web testing and monitoring.615 npmMIT
- AlicenseAqualityDmaintenanceEnables AI assistants to capture screenshots of any public URL, returning images inline with page metadata. Supports full-page captures, custom wait times, and timeouts.124 npmMIT

site-shot-mcpofficial
AlicenseBqualityBmaintenanceEnables AI agents to capture full-page or viewport screenshots of any web page with options for ad removal, cookie banner blocking, and proxy country selection.273 npm3MIT