Glasses MCP

🚀 グラス MCP: AIにウェブを見せる 👓

グラス MCPは、AIアシスタントにウェブの視覚情報を提供するツールです。AIは大量のテキストやコードを処理できますが、ウェブのビジュアル情報にはアクセスできません。このツールを使うことで、AIは任意のウェブサイトのスクリーンショットを取得し、ウェブのビジュアル情報を理解し、活用することができます。

🚀 クイックスタート

グラス MCPを使うことで、AIアシスタントに任意のウェブサイトのスクリーンショットを取得させることができます。以下の手順でインストールし、使用を開始しましょう。

✨ 主な機能

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

📦 インストール

好みとクライアントアプリケーションに応じて、グラス MCPを2通りの方法でインストールできます。

方法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アシスタントに次のようなプロンプトを使用できます。

例プロンプト

以下は、グラス 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