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 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