Skip to main content
Glama

视觉回归 MCP 服务器

一个模型上下文协议 (MCP) 服务器,为 Claude Code 带来代理视觉能力,用于使用 Gemini 3 Flash 进行视觉回归测试。

概述

再也不用为视觉变化进行模棱两可的对话了。通过预期与非预期变化检测,准确查看发生了什么变化,并带有圈选和注释。

解决的问题

  • 开发人员在 UI 更改上工作了数小时

  • 构建通过,代码“干净”

  • 你打开应用程序……布局完全一样

  • 你问:“具体改变了什么?”

  • 开发人员说:“我们在卡片上增加了 2 个像素”

  • 你问:“哪里?顶部?底部?盒子里面?周围?”

  • 😤 浪费时间,沟通不畅

解决方案

Where's Waldo Rick 提供:

  1. 来自多个平台(macOS、iOS 模拟器、Web)的屏幕截图捕获

  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] 第一阶段:基础(MCP 服务器骨架、类型、存储)

  • [ ] 第二阶段:捕获与基准(多平台屏幕截图)

  • [ ] 第三阶段:比较引擎(OpenCV + Gemini 集成)🔥 高风险

  • [ ] 第四阶段:操作(缓存、渐进式分辨率、报告)

  • [ ] 第五阶段:润色(对话式调查)

请参阅 ROADMAP.md 获取完整的执行计划。

贡献

欢迎贡献!在贡献之前,请阅读 REQUIREMENTS.md 和 ROADMAP.md。

许可证

MIT 许可证 - 详情请参阅 LICENSE 文件

致谢

构建工具:


由 Claude Code 通过 Happy 生成

Related MCP Connectors

Related MCP Servers