ScreenshotOne MCP Server

What does “ScreenshotOne” MCP Server do?

The ScreenshotOne MCP (Model Context Protocol) Server is an official implementation that acts as a bridge between AI assistants and the ScreenshotOne API. By connecting to this server, AI agents and tools can automate the process of capturing website screenshots, providing visual context and reference for development, QA, reporting, and documentation workflows. Through the MCP protocol, developers can empower AI assistants to generate real-time website snapshots, integrate visual assets into their conversations or reports, and streamline the workflow of sharing and archiving web content. This server makes it easy to securely execute screenshot requests within larger AI-powered or automated pipelines.

List of Prompts

No prompt templates are documented in the repository.

List of Resources

No explicit MCP resources are documented in the repository.

List of Tools

• render-website-screenshot: Render a screenshot of a website and return it as an image.

Use Cases of this MCP Server

• Automated Website QA: Instantly capture and compare website screenshots for regression testing or visual QA, helping developers and testers spot UI changes or rendering bugs.
• Documentation Generation: Easily embed up-to-date screenshots in technical or marketing documentation, ensuring that guides and manuals reflect current website UI.
• Visual Bug Reporting: Allow users or AI assistants to attach live webpage screenshots to bug reports, improving communication between QA and development teams.
• Content Archiving: Automate the capture and archiving of website states for compliance, auditing, or historical reference.
• Real-time Sharing: Enable AI-powered chatbots to fetch and share webpage visuals in conversations, enhancing clarity and engagement.

How to set it up

Windsurf

No specific setup instructions provided for Windsurf.

Claude

1. Prerequisite: Ensure you have Node.js installed.
2. Locate configuration file: Find ~/Library/Application Support/Claude/claude_desktop_config.json.
3. Add ScreenshotOne MCP Server configuration:

   {
       "mcpServers": {
           "screenshotone": {
               "command": "node",
               "args": ["path/to/screenshotone/mcp/build/index.js"],
               "env": {
                   "SCREENSHOTONE_API_KEY": "<your api key>"
               }
           }
       }
   }
   

4. Save the file.
5. Restart Claude to apply changes.
6. Verify by attempting to use the screenshot tool inside Claude.

Securing API Keys

Store your ScreenshotOne API key in the env section of the configuration, not in the codebase.

Example:

"env": {
    "SCREENSHOTONE_API_KEY": "<your api key>"
}

Cursor

No specific setup instructions provided for Cursor.

Cline

No specific setup instructions provided for Cline.

Standalone

1. Prerequisite: Ensure Node.js is installed.
2. Install dependencies and build:

   npm install && npm run build
   

3. Run the server with your API key:

   SCREENSHOTONE_API_KEY=your_api_key && node build/index.js
   

How to use this MCP inside flows

Using MCP in FlowHunt

To integrate MCP servers into your FlowHunt workflow, start by adding the MCP component to your flow and connecting it to your AI agent:

Click on the MCP component to open the configuration panel. In the system MCP configuration section, insert your MCP server details using this JSON format:

{
  "screenshotone": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Once configured, the AI agent is now able to use this MCP as a tool with access to all its functions and capabilities. Remember to change “screenshotone” to whatever the actual name of your MCP server is and replace the URL with your own MCP server URL.

Overview

Our opinion

This MCP server is focused and practical, but documentation is minimal outside the core use case. It is easy to set up for Claude, but lacks detailed setup for other platforms and does not expose prompt templates or resources. The presence of a single, well-documented tool and secure API handling are strengths, but breadth is limited.

MCP Score