Take snapshot of websites and deliver it to LLM tools.
A Model Context Protocol (MCP) server that provides comprehensive website snapshot capabilities using Playwright. This server enables LLMs to capture and analyze web pages through structured accessibility snapshots, network monitoring, and console message collection.
First, install the MCP Web Snapshot server with your client. A typical configuration looks like this:
{
"mcpServers": {
"mcp-web-snapshot": {
"command": "uv",
"args": [
"--directory",
"/path/to/mcp-web-snapshot",
"run",
"python",
"src/server.py"
]
}
}
}
You can install the MCP Web Snapshot server using the VS Code CLI:
## For VS Code
code --add-mcp '{"name":"mcp-web-snapshot","command":"uv","args":["--directory","/path/to/mcp-web-snapshot","run","python","src/server.py"]}'
After installation, the MCP Web Snapshot server will be available for use with your GitHub Copilot agent in VS Code.
Go to Cursor Settings
→ MCP
→ Add new MCP Server
. Name to your liking, use command
type with the command uv
and args ["--directory", "/path/to/mcp-web-snapshot", "run", "python", "src/server.py"]
.
{
"mcpServers": {
"mcp-web-snapshot": {
"command": "uv",
"args": [
"--directory",
"/path/to/mcp-web-snapshot",
"run",
"python",
"src/server.py"
]
}
}
}
git clone https://github.com/your-username/mcp-web-snapshot.git
cd mcp-web-snapshot
uv sync
uv run playwright install
uv run python src/server.py
├── src/
│ ├── server.py # Main MCP server entry point
│ ├── registry.py # Tool registration logic
│ └── tools/
│ ├── __init__.py
│ └── snapshot_url.py # Web snapshot implementation
├── tests/ # Test suite
│ ├── __init__.py
│ ├── test_snapshot_url.py # Unit tests for website_snapshot
│ └── README.md # Test documentation
├── pyproject.toml # Project configuration
├── pytest.ini # Pytest configuration
├── uv.lock # Lock file for dependencies
└── README.md # This file
The project includes a comprehensive test suite using pytest:
## Run all tests
uv run pytest
## Run with verbose output
uv run pytest -v
## Run with coverage report
PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
Test coverage currently stands at 92%, covering:
Tool: website_snapshot
Description: Take comprehensive snapshots of web pages with monitoring capabilities
Parameters:
target_url
(string): The URL to capture (must be a valid URL with protocol)Features:
Example Usage:
## Through MCP client
result = await website_snapshot("https://example.com")
Output Structure:
✅ Captured snapshot with 25 elements, 12 requests, 0 console messages
🔍 Example Website - Home Page
📍 https://example.com
🎭 Accessibility Snapshot:
- navigation "Main":
- link "Home": [ref=1]
- link "About": [ref=2]
- button "Contact" [ref=3]
- main:
- heading "Welcome to Example"
- link "Get Started": [ref=4]
🌐 Network Requests:
🌐 GET https://example.com
Status: 200
Response: <!DOCTYPE html><html>...
🖥️ Console:
No console messages
🎯 Element References:
[ref=1]: link "Home"
[ref=2]: link "About"
[ref=3]: button "Contact"
[ref=4]: link "Get Started"
The server can be configured through the CONFIG
dictionary in src/tools/snapshot_url.py
:
CONFIG = {
"viewport": {"width": 1920, "height": 1080},
"user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36",
"timeout": 15000, # 15 seconds
}
Capture comprehensive page state for automated test generation:
"Please take a snapshot of https://myapp.com/login and help me create Page Object Model classes based on the discovered elements and structure."
Extract structured data for content analysis and monitoring:
"Take a snapshot of https://competitor.com/pricing and analyze any pricing changes or new features compared to what we discussed last week."
Leverage accessibility tree data for compliance checking:
"Please capture a snapshot of https://myapp.com and identify any accessibility issues or areas for improvement based on WCAG guidelines."
Monitor network activity to understand application behavior:
"Take a snapshot of https://dashboard.example.com after I log in and show me what API calls are being made so I can understand the data flow."
Generate test scenarios based on captured interactions:
"Snapshot https://myapp.com/checkout and help me create comprehensive test cases that cover all the interactive elements and user workflows."
The server includes comprehensive error handling:
git checkout -b feature-name
uv run pytest
PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
uv run ruff check
Please ensure all tests pass and maintain or improve the current test coverage.
This project is licensed under the MIT License - see the LICENSE{:target=“_blank”} file for details.
MCP server for interacting with Bluesky
The registry mcp server updates your resume while you code
An intelligent MCP server that serves as a guardian of development knowledge, providing Cline assistants with curated access to latest documentation and best practices across the software development landscape