PageLens MCP

PageLens

MCP服务器，为AI编码代理提供前端应用程序的视觉反馈。一个命令，无需配置——你的AI代理现在可以看到你的应用程序、点击按钮、读取控制台错误和差异视觉变化。

npx pagelens http://localhost:3000

问题

当使用AI编码代理（Claude Code、Cursor、Windsurf）进行前端开发时，代理是盲目的。它可以编辑代码，但看不到应用程序的样子。这会产生一个痛苦的手动循环：

1. 代理进行代码更改
2. 你看浏览器
3. 您可以用文字描述视觉问题，或截图并拖动到聊天中
4. 您手动复制控制台错误
5. 每次会话重复数十次

PageLens完全消除了这种循环。

运作原理

Your app (localhost:3000)
        |
Headless Chrome (Puppeteer)
        |
PageLens MCP Server
        |
Claude Code / Cursor / Windsurf

PageLens启动一个指向您的开发服务器的无头浏览器，被动收集控制台日志和网络错误，并公开任何兼容MCP的AI代理都可以调用的工具——屏幕截图、点击、打字、DOM检查、视觉差异——而无需您手动执行任何操作。

为什么PageLens胜过剧作家MCP/浏览器MCP？

通用浏览器自动化MCP公开了低级原语——你会得到 evaluate JavaScript, take screenshot, click element 作为单独的、断开连接的动作。PageLens是专门为AI前端开发循环构建的，它以重要的方式改变了设计：

PageLens并不试图成为一个通用的浏览器自动化框架。它只做一件事——让你的AI编码代理关注你的前端——并从循环中删除每一个手动步骤。

快速开始

1.启动您的开发服务器

npm run dev
# App running at http://localhost:5173

2.将PageLens添加到MCP配置中

注： PageLens还没有在npm上。看 发展 部分从源代码安装，然后使用下面的配置和本地路径。

克劳德代码 (.mcp.json 在项目根目录中）：

{
  "mcpServers": {
    "pagelens": {
      "command": "node",
      "args": ["/path/to/PageLens/dist/index.js", "http://localhost:5173"]
    }
  }
}

光标 (.cursor/mcp.json):

{
  "mcpServers": {
    "pagelens": {
      "command": "node",
      "args": ["/path/to/PageLens/dist/index.js", "http://localhost:5173"]
    }
  }
}

3.启动您的代理

就是这样。代理现在可以访问所有PageLens工具。让它“截取我的应用程序的屏幕截图”或“检查控制台错误”，它就可以正常工作了。

工具

观察

交互

困难

调试

CLI选项

pagelens  [options]

Options:
  --no-headless        Show the browser window
  --viewport 
  Initial viewport: mobile | tablet | desktop (default: desktop)
  -h, --help           Show help

建筑

src/
├── index.ts              # CLI entry point, arg parsing
├── server.ts             # MCP server, tool registration
├── browser.ts            # Puppeteer lifecycle, passive log/error collection
├── tools/
│   ├── screenshot.ts     # screenshot, screenshot_element, multi_route_screenshot
│   ├── console.ts        # console_logs, network_errors
│   ├── interact.ts       # click, type, navigate, set_viewport
│   ├── inspect.ts        # dom_inspect
│   └── diff.ts           # visual_diff
└── utils/
    └── viewport-presets.ts

关键设计决策：

• 延迟连接 --MCP服务器立即启动。导航到您的应用程序发生在第一次工具调用时，因此如果您的开发服务器尚未运行，PageLens永远不会崩溃。
• 被动收集 --从浏览器启动的那一刻起，控制台日志和网络错误就被捕获在环形缓冲区中。代理会在它想要的时候进行检查，而不是在事件发生的时候。
• 每次互动后的截图 — click, type, navigate，以及 set_viewport 所有这些都会返回一个屏幕截图，这样代理就可以始终看到它所做操作的结果。
• 基线存储 --视觉差异基线按路线存储在内存中。不需要文件系统设置。

发展

git clone https://github.com/amoghmanral/pagelens.git
cd pagelens
npm install
npm run build

使用Claude Code进行本地测试：

claude mcp add pagelens -- node /path/to/PageLens/dist/index.js http://localhost:3000

技术栈

• TypeScript --类型安全工具处理程序和MCP集成
• 操纵者 --无头Chrome自动化（捆绑Chromium）
• @模型上下文协议/sdk --官方MCP服务器SDK
• 像素匹配 + pngjs --用于视觉差异的像素级图像比较

许可证

麻省理工学院