Where's Waldo Rick
시각적 회귀 MCP 서버
Gemini 3 Flash를 사용하여 시각적 회귀 테스트를 위한 에이전트형 시각적 기능을 Claude Code에 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다.
개요
시각적 변경 사항에 대해 모호한 대화를 나눌 필요가 없습니다. 의도된 변경 사항과 의도치 않은 변경 사항을 감지하여 무엇이 변경되었는지 정확히 원으로 표시하고 주석을 달아 확인하세요.
해결된 문제
개발자가 UI 변경 작업에 몇 시간을 소비함
빌드는 통과하고 코드는 "깔끔함"
앱을 열어보면... 레이아웃이 완전히 동일함
"구체적으로 무엇이 변경되었나요?"라고 질문함
개발자: "카드에 2픽셀을 추가했습니다"
"어디에요? 위? 아래? 상자 안쪽? 주변?"이라고 질문함
😤 시간 낭비, 불분명한 의사소통
해결책
Where's Waldo Rick은 다음을 제공합니다:
여러 플랫폼(macOS, iOS 시뮬레이터, 웹)에서 스크린샷 캡처
구성 가능한 임계값을 사용한 픽셀 단위 비교
Gemini 3 Flash를 사용한 에이전트형 시각적 분석(반복적 확대/자르기/주석 달기)
예상된 변경 사항과 의도치 않은 변경 사항 감지
대화형 조사 ("그 상자가 아니라, 하위 항목이요")
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.pngMCP 도구
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.md와 ROADMAP.md를 읽어주세요.
라이선스
MIT 라이선스 - 자세한 내용은 LICENSE 파일을 참조하세요
감사의 말
다음 기술을 사용하여 구축되었습니다:
Happy를 통해 Claude Code로 생성됨
This server cannot be installed
Maintenance
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
- AlicenseAqualityBmaintenanceMCP server for vision AI — screenshots to code, OCR, error diagnosis, and image analysis via OpenAI-compatible APIs.82MIT
- AlicenseCqualityAmaintenanceAn MCP server that enables AI agents to autonomously test, debug, and analyze web interfaces visually using Playwright, with 30 tools for screenshots, workflows, performance, and visual comparison.301780ISC
- AlicenseNot gradedqualityDmaintenanceA Model Context Protocol (MCP) server that analyzes software UI screenshots using Google's Gemini AI vision, providing detailed descriptions of UI elements, layout, functionality, and accessibility.181MIT
- AlicenseNot gradedqualityAmaintenanceMCP server for rendering responsive screenshots of URLs at multiple viewports. Enables agents to capture screenshots and detect visual issues like overflow, clipped elements, and missing alt text.MIT
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.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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