项目介绍
Glasses MCP：让您的AI看到网络 👓
您的AI助手是一个强大的伙伴，能够处理大量的文本和代码。但在视觉网络方面，它却像盲人一样。它无法看到竞争对手登陆页面的布局、复杂仪表板的设计或您最新原型的外观。
Glasses MCP赋予了它视觉能力。
这是一个简单的工具，允许您的AI请求任何网站的完美设备特定截图。这不仅仅是拍照；这是给您的AI提供它所缺失的上下文，将视觉网络变成它可以理解并与其交互的资源。
目录
特性
- 捕获任何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 - 对于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 | 平板 | 一款较小的流行平板格式。 |
带HiDPI屏幕的笔记本电脑 | laptop-hidpi | 笔记本 | 高分辨率笔记本电脑（例如MacBook Pro）。 |
带MDPI屏幕的笔记本电脑 | laptop-mdpi | 笔记本 | 标准分辨率笔记本电脑。 |
返回： 一个指示成功或失败的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"
}
限制
- 无登录/认证： 该工具不能登录需要身份验证的网站。它只能捕获公开可访问的内容。
- 反机器人措施： 一些网站采用复杂的反机器人技术，可能会阻止工具捕捉截图。
- 复杂交互： 该工具不支持复杂的交互，如点击按钮、填写表单或滚动到特定元素后再截图。
开发与贡献
要为此项目做出贡献：
- 克隆仓库：
git clone https://github.com/gourraguis/glasses-mcp.git - 安装依赖项：
cd glasses-mcp && npm install - 构建项目：
npm run build - 要测试您的本地构建，请使用MCP Inspector：
npx @modelcontextprotocol/inspector node dist/main.js