使用说明
眼镜MCP:让你的AI看到网络👓
你的人工智能助手是一个强大的合作伙伴,能够处理大量的文本和代码。但说到视觉网络,它是盲目的。它看不到竞争对手登录页面的布局、复杂仪表板的设计或最新原型的外观。
MCP眼镜赋予它视力。
这是一个简单的工具,允许您的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 - 对于游标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