ScreenshotOne MCP Server

ScreenshotOne.com - MCP-Server

Dieses Projekt bietet einen Model Context Protocol (MCP)-Server, der KI-Assistenten mit der ScreenshotOne.com -API verbindet, um Screenshots von Websites aufzunehmen.

Verfügbare Funktionen

[x] Machen Sie Screenshots von jeder URL
[x] HTML-Inhalte rendern und Screenshots machen
[x] Ansichtsfenstergröße und Geräteemulation anpassen
[x] Screenshots der gesamten Seite erstellen
[x] Wählen Sie bestimmte Elemente mithilfe von CSS-Selektoren aus
[x] Mehrere Ausgabeformate (PNG, JPEG, WebP, PDF)
[x] Blockieren Sie Anzeigen, Tracker und Cookie-Banner
[x] Benutzerdefiniertes CSS und JavaScript einfügen
[x] Warteverhalten und -zeitpunkt steuern

ScreenshotOne.com

Webseite
Spielplatz
API-Dokumente
Erstellen Sie hier Ihren API-Schlüssel

Unterstützte Transporte

[x] "stdio" -Transport - Standardtransport für die CLI-Nutzung
[x]"Streamable HTTP" -Transport - Für webbasierte Clients
- [ ] Implementieren Sie Auth ("Authorization"-Header mit Bearer <token> )
[ ] ~~"sse"-Transport~~ (Veraltet)
[ ] Tests schreiben

Anwendung

Befehlszeilenschnittstelle (CLI)

# Take a screenshot of a URL
npm run dev:cli -- take-screenshot --url "https://example.com" --access-key "your-access-key"

# Take a screenshot with custom viewport
npm run dev:cli -- take-screenshot --url "https://example.com" --viewport-width 1920 --viewport-height 1080

# Capture a full page screenshot
npm run dev:cli -- take-screenshot --url "https://example.com" --full-page

# Save the screenshot to a file
npm run dev:cli -- take-screenshot --url "https://example.com" --output screenshot.png

# Block ads and trackers
npm run dev:cli -- take-screenshot --url "https://example.com" --block-ads --block-trackers --block-cookie-banners

# ----------------------------------------------
# UPLOAD SCREENSHOT TO CLOUDFLARE
# REMEMBER TO SET THE ENVIRONMENT VARIABLES
# > See example at ".env.example" file
# ----------------------------------------------

# Take a screenshot and upload it to Cloudflare
npm run dev:cli -- take-screenshot --url https://example.com --upload

# Take a screenshot with a custom filename
npm run dev:cli -- take-screenshot --url https://example.com --upload --upload-filename my-screenshot

# Take a screenshot with upload debugging enabled
npm run dev:cli -- take-screenshot --url https://example.com --upload --upload-debug

MCP-Einrichtung

Für die lokale Konfiguration mit stdio-Transport:

{
  "mcpServers": {
    "screenshotone": {
      "command": "node",
      "args": ["/path/to/screenshotone-mcp-server/dist/index.js"],
      "transportType": "stdio"
    }
  }
}

Für die Remote-HTTP-Konfiguration:

{
  "mcpServers": {
    "screenshotone": {
      "type": "http",
      "url": "http://localhost:8080/mcp"
    }
  }
}

Umgebungsvariablen für den HTTP-Transport:

Sie können den HTTP-Server mit diesen Umgebungsvariablen konfigurieren:

MCP_HTTP_HOST : Der Host, an den die Bindung erfolgen soll (Standard: 127.0.0.1 )
MCP_HTTP_PORT : Der Port, auf dem gewartet werden soll (Standard: 8080 )
MCP_HTTP_PATH : Der Endpunktpfad (Standard: /mcp )

Quellcodeübersicht

Was ist MCP?

Model Context Protocol (MCP) ist ein offener Standard, der es KI-Systemen ermöglicht, sich sicher und kontextbezogen mit externen Tools und Datenquellen zu verbinden.

Dieses Boilerplate implementiert die MCP-Spezifikation mit einer sauberen, geschichteten Architektur, die erweitert werden kann, um benutzerdefinierte MCP-Server für jede API oder Datenquelle zu erstellen.

Warum diesen Standardtext verwenden?

Produktionsreife Architektur : Folgt dem gleichen Muster wie veröffentlichte MCP-Server, mit klarer Trennung zwischen CLI, Tools, Controllern und Diensten.
Typsicherheit : Erstellt mit TypeScript für ein verbessertes Entwicklererlebnis, Codequalität und Wartbarkeit.
Funktionierendes Beispiel : Enthält ein vollständig implementiertes IP-Lookup-Tool, das das komplette Muster von der CLI- bis zur API-Integration demonstriert.
Testframework : Wird mit einer Testinfrastruktur für Unit- und CLI-Integrationstests geliefert, einschließlich Abdeckungsberichten.
Entwicklungstools : Enthält ESLint, Prettier, TypeScript und andere hochwertige Tools, die für die MCP-Serverentwicklung vorkonfiguriert sind.

Erste Schritte

Voraussetzungen

Node.js (>=18.x): Herunterladen
Git : Zur Versionskontrolle

Schritt 1: Klonen und installieren

# Clone the repository
git clone https://github.com/mrgoonie/screenshotone-mcp-server.git
cd screenshotone-mcp-server

# Install dependencies
npm install

Schritt 2: Entwicklungsserver ausführen

Starten Sie den Server im Entwicklungsmodus mit stdio-Transport (Standard):

npm run dev:server

Oder mit dem Streamable HTTP-Transport:

npm run dev:server:http

Dadurch wird der MCP-Server mit Hot-Reloading gestartet und der MCP Inspector unter http://localhost:5173 aktiviert.

⚙️ Proxyserver lauscht auf Port 6277 🔍 MCP Inspector ist unter http://127.0.0.1:6274 aktiv

Bei Verwendung des HTTP-Transports ist der Server standardmäßig unter http://127.0.0.1:8080/mcp verfügbar.

Schritt 3: Testen Sie das Screenshot-Tool

Machen Sie mit der CLI einen Screenshot:

# Basic screenshot
npm run dev:cli -- take-screenshot --url "https://example.com" --access-key "your-access-key"

# Advanced options
npm run dev:cli -- take-screenshot --url "https://example.com" --format png --viewport-width 1920 --viewport-height 1080 --full-page --output screenshot.png

Architektur

Dieser Standardtext folgt einem klaren, geschichteten Architekturmuster, das Belange trennt und die Wartbarkeit fördert.

Projektstruktur

src/
├── cli/              # Command-line interfaces
├── controllers/      # Business logic
├── resources/        # MCP resources: expose data and content from your servers to LLMs
├── services/         # External API interactions
├── tools/            # MCP tool definitions
├── types/            # Type definitions
├── utils/            # Shared utilities
└── index.ts          # Entry point

Ebenen und Verantwortlichkeiten

CLI-Schicht ( `src/cli/*.cli.ts` )

Zweck : Definieren Sie Befehlszeilenschnittstellen, die Argumente analysieren und Controller aufrufen
Benennung : Dateien sollten <feature>.cli.ts heißen
Testen : CLI-Integrationstests in <feature>.cli.test.ts

Tools-Ebene ( `src/tools/*.tool.ts` )

Zweck : Definieren Sie MCP-Tools mit Schemata und Beschreibungen für KI-Assistenten
Benennung : Dateien sollten <feature>.tool.ts mit Typen in <feature>.types.ts benannt werden
Muster : Jedes Tool sollte zod zur Argumentvalidierung verwenden

Controller-Ebene ( `src/controllers/*.controller.ts` )

Zweck : Implementieren Sie Geschäftslogik, behandeln Sie Fehler und formatieren Sie Antworten
Benennung : Dateien sollten <feature>.controller.ts heißen
Muster : Sollte standardisierte ControllerResponse Objekte zurückgeben

Serviceebene ( `src/services/*.service.ts` )

Zweck : Interaktion mit externen APIs oder Datenquellen
Benennung : Dateien sollten <feature>.service.ts heißen
Muster : Reine API-Interaktionen mit minimaler Logik

Utils-Ebene ( `src/utils/*.util.ts` )

Zweck : Bereitstellung gemeinsamer Funktionen für die gesamte Anwendung
Wichtige Dienstprogramme :
- logger.util.ts : Strukturiertes Protokollieren
- error.util.ts : Fehlerbehandlung und Standardisierung
- formatter.util.ts : Markdown-Formatierungshilfen

Entwicklungshandbuch

Entwicklungsskripte

# Start server in development mode (hot-reload & inspector)
npm run dev:server

# Run CLI in development mode
npm run dev:cli -- [command] [args]

# Build the project
npm run build

# Start server in production mode
npm run start:server

# Run CLI in production mode
npm run start:cli -- [command] [args]

Testen

# Run all tests
npm test

# Run specific tests
npm test -- src/path/to/test.ts

# Generate test coverage report
npm run test:coverage

Codequalität

# Lint code
npm run lint

# Format code with Prettier
npm run format

# Check types
npm run typecheck

Erstellen benutzerdefinierter Tools

Befolgen Sie diese Schritte, um dem Server Ihre eigenen Tools hinzuzufügen:

1. Service-Layer definieren

Erstellen Sie einen neuen Dienst in src/services/ um mit Ihrer externen API zu interagieren:

// src/services/example.service.ts
import { Logger } from '../utils/logger.util.js';

const logger = Logger.forContext('services/example.service.ts');

export async function getData(param: string): Promise<any> {
	logger.debug('Getting data', { param });
	// API interaction code here
	return { result: 'example data' };
}

2. Controller erstellen

Fügen Sie einen Controller in src/controllers/ hinzu, um die Geschäftslogik zu handhaben:

// src/controllers/example.controller.ts
import { Logger } from '../utils/logger.util.js';
import * as exampleService from '../services/example.service.js';
import { formatMarkdown } from '../utils/formatter.util.js';
import { handleControllerError } from '../utils/error-handler.util.js';
import { ControllerResponse } from '../types/common.types.js';

const logger = Logger.forContext('controllers/example.controller.ts');

export interface GetDataOptions {
	param?: string;
}

export async function getData(
	options: GetDataOptions = {},
): Promise<ControllerResponse> {
	try {
		logger.debug('Getting data with options', options);

		const data = await exampleService.getData(options.param || 'default');

		const content = formatMarkdown(data);

		return { content };
	} catch (error) {
		throw handleControllerError(error, {
			entityType: 'ExampleData',
			operation: 'getData',
			source: 'controllers/example.controller.ts',
		});
	}
}

3. Implementieren Sie das MCP-Tool

Erstellen Sie eine Tooldefinition in src/tools/ :

// src/tools/example.tool.ts
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';
import { Logger } from '../utils/logger.util.js';
import { formatErrorForMcpTool } from '../utils/error.util.js';
import * as exampleController from '../controllers/example.controller.js';

const logger = Logger.forContext('tools/example.tool.ts');

const GetDataArgs = z.object({
	param: z.string().optional().describe('Optional parameter'),
});

type GetDataArgsType = z.infer<typeof GetDataArgs>;

async function handleGetData(args: GetDataArgsType) {
	try {
		logger.debug('Tool get_data called', args);

		const result = await exampleController.getData({
			param: args.param,
		});

		return {
			content: [{ type: 'text' as const, text: result.content }],
		};
	} catch (error) {
		logger.error('Tool get_data failed', error);
		return formatErrorForMcpTool(error);
	}
}

export function register(server: McpServer) {
	server.tool(
		'get_data',
		`Gets data from the example API, optionally using \`param\`.
Use this to fetch example data. Returns formatted data as Markdown.`,
		GetDataArgs.shape,
		handleGetData,
	);
}

4. CLI-Unterstützung hinzufügen

Erstellen Sie einen CLI-Befehl in src/cli/ :

// src/cli/example.cli.ts
import { program } from 'commander';
import { Logger } from '../utils/logger.util.js';
import * as exampleController from '../controllers/example.controller.js';
import { handleCliError } from '../utils/error-handler.util.js';

const logger = Logger.forContext('cli/example.cli.ts');

program
	.command('get-data')
	.description('Get example data')
	.option('--param <value>', 'Optional parameter')
	.action(async (options) => {
		try {
			logger.debug('CLI get-data called', options);

			const result = await exampleController.getData({
				param: options.param,
			});

			console.log(result.content);
		} catch (error) {
			handleCliError(error);
		}
	});

5. Komponenten registrieren

Aktualisieren Sie die Einstiegspunkte, um Ihre neuen Komponenten zu registrieren:

// In src/cli/index.ts
import '../cli/example.cli.js';

// In src/index.ts (for the tool)
import exampleTool from './tools/example.tool.js';
// Then in registerTools function:
exampleTool.register(server);

Debugging-Tools

MCP-Inspektor

Greifen Sie auf den visuellen MCP-Inspektor zu, um Ihre Tools zu testen und Anforderungs-/Antwortdetails anzuzeigen:

Führen Sie npm run dev:server
Öffnen Sie http://localhost:5173 in Ihrem Browser
Testen Sie Ihre Tools und zeigen Sie Protokolle direkt in der Benutzeroberfläche an

Serverprotokolle

Aktivieren Sie Debug-Protokolle für die Entwicklung:

# Set environment variable
DEBUG=true npm run dev:server

# Or configure in ~/.mcp/configs.json

Veröffentlichen Ihres MCP-Servers

Wenn Sie bereit sind, Ihren benutzerdefinierten MCP-Server zu veröffentlichen:

Aktualisieren Sie package.json mit Ihren Details
Aktualisieren Sie README.md mit Ihrer Tool-Dokumentation
Erstellen Sie das Projekt: npm run build
Testen Sie den Produktionsbuild: npm run start:server
Auf npm veröffentlichen: npm publish

Lizenz

ISC-Lizenz

{
	"screenshotone": {
		"environments": {
			"DEBUG": "true",
			"SCREENSHOTONE_ACCESS_KEY": "value"
		}
	}
}

Hinweis: Aus Gründen der Abwärtskompatibilität erkennt der Server auch Konfigurationen unter dem vollständigen Paketnamen ( screenshotone-mcp-server ) oder dem Paketnamen ohne Gültigkeitsbereich ( screenshotone-mcp-server ), wenn der Schlüssel screenshotone nicht gefunden wird. Für neue Konfigurationen wird jedoch die Verwendung des kurzen Schlüssels screenshotone empfohlen.

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Verbindet KI-Assistenten mit der ScreenshotOne.com-API zum Aufnehmen von Website-Screenshots mit anpassbaren Optionen, einschließlich Ansichtsfenstergröße, ganzseitiger Erfassung und mehreren Ausgabeformaten.

Related MCP Servers

MCP Screenshot Server
sethbang
-
security
F
license
-
quality
Enables capturing screenshots of web pages and local HTML files through a simple MCP tool interface using Puppeteer with configurable options for dimensions and output paths.
Last updated -
1
0
4
JavaScript
ScreenshotOne MCP Serverofficial
screenshotone
A
security
A
license
A
quality
An official MCP server implementation that allows AI assistants to capture website screenshots through the ScreenshotOne API, enabling visual context from web pages during conversations.
Last updated -
1
4
21
TypeScript
MIT License
Screenshot MCP Server
codingthefuturewithai
-
security
F
license
-
quality
Enables AI tools to capture and process screenshots of a user's screen, allowing AI assistants to see and analyze what the user is looking at through a simple MCP interface.
Last updated -
1
Python
YouTube MCP
tsubouchi
-
security
F
license
-
quality
Automatically captures and processes screenshots from YouTube videos and Shorts at specified intervals, supporting customizable screenshot timing and providing API endpoints for image management.
Last updated -

View all related MCP servers