Glasses MCP

🚀 眼镜MCP：让你的人工智能“看清”网络 👓

眼镜MCP是一款简单实用的工具，它能让你的AI获取任何网站的完美、特定设备截图。这不仅是简单的拍照，更能为AI提供它一直缺失的上下文信息，将视觉网络转变为AI最终能够理解和交互的资源。

你的AI助手是一个强大的伙伴，能够处理大量的文本和代码。但当涉及到视觉网络时，它就像在黑暗中飞行。它无法看到竞争对手登陆页面的布局、复杂仪表盘的设计，或者你最新原型的外观。

而眼镜MCP赋予了它“视力”。

目录

• ✨ 主要特性
• 📦 安装指南
  • 方法一：桌面扩展程序
  • 方法二：手动JSON配置
• 💻 使用示例
  • 示例提示
  • 工具参考：screenshot
  • 支持的设备
  • 错误处理
  • 局限性
• 🔧 开发与贡献

✨ 主要特性

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

📦 安装指南

你可以根据自己的偏好和客户端应用程序，选择以下两种方式安装眼镜MCP。

方法一：桌面扩展程序

这是最简单的入门方法，它允许在Claude Code等兼容客户端中一键安装。

1. 下载最新的glasses-mcp.dxt文件。
2. 用你的客户端应用程序打开.dxt文件，客户端将处理后续操作。

方法二：手动JSON配置

此方法使用npx按需下载和运行该软件包，适用于命令行使用，或者那些不想直接安装扩展程序的开发者。 要使用此方法，请将以下JSON添加到你的客户端配置文件中：

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

配置文件位置：

• Claude桌面版：~/Library/Application Support/Claude/claude_desktop_config.json
• Gemini命令行界面：~/.gemini/settings.json
• Cursor IDE：你的用户settings.json文件。

💻 使用示例

集成完成后，你可以向AI助手使用如下提示。

示例提示

以下是一些如何使用眼镜MCP的示例：

• 要直接捕获主页，让AI推断文件名：

  "对github.com进行截图，并保存到我的桌面。"

• 指定不同的图像格式和保存位置：

  "获取bbc.com/news上最新新闻的JPEG截图，并保存到我的下载文件夹中。"

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

  "捕获verge.com主页在小型iOS设备上的显示效果，并保存为verge-mobile.png。"

• 捕获本地开发服务器，仅关注页面的可见部分：

  "仅捕获我本地服务器http://localhost:3000的视口。"

工具参考：screenshot

支持的设备

screenshot工具可以选择模拟特定设备，该设备会设置视口大小、像素密度和用户代理以进行匹配。我们精心挑选了一系列流行且具有代表性的设备，在保证列表可管理的同时，能很好地覆盖最常见的设备类型。

返回值：一个指示成功或失败的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"
}

局限性

• 无登录/认证功能：该工具无法登录需要认证的网站，只能捕获公开可访问的内容。
• 反爬虫措施：一些网站采用了复杂的反爬虫技术，可能会阻止该工具进行截图。
• 不支持复杂交互：该工具不支持在截图前进行复杂的交互操作，如点击按钮、填写表单或滚动到特定元素。

🔧 开发与贡献

如果你想为这个项目做出贡献，请按照以下步骤操作：

1. 克隆仓库：git clone https://github.com/gourraguis/glasses-mcp.git
2. 安装依赖：cd glasses-mcp && npm install
3. 构建项目：npm run build
4. 要测试你的本地构建，请使用MCP检查器：

npx @modelcontextprotocol/inspector node dist/main.js