AI导哈

前端视觉反馈工具

Glimpse是一款MCP服务器，为AI编程代理提供前端视觉反馈，包括截图、差异比较、DOM检查、UI交互和控制台日志等功能。

  • by AmirMakir
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 AmirMakir/glimpse-mcp

使用说明

一瞥

MCP服务器，在前端为AI编码代理提供视觉反馈。 截图、差异、DOM检查、UI交互、控制台日志——全部通过MCP。

快速开始

npx glimpse-mcp

使用克劳德代码

claude mcp add glimpse -- npx glimpse-mcp

带光标

添加 .cursor/mcp.json:

{
  "mcpServers": {
    "glimpse": {
      "command": "npx",
      "args": ["glimpse-mcp"]
    }
  }
}

工具（11）

工具 说明
page_outline 页面结构：章节、标题、导航链接
screenshot 对页面或元素进行截图
screenshot_all 一次调用中的多视口屏幕截图
pixel_diff 像素比较前后
smart_diff 结构DOM差异+像素差异
dom_inspect 检查元件样式、尺寸、位置
console_logs 浏览器控制台输出和错误
interact 点击、键入、滚动、悬停、选择页面元素
flow 多步用户流测试（登录、结账）
sweep 扫描多个页面以查找错误
accessibility 通过斧头核心进行WCAG可访问性审计

配置

创建 .glimpserc.json 在项目根目录中：

{
  "port": 3000,
  "viewports": ["mobile", "desktop"],
  "baselineDir": ".glimpse/baselines",
  "diffThreshold": 0.1,
  "ignoreSelectors": [".cookie-banner"],
  "waitAfterNavigation": 200,
  "maxPageHeight": 10000,
  "browser": "chromium"
}

所有字段都是可选的。如果没有此文件，Glimpse将使用合理的默认值。

选项 默认值 描述
port 自动检测 开发服务器端口
viewports ["mobile", "tablet", "desktop"] 的默认视口 screenshot_all
baselineDir .glimpse/baselines 在哪里保存基线
diffThreshold 0.1 像素匹配阈值（0-1）
ignoreSelectors [] diff期间要隐藏的元素
waitAfterNavigation 200 导航后等待的额外毫秒数
maxPageHeight 10000 全屏截图的最大高度
browser chromium 浏览器引擎

运作原理

Glimpse通过Playwright运行无头Chromium。当AI代理调用工具时， Glimpse打开您的localhost页面，执行操作并返回结果 通过MCP协议。

自动检测公共端口（5173、3000、8080等）上的开发服务器。

基线被持久化到磁盘(.glimpse/baselines/)所以它们在两次会话之间存活下来。

需求

  • Node.js>=18
  • 本地主机上正在运行的开发服务器

许可证

麻省理工学院

相关 MCP