ScreenshotOne.com - MCP Server

- [x] Take screenshots of any URL
- [x] Render HTML content and take screenshots
- [x] Customize viewport size and device emulation
- [x] Capture full-page screenshots
- [x] Select specific elements using CSS selectors
- [x] Multiple output formats (PNG, JPEG, WebP, PDF)
- [x] Block ads, trackers, and cookie banners
- [x] Inject custom CSS and JavaScript
- [x] Control wait behavior and timing

- Node.js (>=18.x): Download
- Git: For version control

---

For local configuration with stdio transport:

{

  "mcpServers": {

    "screenshotone": {

      "command": "node",

      "args": ["/path/to/screenshotone-mcp-server/dist/index.js"],

      "transportType": "stdio"

    }

  }

}

For remote HTTP configuration:

{

  "mcpServers": {

    "screenshotone": {

      "type": "http",

      "url": "http://localhost:8080/mcp"

    }

  }

}

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)

---

npm install

---

DEBUG=true npm run dev:server

```

---

Take a screenshot using the CLI:

- 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
Follow these steps to add your own tools to the server:
Create a tool definition in src/tools/:

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,
);
}
```