Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Website Screenshot MCPcapture a screenshot of github.com as it appears on an iPhone and save it to my desktop"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Table of Contents
Related MCP server: ScreenshotOne MCP Server
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
pngandjpegimage 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.
Open the
.dxtfile 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:
Configuration File Locations:
For Claude Desktop:
~/Library/Application Support/Claude/claude_desktop_config.jsonFor Gemini CLI:
~/.gemini/settings.jsonFor Cursor IDE: Your user
settings.jsonfile.
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 |
|
| Yes | - | The full URL of the website to capture. |
|
| Yes | - | The local file path to save the screenshot to. |
|
| No |
| The output image format. |
|
| No |
| If |
|
| No |
| 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 |
|
| Phone | A large, modern iOS device. |
|
| Phone | A smaller, older-generation iOS device. |
|
| Phone | A large, modern Android device. |
|
| Phone | A common, slightly older Android device. |
|
| Tablet | A modern, high-resolution tablet. |
|
| Tablet | A smaller, popular tablet format. |
|
| Laptop | A high-resolution laptop (e.g., MacBook Pro). |
|
| Laptop | A standard-resolution laptop. |
Returns: A JSON object indicating success or failure.
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.
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.gitInstall dependencies:
cd glasses-mcp && npm installBuild the project:
npm run buildTo test your local build, use the MCP Inspector:
npx @modelcontextprotocol/inspector node dist/main.js