Glasses MCP

🚀 眼镜MCP：让你的AI“看清”网络世界 👓

眼镜MCP是一款简单实用的工具，它能让强大的AI助手突破文本和代码的局限，获取任意网站特定设备的完美截图。这不仅是为AI拍摄图片，更是赋予其一直缺失的视觉上下文，让AI能够理解并与视觉网络进行交互。

🚀 快速开始

你的AI助手虽然强大，能处理大量的文本和代码，但在面对视觉网络时却如同“盲人”。它无法看到竞争对手的着陆页布局、复杂仪表盘的设计，或者你最新原型的外观。而眼镜MCP赋予了它“视力”。

✨ 主要特性

• 任意URL截图：可对任何公共网站或本地开发服务器进行截图。
• 设备模拟：能查看网站在各种流行手机、平板电脑和笔记本电脑上的显示效果。
• 可选格式：支持选择png和jpeg图像格式。
• 全页或视口截图：可以捕获整个可滚动页面，也可以只捕获可见视口。
• 结构化输出：返回清晰的JSON对象，指示操作成功或失败。

📦 安装指南

你可以根据自己的偏好和客户端应用，选择以下两种方式安装眼镜MCP。

方法一：桌面扩展

这是最简单的入门方式，允许在Claude Code等兼容客户端中一键安装。

1. 下载最新的glasses-mcp.dxt文件。
2. 用你的客户端应用打开.dxt文件，客户端将处理后续操作。

方法二：手动JSON配置

此方法使用npx按需下载和运行该软件包，适用于命令行使用，或不希望直接安装扩展的开发者。 将以下JSON添加到客户端的配置文件中：

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

配置文件位置：

• Claude桌面版：~/Library/Application Support/Claude/claude_desktop_config.json
• Gemini CLI：~/.gemini/settings.json
• Cursor IDE：你的用户settings.json文件。

💻 使用示例

基础用法

集成后，你可以向AI助手使用以下示例提示。

• 直接捕获主页，让AI推断文件名：

"截取github.com的屏幕截图，并保存到我的桌面。"

• 指定不同的图像格式和保存位置：

"获取bbc.com/news上最新新闻的JPEG截图，并保存到我的下载文件夹中。"

• 查看网站在移动设备上的显示效果，并指定确切的输出文件名：

"捕获verge.com主页在小型iOS设备上的显示效果，并保存为verge-mobile.png。"

• 捕获本地开发服务器，仅关注页面的可见部分：

"仅捕获我本地服务器http://localhost:3000的视口。"

工具参考：screenshot

支持的设备

screenshot工具可以选择模拟特定设备，设置视口大小、像素密度和用户代理以匹配。以下是支持的设备列表：

返回值：一个指示成功或失败的JSON对象。

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

错误处理

如果工具遇到错误（例如，无效的URL、网站加载失败），它将返回一个isError标志设置为true的JSON对象，并带有描述性错误消息。

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

局限性

• 无登录/认证功能：该工具无法登录需要认证的网站，只能捕获公开可访问的内容。
• 反爬虫措施：一些网站采用复杂的反爬虫技术，可能会阻止工具捕获截图。
• 复杂交互不支持：该工具不支持复杂的交互，如点击按钮、填写表单或在截图前滚动到特定元素。

🔧 开发与贡献

如果你想为这个项目做出贡献，可以按照以下步骤操作：

1. 克隆仓库：git clone https://github.com/gourraguis/glasses-mcp.git
2. 安装依赖：cd glasses-mcp && npm install
3. 构建项目：npm run build
4. 要测试你的本地构建，请使用MCP Inspector：

npx @modelcontextprotocol/inspector node dist/main.js