glasses-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.

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

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.

1. Download the latest glasses-mcp.dxt file.
2. 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:

1. Clone the repository: git clone https://github.com/gourraguis/glasses-mcp.git
2. Install dependencies: cd glasses-mcp && npm install
3. Build the project: npm run build
4. To test your local build, use the MCP Inspector:

   npx @modelcontextprotocol/inspector node dist/main.js