Where's Waldo Rick
视觉回归 MCP 服务器
一个模型上下文协议 (MCP) 服务器,为 Claude Code 带来代理视觉能力,用于使用 Gemini 3 Flash 进行视觉回归测试。
概述
再也不用为视觉变化进行模棱两可的对话了。通过预期与非预期变化检测,准确查看发生了什么变化,并带有圈选和注释。
解决的问题
开发人员在 UI 更改上工作了数小时
构建通过,代码“干净”
你打开应用程序……布局完全一样
你问:“具体改变了什么?”
开发人员说:“我们在卡片上增加了 2 个像素”
你问:“哪里?顶部?底部?盒子里面?周围?”
😤 浪费时间,沟通不畅
解决方案
Where's Waldo Rick 提供:
来自多个平台(macOS、iOS 模拟器、Web)的屏幕截图捕获
具有可配置阈值的像素级比较
使用 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] 第一阶段:基础(MCP 服务器骨架、类型、存储)
[ ] 第二阶段:捕获与基准(多平台屏幕截图)
[ ] 第三阶段:比较引擎(OpenCV + Gemini 集成)🔥 高风险
[ ] 第四阶段:操作(缓存、渐进式分辨率、报告)
[ ] 第五阶段:润色(对话式调查)
请参阅 ROADMAP.md 获取完整的执行计划。
贡献
欢迎贡献!在贡献之前,请阅读 REQUIREMENTS.md 和 ROADMAP.md。
许可证
MIT 许可证 - 详情请参阅 LICENSE 文件
致谢
构建工具:
由 Claude Code 通过 Happy 生成
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server for building and testing AI agents with multi-model experimentation and insights.
MCP server for Mint — AI-powered QA that runs your app in a real browser on every PR.
- mcpOAuthcom.screenshotink
Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.
Related MCP Servers
- AlicenseAqualityDmaintenanceMCP 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.3046 npm83ISC
- 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.11 npm1MIT
- AlicenseNot gradedqualityCmaintenanceMCP 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