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