Glasses MCP

🚀 Glasses MCP: Let Your AI See the Web 👓

Your AI assistant is a powerful ally, capable of processing vast amounts of text and code. However, when it comes to the visual web, it's operating blindly. It can't perceive the layout of a competitor's landing page, the design of a complex dashboard, or the appearance of your latest prototype.

Glasses MCP grants it the ability to see.

It's a straightforward tool that enables your AI to request a flawless, device-specific screenshot of any website. It's not merely about taking pictures; it's about providing your AI with the context it's been lacking, transforming the visual web into a resource it can finally comprehend and interact with.

🚀 Quick Start

Glasses MCP offers two installation methods. After installation, you can use specific prompts with your AI assistant to capture screenshots.

✨ 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](https://github.com/gourraguis/glasses - mcp/releases/download/v1.1.0/glasses - mcp.dxt).
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 Examples

Basic 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."

Advanced Usage

Tool Reference: screenshot

Supported Devices

The screenshot tool can optionally emulate a specific device, which sets the viewport size, pixel density, and user agent to match.

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