AI Vision Debug MCP Server

AI 비전 MCP 서버

Claude 및 기타 MCP 호환 AI 어시스턴트를 위한 AI 기반 시각적 분석 기능을 제공하는 MCP(Model Context Protocol) 서버입니다.

특징

• 스크린샷 URL : URL을 제공하여 모든 웹사이트의 스크린샷을 캡처합니다.
• 시각적 분석 : 스크린샷의 UI 요소, 레이아웃 및 콘텐츠 분석
• 파일 작업 : 줄별 정밀도로 파일을 읽고 수정합니다.
• 보고서 생성 : 포괄적인 UI/UX 분석 보고서 생성
• 디버깅 세션 : 여러 분석 단계에 걸쳐 컨텍스트 유지

설치

지엑스피1

용법

서버 시작

구성

MCP 구성에 서버를 추가합니다.

사용 가능한 도구

스크린샷_URL

웹 브라우저를 사용하여 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: {...})

요구 사항

• 노드.js 14+
• 브라우저 자동화를 위한 Playwright
• AI 비전 분석을 위한 Gemini API 키

특허

MIT