СкриншотOne MCP Server

ScreenshotOne.com - MCP-сервер

Этот проект предоставляет сервер Model Context Protocol (MCP), который подключает помощников на основе искусственного интеллекта к API ScreenshotOne.com для создания снимков экрана веб-сайтов.

Доступные функции

[x] Сделайте скриншоты любого URL
[x] Отображение HTML-контента и создание снимков экрана
[x] Настройте размер области просмотра и эмуляцию устройства
[x] Делайте снимки экрана всей страницы
[x] Выберите определенные элементы с помощью селекторов CSS
[x] Несколько форматов вывода (PNG, JPEG, WebP, PDF)
[x] Блокировка рекламы, трекеров и баннеров cookie
[x] Внедрение пользовательского CSS и JavaScript
[x] Управление поведением и временем ожидания

СкриншотOne.com

Поддерживаемые транспорты

[x] "stdio" transport — транспорт по умолчанию для использования CLI
[x] Транспорт«Streamable HTTP» — для веб-клиентов
- [ ] Реализовать аутентификацию (заголовки «Authorization» с Bearer <token> )
[ ] ~~"sse" транспорт~~ (Устаревшее)
[ ] Написать тесты

Как использовать

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

Настройка МКП

Для локальной конфигурации с транспортом stdio:

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

Для удаленной конфигурации HTTP:

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

Переменные среды для HTTP-транспорта:

Вы можете настроить HTTP-сервер, используя следующие переменные среды:

MCP_HTTP_HOST : Хост для привязки (по умолчанию: 127.0.0.1 )
MCP_HTTP_PORT : Порт для прослушивания (по умолчанию: 8080 )
MCP_HTTP_PATH : Путь к конечной точке (по умолчанию: /mcp )

Обзор исходного кода

Что такое МКП?

Model Context Protocol (MCP) — открытый стандарт, позволяющий системам искусственного интеллекта безопасно и контекстно подключаться к внешним инструментам и источникам данных.

Этот шаблон реализует спецификацию MCP с помощью чистой многоуровневой архитектуры, которую можно расширить для создания пользовательских серверов MCP для любого API или источника данных.

Зачем использовать этот шаблон?

Архитектура, готовая к производству : следует той же схеме, которая используется в опубликованных серверах MCP, с четким разделением между CLI, инструментами, контроллерами и службами.
Безопасность типов : создано с использованием TypeScript для улучшения опыта разработки, качества кода и удобства обслуживания.
Рабочий пример : включает в себя полностью реализованный инструмент поиска IP-адресов, демонстрирующий полную модель от CLI до интеграции API.
Тестовая среда : поставляется с тестовой инфраструктурой для модульных и интеграционных тестов CLI, включая отчеты о покрытии.
Инструменты разработки : включают ESLint, Prettier, TypeScript и другие качественные инструменты, предварительно настроенные для разработки сервера MCP.

Начиная

Предпосылки

Node.js (>=18.x): Загрузить
Git : для контроля версий

Шаг 1: Клонирование и установка

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

# Install dependencies
npm install

Шаг 2: Запуск сервера разработки

Запустите сервер в режиме разработки с использованием транспорта stdio (по умолчанию):

npm run dev:server

Или с помощью потокового HTTP-транспорта:

npm run dev:server:http

Это запустит сервер MCP с горячей перезагрузкой и включит MCP Inspector по адресу http://localhost:5173 .

⚙️ Прокси-сервер прослушивает порт 6277 🔍 MCP Inspector запущен и работает по адресу http://127.0.0.1:6274

При использовании HTTP-транспорта сервер по умолчанию будет доступен по адресу http://127.0.0.1:8080/mcp .

Шаг 3: Тестирование инструмента создания скриншотов

Сделайте снимок экрана с помощью CLI:

# 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

Архитектура

Этот шаблон следует четкой, многоуровневой архитектурной модели, которая разделяет проблемы и способствует удобству обслуживания.

Структура проекта

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

Уровни и обязанности

Уровень CLI ( `src/cli/*.cli.ts` )

Цель : определение интерфейсов командной строки, которые анализируют аргументы и вызывают контроллеры.
Именование : Файлы должны называться <feature>.cli.ts
Тестирование : тесты интеграции CLI в <feature>.cli.test.ts

Слой инструментов ( `src/tools/*.tool.ts` )

Цель : Определить инструменты MCP со схемами и описаниями для помощников ИИ.
Именование : файлы должны иметь имена <feature>.tool.ts с типами в <feature>.types.ts
Шаблон : Каждый инструмент должен использовать zod для проверки аргументов.

Уровень контроллеров ( `src/controllers/*.controller.ts` )

Цель : Реализация бизнес-логики, обработка ошибок и форматирование ответов.
Именование : Файлы должны называться <feature>.controller.ts
Шаблон : Должен возвращать стандартизированные объекты ControllerResponse

Уровень служб ( `src/services/*.service.ts` )

Цель : Взаимодействие с внешними API или источниками данных.
Именование : Файлы должны называться <feature>.service.ts
Шаблон : чистое взаимодействие API с минимальной логикой

Уровень утилит ( `src/utils/*.util.ts` )

Цель : Обеспечить общую функциональность для всего приложения.
Ключевые возможности :
- logger.util.ts : Структурированное ведение журнала
- error.util.ts : Обработка ошибок и стандартизация
- formatter.util.ts : Помощники форматирования Markdown

Руководство по разработке

Сценарии разработки

# 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]

Тестирование

# Run all tests
npm test

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

# Generate test coverage report
npm run test:coverage

Качество кода

# Lint code
npm run lint

# Format code with Prettier
npm run format

# Check types
npm run typecheck

Создание пользовательских инструментов

Чтобы добавить собственные инструменты на сервер, выполните следующие действия:

1. Определите уровень обслуживания

Создайте новую службу в src/services/ для взаимодействия с вашим внешним API:

// 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. Создать контроллер

Добавьте контроллер в src/controllers/ для обработки бизнес-логики:

// 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. Внедрение инструмента MCP

Создайте определение инструмента в 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

Создайте команду CLI в 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. Регистрация компонентов

Обновите точки входа для регистрации новых компонентов:

// 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);

Инструменты отладки

Инспектор МКП

Получите доступ к визуальному инспектору MCP, чтобы протестировать свои инструменты и просмотреть сведения о запросах/ответах:

Запустите npm run dev:server
Откройте http://localhost:5173 в вашем браузере.
Тестируйте свои инструменты и просматривайте журналы прямо в пользовательском интерфейсе

Журналы сервера

Включить журналы отладки для разработки:

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

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

Публикация вашего MCP-сервера

Когда вы будете готовы опубликовать свой собственный сервер MCP:

Обновите package.json, указав свои данные.
Обновите README.md документацией по вашему инструменту.
Соберите проект: npm run build
Протестируйте производственную сборку: npm run start:server
Опубликовать в npm: npm publish

Лицензия

Лицензия ISC

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

Примечание: Для обратной совместимости сервер также распознает конфигурации под полным именем пакета ( screenshotone-mcp-server ) или именем пакета без области действия ( screenshotone-mcp-server ), если ключ screenshotone не найден. Однако для новых конфигураций рекомендуется использовать короткий ключ screenshotone .

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.

Подключает помощников на основе искусственного интеллекта к API ScreenshotOne.com для создания снимков экрана веб-сайта с настраиваемыми параметрами, включая размер области просмотра, полностраничные снимки и несколько форматов вывода.

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