MCP Server Ai Vision

🚀 AI ビジュアル MCP サーバー

AIビジュアル分析機能を提供するMCP（モデルコンテキストプロトコル）サーバーです。Claudeやその他のMCP互換AIアシスタントをサポートします。

✨ 主な機能

• スクリーンショットURL：URLを指定することで、任意のWebサイトのスクリーンショットを取得できます。
• ビジュアル分析：スクリーンショット内のUI要素、レイアウト、コンテンツを分析します。
• ファイル操作：ファイルを行単位で正確に読み取り、修正することができます。
• レポート生成：包括的なUI/UX分析レポートを作成します。
• デバッグセッション：複数の分析ステップ間でコンテキストを維持します。

📦 インストール

# リポジトリをクローン
git clone https://github.com/samihalawa/mcp-server-ai-vision.git
cd mcp-server-ai-vision

# 依存関係をインストール
npm install

# サーバーをビルド
npm run build

💻 使用例

基本的な使用法

サーバーの起動

npm start

設定

サーバーをMCP設定に追加します：

{
  "servers": {
    "ai-vision": {
      "command": "/path/to/node",
      "args": ["/path/to/mcp-server-ai-vision/build/index.js"],
      "enabled": true,
      "port": 3005,
      "environment": {
        "NODE_PATH": "/path/to/node_modules",
        "PATH": "/usr/local/bin:/usr/bin:/bin",
        "GEMINI_API_KEY": "your-gemini-api-key"
      }
    }
  }
}

高度な使用法

利用可能なツール

screenshot_url

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

パラメータ：

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

analyze_screen

AIビジュアルを使用してスクリーンショットを分析します。

パラメータ：なし（最新のスクリーンショットを使用）

read_file

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

パラメータ：

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

modify_file

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

パラメータ：

• path (文字列)：ファイルのパス
• startLine (数値)：置き換える開始行番号（1から始まる）
• endLine (数値)：置き換える終了行番号（1から始まる）
• content (文字列)：指定された行を置き換える新しい内容

generate_report

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

パラメータ：

• testUrl (文字列)：テスト中のアプリケーションのURL
• appName (文字列、オプション)：分析中のアプリケーションの名前
• date (文字列、オプション)：分析日（形式：YYYY-MM-DD）
• observations (オブジェクト)：コンポーネント、データ状態、インタラクションなどで分類された構造化された観察結果

サンプルワークフロー

1. Webサイトのスクリーンショットを取得します：

   screenshot_url(url: "https://example.com")
   

2. スクリーンショットを分析します：

   analyze_screen()
   

3. 分析結果に基づいてレポートを生成します：

   generate_report(testUrl: "https://example.com", observations: {...})
   

📚 ドキュメント

必要条件

• Node.js 14+
• ブラウザ自動化にPlaywright
• AIビジュアル分析にGemini APIキー

📄 ライセンス

MIT