Integrations
Provides capability to upload screenshots to Cloudflare for storage and hosting, with options for custom filenames and debugging.
Enables injection of custom CSS into websites before capturing screenshots, allowing customization of page appearance.
Allows injection of custom JavaScript into websites before capturing screenshots, enabling customization of page behavior.
ScreenshotOne.com - MCP Server
This project provides a Model Context Protocol (MCP) server that connects AI assistants to ScreenshotOne.com API to capture screenshots of websites.
Available Features
- Take screenshots of any URL
- Render HTML content and take screenshots
- Customize viewport size and device emulation
- Capture full-page screenshots
- Select specific elements using CSS selectors
- Multiple output formats (PNG, JPEG, WebP, PDF)
- Block ads, trackers, and cookie banners
- Inject custom CSS and JavaScript
- Control wait behavior and timing
ScreenshotOne.com
- Website
- Playground
- API Docs
- Create your API key here
Supported Transports
- "stdio" transport - Default transport for CLI usage
- "Streamable HTTP" transport - For web-based clients
- Implement auth ("Authorization" headers with
Bearer <token>
)
- Implement auth ("Authorization" headers with
"sse" transport(Deprecated)- Write tests
How to use
CLI
MCP Setup
For local configuration with stdio transport:
For remote HTTP configuration:
Environment Variables for HTTP Transport:
You can configure the HTTP server using these environment variables:
MCP_HTTP_HOST
: The host to bind to (default:127.0.0.1
)MCP_HTTP_PORT
: The port to listen on (default:8080
)MCP_HTTP_PATH
: The endpoint path (default:/mcp
)
Source Code Overview
What is MCP?
Model Context Protocol (MCP) is an open standard that allows AI systems to securely and contextually connect with external tools and data sources.
This boilerplate implements the MCP specification with a clean, layered architecture that can be extended to build custom MCP servers for any API or data source.
Why Use This Boilerplate?
- Production-Ready Architecture: Follows the same pattern used in published MCP servers, with clear separation between CLI, tools, controllers, and services.
- Type Safety: Built with TypeScript for improved developer experience, code quality, and maintainability.
- Working Example: Includes a fully implemented IP lookup tool demonstrating the complete pattern from CLI to API integration.
- Testing Framework: Comes with testing infrastructure for both unit and CLI integration tests, including coverage reporting.
- Development Tooling: Includes ESLint, Prettier, TypeScript, and other quality tools preconfigured for MCP server development.
Getting Started
Prerequisites
- Node.js (>=18.x): Download
- Git: For version control
Step 1: Clone and Install
Step 2: Run Development Server
Start the server in development mode with stdio transport (default):
Or with the Streamable HTTP transport:
This starts the MCP server with hot-reloading and enables the MCP Inspector at http://localhost:5173.
⚙️ Proxy server listening on port 6277 🔍 MCP Inspector is up and running at http://127.0.0.1:6274
When using HTTP transport, the server will be available at http://127.0.0.1:8080/mcp by default.
Step 3: Test the Screenshot Tool
Take a screenshot using the CLI:
Architecture
This boilerplate follows a clean, layered architecture pattern that separates concerns and promotes maintainability.
Project Structure
Layers and Responsibilities
CLI Layer (src/cli/*.cli.ts
)
- Purpose: Define command-line interfaces that parse arguments and call controllers
- Naming: Files should be named
<feature>.cli.ts
- Testing: CLI integration tests in
<feature>.cli.test.ts
Tools Layer (src/tools/*.tool.ts
)
- Purpose: Define MCP tools with schemas and descriptions for AI assistants
- Naming: Files should be named
<feature>.tool.ts
with types in<feature>.types.ts
- Pattern: Each tool should use zod for argument validation
Controllers Layer (src/controllers/*.controller.ts
)
- Purpose: Implement business logic, handle errors, and format responses
- Naming: Files should be named
<feature>.controller.ts
- Pattern: Should return standardized
ControllerResponse
objects
Services Layer (src/services/*.service.ts
)
- Purpose: Interact with external APIs or data sources
- Naming: Files should be named
<feature>.service.ts
- Pattern: Pure API interactions with minimal logic
Utils Layer (src/utils/*.util.ts
)
- Purpose: Provide shared functionality across the application
- Key Utils:
logger.util.ts
: Structured loggingerror.util.ts
: Error handling and standardizationformatter.util.ts
: Markdown formatting helpers
Development Guide
Development Scripts
Testing
Code Quality
Building Custom Tools
Follow these steps to add your own tools to the server:
1. Define Service Layer
Create a new service in src/services/
to interact with your external API:
2. Create Controller
Add a controller in src/controllers/
to handle business logic:
3. Implement MCP Tool
Create a tool definition in src/tools/
:
4. Add CLI Support
Create a CLI command in src/cli/
:
5. Register Components
Update the entry points to register your new components:
Debugging Tools
MCP Inspector
Access the visual MCP Inspector to test your tools and view request/response details:
- Run
npm run dev:server
- Open http://localhost:5173 in your browser
- Test your tools and view logs directly in the UI
Server Logs
Enable debug logs for development:
Publishing Your MCP Server
When ready to publish your custom MCP server:
- Update package.json with your details
- Update README.md with your tool documentation
- Build the project:
npm run build
- Test the production build:
npm run start:server
- Publish to npm:
npm publish
License
Note: For backward compatibility, the server will also recognize configurations under the full package name (screenshotone-mcp-server
) or the unscoped package name (screenshotone-mcp-server
) if the screenshotone
key is not found. However, using the short screenshotone
key is recommended for new configurations.
This server cannot be installed
Connects AI assistants to ScreenshotOne.com API for capturing website screenshots with customizable options including viewport size, full-page captures, and multiple output formats.
Related MCP Servers
- AsecurityAlicenseAqualityA Model Context Protocol server that provides AI vision capabilities for analyzing UI screenshots, offering tools for screen analysis, file operations, and UI/UX report generation.Last updated -261JavaScriptISC License
- AsecurityAlicenseAqualityAn 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 -16TypeScriptMIT License
- -securityFlicense-qualityEnables 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 -1Python
- -securityFlicense-qualityCaptures screenshots and saves them to file paths specified by client applications, primarily designed to facilitate screenshot analysis by AI assistants running in WSL environments.Last updated -Python