AIビジョンMCPサーバー

ビジュアル UI デバッグエージェント MCP

Playwright を介して AI モデルが Web インターフェースを分析、デバッグ、操作できるようにする、自律デバッグ MCP サーバーです。このサーバーにより、あらゆる AI モデル（組み込みのビジョン機能を持たないモデルも含む）が、Web ページの視覚的な検査、UI バグの検出、ユーザーワークフローのテスト、アプリケーションのパフォーマンス検証を、人間の介入なしに実行できるようになります。

UIオートメーションのスクリーンショット

自律UIデバッグエージェント

この MCP サーバーは、次の機能を備えた AI 搭載の自律デバッグエージェントとして機能します。

Webアプリケーションの包括的な視覚分析を実行する
視覚要素とそのプロパティを検査してUIの問題を検出する
手動テストスクリプトを作成せずに、一般的なユーザーワークフローを自動的にテストします。
APIエンドポイントを検証し、バックエンドの応答を確認する
アプリケーションバージョン間の視覚的な変更を追跡する
コンソールログでエラーと警告を監視する
パフォーマンス指標を分析してボトルネックを特定する
スクリーンショットと推奨事項を含む詳細なレポートを生成する

サーバーは、ブラウザセッションを再利用し、不要なファイルの作成を回避し、アプリケーションの最も重要な側面に重点を置きながら、インテリジェントに動作するように設計されています。

インストールオプション

MCP ゲートウェイの使用 (推奨)

この MCP サーバーをインストールする最も簡単な方法は、MCP 互換のゲートウェイを使用することです。

# Example with Claude gateway
claude-gateway install visual-ui-debug-agent-mcp

クイックインストールスクリプト

1 行のインストールスクリプトを使用します。

curl -s https://raw.githubusercontent.com/samihalawa/visual-ui-debug-agent-mcp/main/scripts/install-global.sh | bash

NPMのインストール

npm 経由のグローバルインストールの場合:

# Install globally
npm install -g visual-ui-debug-agent-mcp

# Start the server
visual-ui-debug-agent-mcp

Docker Hubのインストール

コンテナ化されたデプロイメントの場合:

# Pull the image from Docker Hub
docker pull samihalawa/visual-ui-debug-agent-mcp:latest

# Run the container
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest

鍛冶屋の統合

このパッケージは、付属の設定ファイルを使用することで Smithery と完全に互換性があります。

# Install with Smithery
smithery install visual-ui-debug-agent-mcp

# Or run with your API key
npm run smithery:key YOUR_SMITHERY_API_KEY

完全なインストールおよび使用手順については、 Smishery 統合ガイドを参照してください。

完全なツールリファレンス

主要な視覚分析ツール

1. `enhanced_page_analyzer` 🔍

インタラクティブな要素のマッピング、パフォーマンスメトリック、視覚的な検査を使用して、Web ページの包括的な分析を提供します。

const analysis = await mcp.callTool("enhanced_page_analyzer", {
  url: "https://example.com/dashboard",
  includeConsole: true,
  mapElements: true,
  fullPage: true
});

2. `ui_workflow_validator` 🔄

一連の UI インタラクションを実行して検証することで、完全なユーザージャーニーを自動的にテストします。

const result = await mcp.callTool("ui_workflow_validator", {
  startUrl: "https://example.com/login",
  taskDescription: "User login flow",
  steps: [
    { description: "Enter username", action: "fill", selector: "#username", value: "test" },
    { description: "Enter password", action: "fill", selector: "#password", value: "pass" },
    { description: "Click login", action: "click", selector: "button[type='submit']" },
    { description: "Verify dashboard loads", action: "verifyElementVisible", selector: ".dashboard" }
  ],
  captureScreenshots: "all"
});

3. `visual_comparison` 👁️

2 つの Web ページまたは UI の状態を比較して、視覚的な違いを識別します。

const diff = await mcp.callTool("visual_comparison", {
  url1: "https://example.com/before",
  url2: "https://example.com/after",
  threshold: 0.05
});

4. `screenshot_url` 📸

全ページまたは特定の要素のオプションを使用して、任意の URL の高品質のスクリーンショットをキャプチャします。

const screenshot = await mcp.callTool("screenshot_url", {
  url: "https://example.com/profile",
  fullPage: true,
  device: "iPhone 13"
});

5. `batch_screenshot_urls` 📷

効率的に比較するために、1 回の操作で複数の URL のスクリーンショットを取得します。

const screenshots = await mcp.callTool("batch_screenshot_urls", {
  urls: ["https://example.com/page1", "https://example.com/page2"],
  fullPage: true
});

ユーザーフローテストツール

6. `navigation_flow_validator` 🧭

検証を使用して、複数ステップのナビゲーションシーケンスをテストします。

const navResult = await mcp.callTool("navigation_flow_validator", {
  startUrl: "https://example.com",
  steps: [
    { action: "click", selector: "a.products" },
    { action: "wait", waitTime: 1000 },
    { action: "click", selector: ".product-item" }
  ],
  captureScreenshots: true
});

7. `api_endpoint_tester` 🔌

複数の API エンドポイントをテストし、バックエンド検証の応答を検証します。

const apiTest = await mcp.callTool("api_endpoint_tester", {
  url: "https://api.example.com/v1",
  endpoints: [
    { path: "/users", method: "GET" },
    { path: "/products", method: "GET" }
  ],
  authToken: "Bearer token123"
});

DOMとパフォーマンス分析

8. `dom_inspector` 🔬

DOM 要素とそのプロパティを詳細に検査します。

const elementInfo = await mcp.callTool("dom_inspector", {
  url: "https://example.com",
  selector: "nav.main-menu",
  includeChildren: true,
  includeStyles: true
});

9. `console_monitor` 📟

エラー検出のためにコンソールログを監視およびキャプチャします。

const logs = await mcp.callTool("console_monitor", {
  url: "https://example.com/app",
  filterTypes: ["error", "warning"],
  duration: 5000
});

10. `performance_analysis` ⚡

ページ読み込みのパフォーマンスメトリックを測定および分析します。

const perfMetrics = await mcp.callTool("performance_analysis", {
  url: "https://example.com/dashboard",
  iterations: 3
});

低レベルのPlaywrightコントロール

11. `screenshot_local_files` 📁

ローカル HTML ファイルのスクリーンショットを撮ります。

const localScreenshot = await mcp.callTool("screenshot_local_files", {
  filePath: "/path/to/local/file.html"
});

12. 劇作家の直接的な行動

正確な自動化を実現する低レベルの Playwright コントロールの完全なセット:

playwright_navigate : 特定のURLに移動する
playwright_click : 要素をクリック
playwright_iframe_click : iframe内の要素をクリックする
playwright_fill : フォームフィールドに入力する
playwright_select : ドロップダウンオプションを選択
playwright_hover : 要素の上にマウスを移動
playwright_evaluate : ページコンテキストでJavaScriptを実行する
playwright_console_logs : コンソールログを取得する
playwright_get_visible_text : 表示されているテキストを抽出する
playwright_get_visible_html : 表示される HTML を取得する
playwright_go_back : 戻る
playwright_go_forward : 前進する
playwright_press_key : キーボードのキーを押す
playwright_drag : 要素をドラッグアンドドロップする
playwright_screenshot : カスタムスクリーンショットを撮る

自律デバッグワークフロー

MCPサーバーは、ツールを組み合わせることで、完全なデバッグワークフローを自律的に実行できます。例えば、

ビジュアル回帰テスト

// 1. Analyze the current version
const currentAnalysis = await mcp.callTool("enhanced_page_analyzer", {...});

// 2. Compare with previous version
const comparisonResult = await mcp.callTool("visual_comparison", {...});

// 3. Generate visual difference report
const report = await mcp.callTool("ui_workflow_validator", {...});

エンドツーエンドのユーザーフロー検証

// 1. Start with login flow
const loginResult = await mcp.callTool("ui_workflow_validator", {...});

// 2. Validate core features
const featureResults = await mcp.callTool("navigation_flow_validator", {...});

// 3. Test API endpoints
const apiResults = await mcp.callTool("api_endpoint_tester", {...});

パフォーマンスの最適化

// 1. Analyze initial performance
const initialPerformance = await mcp.callTool("performance_analysis", {...});

// 2. Identify slow-loading elements
const elementPerformance = await mcp.callTool("dom_inspector", {...});

// 3. Monitor console for errors
const consoleErrors = await mcp.callTool("console_monitor", {...});

視覚分析の例

要素マッピング

MCP サーバーはページ上のすべてのインタラクティブ要素を自動的にマッピングし、AI モデルが UI 構造を理解しやすくします。

視覚的な比較

視覚的な比較ツールは UI 状態間の違いを強調表示し、予期しない視覚的な変化を捉えるのに最適です。

統合オプション

Smitheryとの統合

# smithery.yaml configuration
startCommand:
  type: stdio
  configSchema:
    type: object
    properties:
      port:
        type: number
        description: Port number for the MCP server
      debug:
        type: boolean
        description: Enable debug mode

GLAMAとの統合

// glama.json configuration
{
  "name": "visual-ui-debug-agent-mcp",
  "version": "1.0.2",
  "settings": {
    "port": 8080,
    "headless": true,
    "maxConcurrentSessions": 5
  }
}

非視覚モデルとの統合

MCP サーバーは、視覚情報を、視覚機能を持たない AI モデルでも使用できる構造化データに変換します。

// The model receives structured data about visual elements
{
  "interactiveElements": [
    {
      "tagName": "button",
      "text": "Submit",
      "bounds": {"x": 120, "y": 240, "width": 100, "height": 40},
      "visible": true
    },
    // More elements...
  ]
}

CI/CD統合

この MCP サーバーには、継続的な統合とデプロイメントのための GitHub Actions ワークフローが含まれています。

ビルドとテスト: コードの品質を検証する
NPM パブリッシング: パッケージのパブリッシングを自動化
Docker Publishing : Dockerイメージを作成してプッシュする
Smithery Publishing : Smithery プラットフォームへの展開

ライセンス

このプロジェクトはISC ライセンスに基づいてライセンスされます。

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Claude やその他の MCP 対応 AI アシスタントに AI を活用した視覚分析機能を提供し、スクリーンショットのキャプチャと分析、ファイル操作の実行、UI/UX レポートの生成を可能にします。

Related MCP Servers

Perplexity Tool for Claude Desktop
letsbuildagent
A
security
A
license
A
quality
A custom MCP tool that integrates Perplexity AI's API with Claude Desktop, allowing Claude to perform web-based research and provide answers with citations.
Last updated -
1
2
JavaScript
MIT License
Screenshot MCP Server
codingthefuturewithai
-
security
F
license
-
quality
Enables AI tools to capture and process screenshots of a user's screen, allowing AI assistants to see and analyze what the user is looking at through a simple MCP interface.
Last updated -
1
Python
PyMCPAutoGUI
kitfactory
-
security
A
license
-
quality
An MCP server that bridges AI agents with GUI automation capabilities, allowing them to control mouse, keyboard, windows, and take screenshots to interact with desktop applications.
Last updated -
Python
MIT License
Vibe Coder MCP
freshtechbro
A
security
F
license
A
quality
An MCP server that supercharges AI assistants with powerful tools for software development, enabling research, planning, code generation, and project scaffolding through natural language interaction.
Last updated -
11
40
TypeScript

View all related MCP servers

ビジュアル UI デバッグエージェント MCP

自律UIデバッグエージェント

インストールオプション

MCP ゲートウェイの使用 (推奨)

クイックインストールスクリプト

NPMのインストール

Docker Hubのインストール

鍛冶屋の統合

完全なツールリファレンス

主要な視覚分析ツール

1. enhanced_page_analyzer 🔍

2. ui_workflow_validator 🔄

3. visual_comparison 👁️

4. screenshot_url 📸

5. batch_screenshot_urls 📷