Website Screenshot MCP

Glasses MCP: Let Your AI See the Web 👓

Your AI assistant is a powerful partner, capable of processing immense amounts of text and code. But when it comes to the visual web, it's flying blind. It can't see the layout of a competitor's landing page, the design of a complex dashboard, or the look of your latest prototype.

Glasses MCP gives it sight.

It's a simple tool that allows your AI to request a perfect, device-specific screenshot of any website. It's not just about taking pictures; it's about giving your AI the context it's been missing, turning the visual web into a resource it can finally understand and interact with.

Features

Capture any URL: Take a screenshot of any public website or local development server.
Device Emulation: See how a site looks on a variety of popular phones, tablets, and laptops.
Selectable Format: Choose between png and jpeg image formats.
Full Page or Viewport: Capture the entire scrollable page or just the visible viewport.
Structured Output: Returns a clear JSON object indicating success or failure.

Installation

You can install Glasses MCP in two ways, depending on your preference and client application.

Method 1: Desktop Extension

This is the easiest way to get started. It allows for one-click installation in compatible clients like Claude Code.

Download the latest glasses-mcp.dxt file.
Open the .dxt file with your client application. The client will handle the rest.

Method 2: Manual JSON Configuration

This method uses npx to download and run the package on-demand. It's ideal for command-line usage or for developers who prefer not to install the extension directly.

To use this method, add the following JSON to your client's configuration file:

{
  "mcpServers": {
    "glasses": {
      "command": "npx",
      "args": ["-y", "glasses-mcp"]
    }
  }
}

Configuration File Locations:

For Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
For Gemini CLI: ~/.gemini/settings.json
For Cursor IDE: Your user settings.json file.

Usage

Once integrated, you can use prompts like these with your AI assistant.

Example Prompts

Here are a few examples of how you can use Glasses MCP.

For a straightforward capture of a homepage, where the AI can infer the filename:

"Take a screenshot of github.com and save it to my desktop."

To specify a different image format and save location:

"Get a JPEG screenshot of the latest news on bbc.com/news and save it in my downloads folder."

To see how a website looks on a mobile device, specifying the exact output filename:

"Capture the verge.com homepage as it would appear on a small iOS device and save it as verge-mobile.png."

To capture a local development server, focusing only on the visible portion of the page:

"Capture just the viewport of my local server at http://localhost:3000."

Tool Reference: `screenshot`

Name	Type	Required	Default	Description
`url`	`string`	Yes	-	The full URL of the website to capture.
`outputPath`	`string`	Yes	-	The local file path to save the screenshot to.
`format`	`"png"` \| `"jpeg"`	No	`"png"`	The output image format.
`fullPage`	`boolean`	No	`true`	If `true`, captures the entire page. If `false`, captures only the visible viewport.
`device`	`string`	No	`laptop-hidpi`	The name of the device to emulate (see Supported Devices below).

Supported Devices

The screenshot tool can optionally emulate a specific device, which sets the viewport size, pixel density, and user agent to match. We have curated a list of popular and representative devices to provide good coverage of the most common form factors while keeping the list manageable.

Device Name	Device ID	Category	Represents
`iPhone 14 Pro Max`	`ios-large`	Phone	A large, modern iOS device.
`iPhone SE`	`ios-small`	Phone	A smaller, older-generation iOS device.
`Pixel 6 Pro`	`android-large`	Phone	A large, modern Android device.
`Galaxy S8`	`android-medium`	Phone	A common, slightly older Android device.
`iPad Pro 11`	`tablet-large`	Tablet	A modern, high-resolution tablet.
`iPad Mini`	`tablet-small`	Tablet	A smaller, popular tablet format.
`Laptop with HiDPI screen`	`laptop-hidpi`	Laptop	A high-resolution laptop (e.g., MacBook Pro).
`Laptop with MDPI screen`	`laptop-mdpi`	Laptop	A standard-resolution laptop.

Returns: A JSON object indicating success or failure.

{
  "success": true,
  "outputPath": "/path/to/your/screenshot.png"
}

Error Handling

If the tool encounters an error (e.g., an invalid URL, a website that fails to load), it will return a JSON object with the isError flag set to true and a descriptive error message.

{
  "success": false,
  "error": "net::ERR_NAME_NOT_RESOLVED at https://invalid-url-here.com"
}

Limitations

No Login/Authentication: The tool cannot log in to websites that require authentication. It can only capture publicly accessible content.
Anti-Bot Measures: Some websites employ sophisticated anti-bot technologies that may block the tool from capturing a screenshot.
Complex Interactions: The tool does not support complex interactions like clicking buttons, filling out forms, or scrolling to a specific element before taking a screenshot.

Development & Contributing

To contribute to this project:

Clone the repository: git clone https://github.com/gourraguis/glasses-mcp.git
Install dependencies: cd glasses-mcp && npm install
Build the project: npm run build
To test your local build, use the MCP Inspector:
npx @modelcontextprotocol/inspector node dist/main.js

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

A server that allows AI agents and clients to programmatically capture screenshots of websites with options for image format and viewport selection.

Related MCP Servers

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
8
21
TypeScript
MIT License
webdev-mcp
zueai
-
security
-
license
-
quality
An MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.
Last updated -
2
TypeScript
webdev-mcp
fefergrgrgrg
A
security
F
license
A
quality
An MCP server providing web development tools such as screen capturing capabilities that let AI agents take and work with screenshots of the user's screen.
Last updated -
2
27
2
TypeScript
ScreenshotOne MCP Server
mrgoonie
-
security
A
license
-
quality
Connects AI assistants to ScreenshotOne.com API for capturing website screenshots with customizable options including viewport size, full-page captures, and multiple output formats.
Last updated -
8
2
TypeScript
MIT License

View all related MCP servers

Website Screenshot MCP

Glasses MCP: Let Your AI See the Web 👓

Table of Contents

Features

Installation

Method 1: Desktop Extension

Method 2: Manual JSON Configuration

Usage

Example Prompts

Tool Reference: `screenshot`

Supported Devices

Error Handling

Limitations

Development & Contributing

Related MCP Servers

ScreenshotOne MCP Serverofficial

webdev-mcp

webdev-mcp

ScreenshotOne MCP Server

New MCP Servers

MCP directory API

Glasses MCP: Let Your AI See the Web 👓

Table of Contents

Features

Installation

Method 1: Desktop Extension

Method 2: Manual JSON Configuration

Usage

Example Prompts

Tool Reference: screenshot

Supported Devices

Error Handling

Limitations

Development & Contributing

Related MCP Servers

ScreenshotOne MCP Serverofficial

webdev-mcp

webdev-mcp

ScreenshotOne MCP Server

New MCP Servers

MCP directory API

Tool Reference: `screenshot`