🚀 眼镜MCP：让你的AI“看清”网络世界 👓
眼镜MCP是一款简单实用的工具，它能让强大的AI助手突破文本和代码的局限，获取任意网站特定设备的完美截图。这不仅是为AI拍摄图片，更是赋予其一直缺失的视觉上下文，让AI能够理解并与视觉网络进行交互。
🚀 快速开始
你的AI助手虽然强大，能处理大量的文本和代码，但在面对视觉网络时却如同“盲人”。它无法看到竞争对手的着陆页布局、复杂仪表盘的设计，或者你最新原型的外观。而眼镜MCP赋予了它“视力”。
✨ 主要特性
- 任意URL截图：可对任何公共网站或本地开发服务器进行截图。
- 设备模拟：能查看网站在各种流行手机、平板电脑和笔记本电脑上的显示效果。
- 可选格式：支持选择
png和jpeg图像格式。 - 全页或视口截图：可以捕获整个可滚动页面，也可以只捕获可见视口。
- 结构化输出：返回清晰的JSON对象，指示操作成功或失败。
📦 安装指南
你可以根据自己的偏好和客户端应用，选择以下两种方式安装眼镜MCP。
方法一：桌面扩展
这是最简单的入门方式，允许在Claude Code等兼容客户端中一键安装。
- 下载最新的
glasses-mcp.dxt文件。 - 用你的客户端应用打开
.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
| 属性 | 类型 | 是否必需 | 默认值 | 描述 |
|---|---|---|---|---|
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、网站加载失败），它将返回一个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