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

Name: ScreenshotOne MCP Server
Author: mrgoonie

Этот проект предоставляет сервер 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

Related MCP server: Webpage Screenshot MCP Server

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

[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 .