WebsiteScreenshot.online MCP-Server

Ein Model Context Protocol-Server, der die WebsiteScreenshot.online-REST-API kapselt und als drei MCP-Tools bereitstellt, die jeder MCP-kompatible Host (Claude Desktop, Claude Code, Cursor, Cline, Continue, Zed, Raycast, …) direkt aufrufen kann.

⚡ Die meisten Benutzer benötigen dieses Paket nicht

Wenn Sie nur möchten, dass Ihr KI-Assistent Screenshots aufnimmt und Videos aufzeichnet, verwenden Sie stattdessen den gehosteten Endpunkt — keine Installation, eine Zeile JSON:

https://websitescreenshot.online/api/mcp

Siehe die konfigurationsbeispiele pro Host für Claude Code, Claude Desktop, Cursor, Cline, Codex CLI, Gemini CLI, Continue, Windsurf und Zed.

Sie benötigen dieses npm-Paket nur, wenn einer der folgenden Punkte zutrifft:

• 🛰️ Abgeschottetes oder eingeschränktes Netzwerk — Ihr KI-Host kann websitescreenshot.online nicht direkt erreichen.

• 🏠 Selbst gehostetes WebsiteScreenshot — Sie betreiben eine eigene Instanz und benötigen SCREENSHOT_API_BASE, die darauf verweist.

• 🔧 Sie möchten den Server prüfen / ändern — dies ist derselbe Code, den auch der gehostete Endpunkt ausführt, nur ohne den Next.js-Wrapper.

In jedem anderen Fall ist der gehostete Endpunkt strikt besser (keine Node-Abhängigkeit, automatische Updates, kein Wartungsaufwand).

Related MCP server: MCP Browser Screenshot Server

1. Voraussetzungen

• Node.js ≥ 18.18 (LTS empfohlen)

• Ein kostenloses oder kostenpflichtiges WebsiteScreenshot.online-Konto

• Ein WebsiteScreenshot.online-API-Schlüssel (siehe § 2)

2. API-Schlüssel erhalten

1. Registrieren Sie sich unter https://websitescreenshot.online (GitHub-OAuth oder E-Mail).

2. Wechseln Sie bei Bedarf zu Ihrer Sprache (z. B. /en/dashboard/api-keys, /zh-CN/dashboard/api-keys).

3. Öffnen Sie Dashboard → API-Schlüssel → Neuen Schlüssel erstellen.

4. Kopieren Sie den Schlüssel. Er beginnt mit ws_ gefolgt von 64 Hex-Zeichen (z. B. ws_<ihr-schlüssel-hier>) und wird nur einmal angezeigt — bewahren Sie ihn an einem sicheren Ort auf.

Der MCP-Server liest den Schlüssel ausschließlich aus der Umgebung. Er wird niemals protokolliert, niemals an das Modell gesendet und von diesem Paket niemals auf die Festplatte geschrieben.

3. Installation & Build

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

Das war's — build/index.js ist eine eigenständige ausführbare Datei, die Sie in jeden MCP-Host einbinden können.

4. MCP-Host konfigurieren

Claude Desktop — claude_desktop_config.json

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) oder %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

Alle akzeptieren dieselbe command + args + env-Struktur — weisen Sie sie einfach auf build/index.js und übergeben Sie SCREENSHOT_API_KEY über env.

Starten Sie den Host nach der Bearbeitung seiner Konfiguration neu, und die drei Tools erscheinen in seiner Tool-Palette.

5. Selbst gehostetes WebsiteScreenshot

Wenn Sie Ihre eigene WebsiteScreenshot-Instanz betreiben, weisen Sie den Server darauf hin:

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

6. Verwendungsbeispiele

Sie schreiben das JSON nicht manuell — das Modell tut das. Dies sind die Nutzlasten, die das Modell tatsächlich senden wird.

Screenshot — Viewport einer Landingpage

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

Screenshot — Ganzseitiges PDF für die Archivierung

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

Synchrones Video (≤ 6 Min.)

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

Asynchrones Video + Statusabfrage

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. Tool-Referenz

take_screenshot

Antwortstruktur:

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

record_website_video

Dieselben Felder wie oben plus:

Synchrone Antwort:

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

Asynchrone Antwort:

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

check_video_status

Antwort:

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

status ist einer von pending | completed | error. Ergebnisse werden 24 Stunden lang aufbewahrt und dann gelöscht.

8. Fehlerbehandlung

Jeder API-Fehler wird auf ein MCP-Ergebnis mit isError: true abgebildet, das die Felder code, status und error enthält. Häufige Codes:

Ratenlimits: 10 Screenshots / Min. und 5 Videos / Min. pro API-Schlüssel.

9. Umgebungsvariablen

10. Entwicklung

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

Um den Dev-Server auf eine selbst gehostete API auszurichten:

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

11. Lizenz

MIT © Crownbyte LTD — siehe LICENSE.

Website: https://websitescreenshot.online Gehostetes MCP: https://websitescreenshot.online/api/mcp Dokumentation: https://websitescreenshot.online/en/docs/mcp Support: support@websitescreenshot.online