Samihalawa MCP Server Ai Vision

🚀 AI ビジョン MCP サーバー

このサーバーは、人工知能によるビジョン分析機能を提供するモデルコンテキストプロトコル（MCP）サーバーです。Claude やその他の MCP 互換の人工知能アシスタントをサポートしています。

🚀 クイックスタート

AI ビジョン MCP サーバーを使用することで、任意のウェブサイトのスクリーンショットを取得し、その UI/UX 分析を行うことができます。以下に、サーバーのセットアップと使用方法を説明します。

✨ 主な機能

• スクリーンショット URL：URL を指定することで、任意のウェブサイトのスクリーンショットを取得できます。
• ビジョン分析：スクリーンショット内のユーザーインターフェース要素、レイアウト、コンテンツを分析します。
• ファイル操作：指定した行範囲でファイルを正確に読み取り、修正することができます。
• レポート生成：包括的な 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

指定した 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. ウェブサイトのスクリーンショットを取得する：

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