一瞥
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
- 本地主机上正在运行的开发服务器
许可证
麻省理工学院