Token导航 LogoToken导航TokenDH.com
Website Screenshot MCP logo
运维云端stdio官方级别未说明来源级核验

Website Screenshot MCP

MCP Server

@modelcontextprotocol/inspector

Glasses MCP是一款为AI助手提供网页截图功能的工具,支持多种设备和格式,帮助AI理解视觉内容。

工具数

1

提示词数

0

GitHub Stars

9

资源数

0
TypeScriptClaude云端部署Claude DesktopClaude

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

作者 / 组织

gourraguis

提供方

gourraguis

最后核验

2026/5/17 20:19

运行时

Node.js

快速接入

先看主来源和安装命令,再打开仓库或文档;下面只保留这个条目的关键接入事实。

命令预览

npx @modelcontextprotocol/inspector node dist/main.js

详细介绍

](https://mseep.ai/app/gourraguis-glasses-mcp)

眼镜MCP:让你的AI看到网络👓

](https://www.npmjs.com/package/glasses-mcp) ![License: MIT](https://opensource.org/licenses/MIT)

你的人工智能助手是一个强大的合作伙伴,能够处理大量的文本和代码。但说到视觉网络,它是盲目的。它看不到竞争对手登录页面的布局、复杂仪表板的设计或最新原型的外观。

MCP眼镜赋予它视力。

这是一个简单的工具,允许您的AI请求任何网站的完美、特定于设备的屏幕截图。这不仅仅是拍照;这是关于为你的人工智能提供它所缺失的背景,将视觉网络变成它最终可以理解和交互的资源。

目录

- 方法1:桌面扩展 - 方法2:手动JSON配置

- 示例提示 - 工具参考: screenshot - 支持设备 - 错误处理 - 局限性

特性

  • 捕获任何URL: 对任何公共网站或本地开发服务器进行截图。
  • 设备仿真: 查看网站在各种流行手机、平板电脑和笔记本电脑上的外观。
  • 可选格式: 选择 pngjpeg 图像格式。
  • 整页或视口: 捕获整个可滚动页面或仅捕获可见视口。
  • 结构化输出: 返回一个明确的JSON对象,表示成功或失败。

安装

您可以通过两种方式安装Glasses MCP,具体取决于您的偏好和客户端应用程序。

方法1:桌面扩展

这是最简单的开始方式。它允许在兼容的客户端(如Claude Code)中一键安装。

  1. 下载最新 glasses-mcp.dxt 文件.
  2. 打开 .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

名称类型必填默认描述
urlstring-要捕获的网站的完整URL。
outputPathstring-保存屏幕截图的本地文件路径
format"png""jpeg"没有"png"输出图像格式。
fullPageboolean没有true如果 true,捕获整个页面。如果 false,仅捕获可见视口。
devicestring没有laptop-hidpi要模拟的设备的名称(请参阅下面的支持设备)。

支持设备

screenshot 该工具可以选择模拟特定设备,该设备可以设置视口大小、像素密度和用户代理以进行匹配。我们整理了一份流行和有代表性的设备列表,以提供对最常见外形因素的良好覆盖,同时保持列表的可管理性。

设备名称设备ID类别表示
iPhone 14 Pro Maxios-large手机一款大型现代iOS设备。
iPhone SEios-small手机较小的旧一代iOS设备。
Pixel 6 Proandroid-large手机一款大型现代安卓设备。
Galaxy S8android-medium手机一款常见的、稍显陈旧的Android设备。
iPad Pro 11tablet-largeTablet一款现代的高分辨率平板电脑。
iPad Minitablet-smallTablet一种更小、更受欢迎的平板电脑格式。
Laptop with HiDPI screenlaptop-hidpi笔记本电脑高分辨率笔记本电脑(例如MacBook Pro)。
Laptop with MDPI screenlaptop-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"
}

局限性

  • 无登录/身份验证: 该工具无法登录需要身份验证的网站。它只能捕获可公开访问的内容。
  • 反机器人措施: 一些网站采用复杂的反机器人技术,可能会阻止该工具捕获屏幕截图。
  • 复杂交互: 该工具不支持复杂的交互,如点击按钮、填写表单或在截图前滚动到特定元素。

发展与贡献

为该项目做出贡献:

  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

目录标签

目录标签

TypeScriptClaude云端部署AI工具本地部署网页截图设备模拟视觉内容处理

支持客户端

Claude DesktopClaude

接入字段

传输方式(transport,传输协议)

stdio

鉴权方式(authType,认证方式)

none

运行时(runtime,运行环境)

Node.js

部署方式(deploymentType,部署类型)

local-only

来源包(packageName,安装包名)

@modelcontextprotocol/inspector

工具数量(toolCount,工具数)

1

资源数量(resourceCount,资源数)

0

提示词数量(promptCount,提示词数)

0

权限和风险

stdiononelocal-only

接入前请确认传输方式、认证方式和部署位置,并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限;先核对安装命令和配置内容。

来源信息

继续浏览同类 MCP