眼镜MCP：让你的AI看到网络👓
你的人工智能助手是一个强大的合作伙伴，能够处理大量的文本和代码。但说到视觉网络，它是盲目的。它看不到竞争对手登录页面的布局、复杂仪表板的设计或最新原型的外观。
MCP眼镜赋予它视力。
这是一个简单的工具，允许您的AI请求任何网站的完美、特定于设备的屏幕截图。这不仅仅是拍照；这是关于为你的人工智能提供它所缺失的背景，将视觉网络变成它最终可以理解和交互的资源。
目录
- 方法1：桌面扩展 - 方法2：手动JSON配置
- 示例提示 - 工具参考： screenshot - 支持设备 - 错误处理 - 局限性
特性
- 捕获任何URL： 对任何公共网站或本地开发服务器进行截图。
- 设备仿真： 查看网站在各种流行手机、平板电脑和笔记本电脑上的外观。
- 可选格式： 选择
png和jpeg图像格式。 - 整页或视口： 捕获整个可滚动页面或仅捕获可见视口。
- 结构化输出： 返回一个明确的JSON对象，表示成功或失败。
安装
您可以通过两种方式安装Glasses MCP，具体取决于您的偏好和客户端应用程序。
方法1：桌面扩展
这是最简单的开始方式。它允许在兼容的客户端（如Claude Code）中一键安装。
- 下载最新
glasses-mcp.dxt文件. - 打开
.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 - 对于游标IDE： 用户
settings.json文件。
用法
集成后，您可以在AI助手中使用这样的提示。
示例提示
以下是一些如何使用Glasses MCP的示例。
为了直接捕捉主页，人工智能可以推断文件名：
“截取github的屏幕截图并将其保存到我的桌面。”
要指定其他图像格式和保存位置，请执行以下操作：
“在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 | 手机 | 一款大型现代安卓设备。 |
Galaxy S8 | android-medium | 手机 | 一款常见的、稍显陈旧的Android设备。 |
iPad Pro 11 | tablet-large | Tablet | 一款现代的高分辨率平板电脑。 |
iPad Mini | tablet-small | Tablet | 一种更小、更受欢迎的平板电脑格式。 |
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"
}局限性
- 无登录/身份验证： 该工具无法登录需要身份验证的网站。它只能捕获可公开访问的内容。
- 反机器人措施： 一些网站采用复杂的反机器人技术，可能会阻止该工具捕获屏幕截图。
- 复杂交互： 该工具不支持复杂的交互，如点击按钮、填写表单或在截图前滚动到特定元素。
发展与贡献
为该项目做出贡献：
- 克隆存储库：
git clone https://github.com/gourraguis/glasses-mcp.git - 安装依赖项：
cd glasses-mcp && npm install - 构建项目：
npm run build - 要测试本地版本，请使用 MCP检查员:
npx @modelcontextprotocol/inspector node dist/main.js