Glasses MCP

Glasses MCP：让你的 AI 看见网页 👓

你的 AI 助手是强大的合作伙伴，能够处理海量文本和代码。但面对可视化网页时，它却像盲人一样。它看不到竞争对手着陆页的布局、复杂仪表板的设计，也看不到你最新原型的样子。

Glasses MCP 让它看见。

这是一个简单的工具，可让 AI 请求任意网站的设备专属完美截图。它不只是拍照，更是为 AI 提供它一直缺少的上下文，让它终于能够理解并与可视化网页互动。

目录

• 功能
• 安装
  • 方法 1：桌面扩展
  • 方法 2：手动 JSON 配置
• 使用方法
  • 提示词示例
  • 工具参考：screenshot
  • 支持的设备
  • 错误处理
  • 限制
• 开发与贡献

功能

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

安装

你可以根据偏好和客户端应用，以两种方式安装 Glasses MCP。

方法 1：桌面扩展

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

1. 下载最新的 glasses-mcp.dxt 文件。
2. 使用客户端应用打开 .dxt 文件。其余步骤将由客户端完成。

方法 2：手动 JSON 配置

此方法使用 npx 按需下载并运行软件包。它适合命令行使用，或不想直接安装扩展的开发者。

若要使用此方法，请将以下 JSON 添加到客户端的配置文件中：

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

配置文件位置：

• Claude Desktop： ~/Library/Application Support/Claude/claude_desktop_config.json
• Gemini CLI： ~/.gemini/settings.json
• **Cursor IDE：**用户的 settings.json 文件。

使用方法

集成完成后，你可以向 AI 助手发送类似以下提示词。

提示词示例

以下是使用 Glasses MCP 的几个示例。

要直接截取主页，并让 AI 推断文件名：

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

要指定其他图像格式和保存位置：

“截取 bbc.com/news 最新新闻页面的 JPEG 截图，并保存到我的下载文件夹。”

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

“截取 verge.com 首页在小屏幕 iOS 设备上的显示效果，并保存为 verge-mobile.png。”

要截取本地开发服务，且只关注页面的可见部分：

“仅截取我在 http://localhost:3000 上的本地服务视口。”

工具参考：screenshot

名称	类型	必填	默认值	描述
url	string	是	-	要截取的网站完整 URL。
outputPath	string	是	-	用于保存截图的本地文件路径。
format	"png" | "jpeg"	否	"png"	输出图像格式。
fullPage	boolean	否	true	如果为 true，则截取整个页面。如果为 false，则仅截取当前可见视口。
device	string	否	laptop-hidpi	要模拟的设备名称（参见下文的“支持的设备”）。

支持的设备

screenshot 工具可以选择模拟特定设备，以匹配其视口大小、像素密度和用户代理。我们精选了一组常见且具有代表性的设备，在涵盖最常见外形规格的同时，也控制了列表长度。

设备名称	设备 ID	类别	代表设备
iPhone 14 Pro Max	ios-large	手机	一款大型现代 iOS 设备。
iPhone SE	ios-small	手机	一款尺寸较小的旧款 iOS 设备。
Pixel 6 Pro	android-large	手机	一款大型现代 Android 设备。
Galaxy S8	android-medium	手机	一款常见的稍旧款 Android 设备。
iPad Pro 11	tablet-large	平板电脑	一款现代高分辨率平板电脑。
iPad Mini	tablet-small	平板电脑	一种较小且常见的平板电脑规格。
Laptop with HiDPI screen	laptop-hidpi	笔记本电脑	一款高分辨率笔记本电脑（例如 MacBook Pro）。
Laptop with MDPI screen	laptop-mdpi	笔记本电脑	一款标准分辨率笔记本电脑。

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

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

错误处理

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

{
  "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