glasses

Glasses MCP gives your AI the ability to request device-specific screenshots of any website, turning the visual web into a context-rich resource the model can interpret. It supports capturing either full-page screenshots or just the visible viewport, with options to choose output formats (png or jpeg) and to emulate a variety of devices. The tool is designed to be integrated into client configurations via a simple MCP entry, allowing the AI to prompt for screenshots like any other tool. Typical prompts involve providing a URL, desired output path, and optional device or format preferences, and the system will return a structured JSON indicating success and the location of the saved image.

To use Glasses MCP, ensure your MCP client is configured with the glasses server entry (as shown in the installation example). When you issue prompts to the AI, include fields or natural-language instructions such as: capture the homepage of example.com as a PNG image saved to a specified path, or render a mobile view of a page using the iPhone 14 Pro Max profile. The tool reference supports parameters like url, outputPath, format, fullPage, and device to tailor the capture to your needs. If a capture succeeds, you’ll receive a JSON object with the outputPath; on failure, an error object will describe what went wrong.

Supported devices offer a range of viewport sizes and user agents to reflect common devices, enabling you to verify layout and responsiveness directly through the AI’s workflow.

Prerequisites:

• Node.js and npm installed on your system
• Optional: Git if cloning a repository

Installation via MCP entry (recommended):

1. Ensure Node.js and npm are installed. You can verify with: node -v npm -v

2. In your MCP client configuration, add Glasses as a server entry (example shown in the README): { "mcpServers": { "glasses": { "command": "npx", "args": ["-y", "glasses-mcp"] } } }

3. If you prefer to run Glasses locally or develop against it, clone the repository and install dependencies: git clone https://github.com/gourraguis/glasses-mcp.git cd glasses-mcp npm install npm run build

4. Run locally (development): node dist/main.js

5. Optional: Build and test with MCP Inspector integration as described in the README: npx @modelcontextprotocol/inspector node dist/main.js

Tips and considerations:

• Method 1 (Desktop Extension) provides a quick installation path via a prebuilt extension if your client supports .dxt files.
• The npx method downloads and runs the package on-demand; this is convenient for serverless or CI environments.
• If you encounter network or permission issues with npx, ensure your environment allows executing remote npm packages and that your firewall does not block npm registry access.
• The tool supports both full-page and viewport captures, plus device emulation to test responsive designs. For pages with dynamic content, consider enabling fullPage to capture the entire scrollable area, but be aware of potential long processing times for complex pages.
• Returns are JSON objects indicating success or error, enabling straightforward integration with your AI workflow and error handling routines.
• If you plan to run the server outside of MCP environments, you can build locally and wire up prompts to direct the output to a particular path on your filesystem.