Glasses MCP

Glasses MCP：AI にウェブを見せましょう 👓

AI アシスタントは、大量のテキストやコードを処理できる強力なパートナーです。しかし、視覚的なウェブとなると、まるで何も見えていません。競合他社のランディングページのレイアウトも、複雑なダッシュボードのデザインも、最新のプロトタイプの見た目も確認できません。

Glasses MCP が視界を与えます。

どのウェブサイトでも、デバイスに合わせた高品質なスクリーンショットを AI がリクエストできるシンプルなツールです。単に画像を撮るだけではありません。AI に不足していたコンテキストを与え、視覚的なウェブを、AI がようやく理解し、操作できるリソースに変えます。

目次

• 機能
• インストール
  • 方法 1：デスクトップ拡張機能
  • 方法 2：JSON を手動で設定
• 使い方
  • プロンプトの例
  • ツールのリファレンス：screenshot
  • 対応デバイス
  • エラー処理
  • 制限事項
• 開発とコントリビューション

機能

• 任意の URL をキャプチャ： 公開ウェブサイトやローカル開発サーバーのスクリーンショットを撮影します。
• デバイスのエミュレーション： 人気のスマートフォン、タブレット、ノートパソコンでのサイトの見え方を確認できます。
• 形式を選択可能： png と jpeg の画像形式から選べます。
• ページ全体またはビューポート： スクロール可能なページ全体、または表示中のビューポートだけをキャプチャできます。
• 構造化された出力： 成功または失敗を示す、わかりやすい JSON オブジェクトを返します。

インストール

お好みやクライアントアプリケーションに応じて、2 つの方法で 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
• Cursor IDE の場合： ユーザーの settings.json ファイル。

使い方

統合が完了したら、AI アシスタントに次のようなプロンプトを使えます。

プロンプトの例

Glasses MCP の使用例をいくつか紹介します。

AI がファイル名を推測できる、ホームページのシンプルなキャプチャの場合：

「github.com のスクリーンショットを撮って、デスクトップに保存してください。」

画像形式と保存先を指定する場合：

「bbc.com/news の最新ニュースを JPEG でスクリーンショットし、ダウンロードフォルダーに保存してください。」

出力ファイル名を指定して、モバイルデバイスでのウェブサイトの見え方を確認する場合：

「小型の iOS デバイスで表示したときの verge.com のホームページをキャプチャして、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	ノート PC	高解像度のノート PC です（例：MacBook Pro）。
Laptop with MDPI screen	laptop-mdpi	ノート PC	標準解像度のノート PC です。

戻り値： 成功または失敗を示す 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 Inspector を使用します：

   npx @modelcontextprotocol/inspector node dist/main.js