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.mdROADMAP.md

许可证

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

致谢

构建工具:


Claude Code 通过 Happy 生成

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