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