Developing website UI's with MCP just got a lot easier. A Model Context Protocol (MCP) server that provides screenshot tools for AI assistants using Puppeteer.
概览
Developing website UI's with MCP just got a lot easier. A Model Context Protocol (MCP) server that provides screenshot tools for AI assistants using Puppeteer. This server integrates with MCP-compatible hosts like Cursor to enable AI agents to capture and analyze web page screenshots, console logs, errors, and warnings. PuppeteerMCP implements the Model Context Protocol to bridge AI assistants with web page screenshot capabilities. When working with AI-assisted development, this server allows AI agents to: 1. Navigate to any URL via tools 2. Capture screenshots at multiple viewport breakpoints 3. Return visual feedback with structured metadata 4. Support both headless and headful browser modes This enables more effective AI-assisted development by providing visual context through the standardized MCP protocol.
README
以下为原文 README 节选，完整内容请查看原文。
PuppeteerMCP Server
Developing website UI’s with MCP just got a lot easier. A Model Context Protocol (MCP) server that provides screenshot tools for AI assistants using Puppeteer. This server integrates with MCP-compatible hosts like Cursor to enable AI agents to capture and analyze web page screenshots, console logs, errors, and warnings.
Overview
PuppeteerMCP implements the Model Context Protocol to bridge AI assistants with web page screenshot capabilities. When working with AI-assisted development, this server allows AI agents to:
- Navigate to any URL via tools
- Capture screenshots at multiple viewport breakpoints
- Return visual feedback with structured metadata
- Support both headless and headful browser modes
This enables more effective AI-assisted development by providing visual context through the standardized MCP protocol.
Features
Current Features
- ✅ MCP server implementation with TypeScript SDK
- ✅ Screenshot tools for AI agents with multi-breakpoint capture
- ✅ stdio transport for seamless Cursor integration
- ✅ Multi-breakpoint screenshots (mobile, tablet, desktop)
- ✅ Automatic page height detection for full-page capture
- ✅ Structured tool responses with detailed metadata
- ✅ Error reporting - JavaScript errors, console logs, network issues
- ✅ Performance optimization - JPEG compression and width limiting
- ✅ Page interaction capabilities - Click, type, scroll, hover, form filling, waiting
In Progress
- ✅ Completed - Error reporting and debugging features
Future Developments
🚀 High Priority Features
- 📋 Element-specific screenshots - Target CSS selectors for component-level captures
- 📋 Performance monitoring - Lighthouse scores, Core Web Vitals, bundle analysis
- 📋 Accessibility testing - WCAG violations, color contrast, keyboard navigation
🎯 Advanced Testing & Analysis
- 📋 Visual regression testing - Compare screenshots against baselines
- 📋 Cross-browser testing - Firefox, Safari, Edge screenshot comparison
- 📋 Content extraction - Pull text, links, SEO data for analysis
- 📋 Form validation testing - Auto-fill and validate form behavior
- 📋 Animation capture - Record CSS animations and transitions
- 📋 Multi-step user flows - Test complete user journeys
🛠️ Development Workflow Integration
- 📋 Local development watching - Auto-screenshot on file changes
- 📋 Git integration - Commit screenshots with code changes
- 📋 Hot reload capture - Screenshot after development server updates
- 📋 API-driven testing - Screenshot pages with different data sets
- 📋 Database integration - Test with real/mock data scenarios
📱 Device & Platform Testing
- 📋 Real device emulation - iPhone, Android, tablet testing
- 📋 Mobile-specific features - Touch gestures, device orientation
- 📋 Progressive Web App testing - Offline states, service workers
安装
npx @modelcontextprotocol/inspector build/index.js配置
{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["/absolute/path/to/PuppeteerMCP/build/index.js"]
}
}
}