Skip to main content
Glama

시각적 회귀 MCP 서버

Gemini 3 Flash를 사용하여 시각적 회귀 테스트를 위한 에이전트형 시각적 기능을 Claude Code에 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다.

개요

시각적 변경 사항에 대해 모호한 대화를 나눌 필요가 없습니다. 의도된 변경 사항과 의도치 않은 변경 사항을 감지하여 무엇이 변경되었는지 정확히 원으로 표시하고 주석을 달아 확인하세요.

해결된 문제

  • 개발자가 UI 변경 작업에 몇 시간을 소비함

  • 빌드는 통과하고 코드는 "깔끔함"

  • 앱을 열어보면... 레이아웃이 완전히 동일함

  • "구체적으로 무엇이 변경되었나요?"라고 질문함

  • 개발자: "카드에 2픽셀을 추가했습니다"

  • "어디에요? 위? 아래? 상자 안쪽? 주변?"이라고 질문함

  • 😤 시간 낭비, 불분명한 의사소통

해결책

Where's Waldo Rick은 다음을 제공합니다:

  1. 여러 플랫폼(macOS, iOS 시뮬레이터, 웹)에서 스크린샷 캡처

  2. 구성 가능한 임계값을 사용한 픽셀 단위 비교

  3. Gemini 3 Flash를 사용한 에이전트형 시각적 분석(반복적 확대/자르기/주석 달기)

  4. 예상된 변경 사항과 의도치 않은 변경 사항 감지

  5. 대화형 조사 ("그 상자가 아니라, 하위 항목이요")

Related MCP server: visual-ui-debug-agent-mcp

설치

요구 사항

  • Python 3.10+

  • Gemini API 키 (무료 티어: 분당 15회 요청)

GitHub에서 설치

# Install via uvx
uvx --from git+https://github.com/bretbouchard/gemini-vision-mcp wheres_waldo.server

# Or install locally
pip install -e .

Claude Code 구성

Claude Code MCP 구성(~/.claude/mcp.json 또는 프로젝트별 구성)에 추가하세요:

{
  "mcpServers": {
    "wheres-waldo-rick": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/bretbouchard/gemini-vision-mcp", "wheres_waldo.server"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

사용법

기본 워크플로우

# 1. Declare expected changes before work
/visual:prepare "Card padding increases by 2px, button moves to right"

# 2. Capture baseline screenshot
/visual:capture "Phase 3 - Before card update"

# 3. Development happens...

# 4. Capture current state
/visual:capture "Phase 4 - After card update"

# 5. Compare and see all changes
/visual:compare screenshots/phases/3-before.png screenshots/phases/4-after.png

MCP 도구

visual_capture

스크린샷을 캡처하고 시각적 회귀 테스트를 위해 저장합니다.

await visual_capture(
    name="Phase 3 - Before card update",
    platform="macos"  # auto, macos, ios, web
)

visual_prepare

개발 전에 예상되는 변경 사항이 포함된 기준선을 선언합니다.

await visual_prepare(
    phase="Phase 3 - Card Layout Update",
    expected_changes="Card padding increases by 2px, button moves to right"
)

visual_compare

픽셀 수준의 정밀도와 에이전트형 시각적 기능을 사용하여 두 스크린샷을 비교합니다.

await visual_compare(
    before_path="screenshots/phases/3-before.png",
    after_path="screenshots/phases/4-after.png",
    threshold=2  # 1px, 2px, or 3px
)

visual_cleanup

오래된 스크린샷과 캐시를 정리합니다.

await visual_cleanup(retention_days=7)

개발

설정

# Clone repository
git clone https://github.com/bretbouchard/gemini-vision-mcp
cd gemini-vision-mcp

# Install in development mode
pip install -e ".[dev]"

# Run tests
pytest

# Format code
black src/
ruff check src/

프로젝트 구조

src/wheres_waldo/
├── __init__.py
├── server.py          # MCP server with tool definitions
├── models/            # Pydantic domain models
├── services/          # Business logic (capture, compare, storage)
├── tools/             # MCP tool implementations
└── utils/             # Logging, hashing, path helpers

로드맵

  • [x] 1단계: 기반 (MCP 서버 스켈레톤, 유형, 저장소)

  • [ ] 2단계: 캡처 및 기준선 (멀티 플랫폼 스크린샷)

  • [ ] 3단계: 비교 엔진 (OpenCV + Gemini 통합) 🔥 높은 위험

  • [ ] 4단계: 운영 (캐싱, 점진적 해상도, 보고)

  • [ ] 5단계: 다듬기 (대화형 조사)

전체 실행 계획은 ROADMAP.md를 참조하세요.

기여

기여를 환영합니다! 기여하기 전에 REQUIREMENTS.mdROADMAP.md를 읽어주세요.

라이선스

MIT 라이선스 - 자세한 내용은 LICENSE 파일을 참조하세요

감사의 말

다음 기술을 사용하여 구축되었습니다:


Happy를 통해 Claude Code로 생성됨

F
license - not found
Not graded
quality - not tested
D
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.

  • Capture screenshots, detect visual regressions between page versions, and analyze with AI.

  • MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bretbouchard/gemini-vision-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server