AI 비전 MCP 서버

Visual UI 디버그 에이전트 MCP

AI 모델이 Playwright를 통해 웹 인터페이스를 분석, 디버깅 및 상호 작용할 수 있도록 지원하는 자율 디버깅 MCP 서버입니다. 이 서버를 사용하면 모든 AI 모델(비전 기능이 내장되지 않은 모델 포함)이 웹 페이지를 시각적으로 검사하고, UI 버그를 찾고, 사용자 워크플로를 테스트하고, 애플리케이션 성능을 검증할 수 있으며, 이 모든 작업은 사람의 개입 없이 수행됩니다.

UI 자동화 스크린샷

자율 UI 디버깅 에이전트

이 MCP 서버는 다음을 수행할 수 있는 AI 기반 자율 디버깅 에이전트 역할을 합니다.

웹 애플리케이션에 대한 포괄적인 시각적 분석 수행
시각적 요소와 해당 속성을 검사하여 UI 문제를 감지합니다.
수동 테스트 스크립트 생성 없이 일반적인 사용자 워크플로를 자동으로 테스트합니다.
API 엔드포인트 검증 및 백엔드 응답 확인
애플리케이션 버전 간 시각적 변경 사항 추적
오류 및 경고에 대한 콘솔 로그 모니터링
병목 현상을 식별하기 위해 성능 지표를 분석합니다.
스크린샷과 권장 사항을 포함한 자세한 보고서 생성

이 서버는 브라우저 세션을 재사용하고, 불필요한 파일 생성을 피하고, 애플리케이션의 가장 중요한 측면에 집중하여 지능적으로 작동하도록 설계되었습니다.

설치 옵션

MCP 게이트웨이 사용(권장)

이 MCP 서버를 설치하는 가장 쉬운 방법은 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 허브 설치

컨테이너화된 배포의 경우:

# 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

전체 설치 및 사용 지침은 Smithery 통합 가이드를 참조하세요.

완전한 도구 참조

주요 시각적 분석 도구

1. `enhanced_page_analyzer` 🔍

대화형 요소 매핑, 성능 측정 항목, 시각적 검사를 통해 웹 페이지에 대한 포괄적인 분석을 제공합니다.

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` 👁️

두 개의 웹 페이지나 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` 📷

효율적인 비교를 위해 단일 작업으로 여러 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 Publishing : 패키지 게시를 자동화합니다.
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

Visual UI 디버그 에이전트 MCP

자율 UI 디버깅 에이전트

설치 옵션

MCP 게이트웨이 사용(권장)

빠른 설치 스크립트

NPM 설치

Docker 허브 설치

스미서리 통합

완전한 도구 참조

주요 시각적 분석 도구

1. enhanced_page_analyzer 🔍

2. ui_workflow_validator 🔄

3. visual_comparison 👁️

4. screenshot_url 📸

5. batch_screenshot_urls 📷