AI Vision Debug MCP Server

AIビジョンMCPサーバー

Claude やその他の MCP 互換 AI アシスタントに AI を活用した視覚分析機能を提供するモデル コンテキスト プロトコル (MCP) サーバー。

特徴

• スクリーンショットURL : URLを指定して任意のウェブサイトのスクリーンショットをキャプチャします
• 視覚分析: スクリーンショット内の UI 要素、レイアウト、コンテンツを分析します
• ファイル操作: 行単位の精度でファイルを読み取り、変更します
• レポート生成: 包括的なUI/UX分析レポートを作成する
• デバッグセッション: 複数の分析ステップにわたってコンテキストを維持する

インストール

使用法

サーバーの起動

構成

サーバーを MCP 構成に追加します。

利用可能なツール

スクリーンショットURL

Web ブラウザを使用して URL のスクリーンショットを撮ります。

パラメータ:

• url (文字列、必須): スクリーンショットをキャプチャするURL (例: http://localhost:4999 、 https://google.com )
• fullPage （ブール値、オプション）：ページ全体をキャプチャするか、ビューポートのみをキャプチャするか。デフォルト：false
• waitForSelector (文字列、オプション): スクリーンショットを撮る前に待機する CSS セレクター
• waitTime (数値、オプション): スクリーンショットを撮るまでの待機時間（ミリ秒）。デフォルト: 1000

分析画面

AIビジョンでスクリーンショットを分析します。

パラメータ: なし (最新のスクリーンショットを使用)

読み取りファイル

指定された行番号間のファイルの内容を読み取ります。

パラメータ:

• path (文字列): ファイルへのパス
• startLine (数値): 開始行番号（1から始まる）
• endLine (数値): 終了行番号（1から始まる）

ファイルの変更

指定された行番号間のファイルの内容を変更します。

パラメータ:

• path (文字列): ファイルへのパス
• startLine (数値): 置換する開始行番号（1から始まるインデックス）
• endLine (数値): 置換する終了行番号 (1から始まるインデックス)
• content (文字列): 指定された行を置き換える新しいコンテンツ

レポートを生成する

包括的な UI/UX 分析レポートを生成します。

パラメータ:

• testUrl (文字列): テスト対象のアプリケーションのURL
• appName (文字列、オプション): 分析対象のアプリケーションの名前
• date （文字列、オプション）：分析の日付（YYYY-MM-DD）
• observations （オブジェクト）：コンポーネント、データ状態、相互作用などとして構造化された観察。

ワークフローの例

1. ウェブサイトのスクリーンショットを撮ります。
   screenshot_url(url: "https://example.com")
2. スクリーンショットを分析します。
   analyze_screen()
3. 分析に基づいてレポートを生成します。
   generate_report(testUrl: "https://example.com", observations: {...})

要件

• Node.js 14以上
• ブラウザ自動化のためのPlaywright
• AIビジョン分析用のGemini APIキー

ライセンス

マサチューセッツ工科大学