快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

uv run playwright install

详细介绍

MCP Web快照

一种模型上下文协议（MCP）服务器，使用以下方式提供全面的网站快照功能剧作家此服务器使LLM能够通过结构化的可访问性快照、网络监控和控制台消息收集来捕获和分析网页。

主要特点

🚀 快速轻便：使用Playwright的可访问性树进行高效快照
🎯 LLM优化：专为人工智能消费设计的结构化数据输出
📊 综合监控：捕获网络请求、响应和控制台消息
🔍 元素引用：为交互式元素添加唯一标识符，以实现精确定位
🛡️ 生产准备就绪：内置错误处理、资源限制和超时管理
✅ 经过充分测试：具有代码覆盖率的全面测试套件

需求

Python 3.11或更新版本
VS Code、Cursor、Windsurf、Claude Desktop或任何其他MCP客户端

入门指南

首先，在客户端上安装MCP Web快照服务器。典型的配置如下：

{
  "mcpServers": {
    "mcp-web-snapshot": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/mcp-web-snapshot",
        "run",
        "python",
        "src/server.py"
      ]
    }
  }
}

在VS代码中安装

您可以使用VS Code CLI安装MCP Web快照服务器：

# For VS Code
code --add-mcp '{"name":"mcp-web-snapshot","command":"uv","args":["--directory","/path/to/mcp-web-snapshot","run","python","src/server.py"]}'

安装后，MCP Web快照服务器将可用于VS Code中的GitHub Copilot代理。

在游标中安装

首选 Cursor Settings → MCP → Add new MCP Server.按你的喜好命名，使用 command 使用命令键入 uv 和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安装依赖项：

uv sync

安装Playwright浏览器：

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

测试

该项目包括一个使用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

测试覆盖率目前为92%，包括：

成功捕获快照并格式化
网络请求和控制台消息监控
URL验证
错误处理和恢复

可用工具

网站快照

工具: website_snapshot

描述：对具有监控功能的网页进行全面快照

参数:

target_url （string）：要捕获的URL（必须是具有协议的有效URL）

特性:

🎭 辅助功能快照：捕获完整的可访问性树结构
🌐 网络监控：记录页面加载期间的所有网络请求和响应
🖥️ 控制台消息：捕获客户端控制台输出（日志、警告、错误）
🎯 元素参考：向交互元素添加唯一的引用ID
📊 性能指标：提供捕获元素和网络活动的摘要

示例用法:

# Through MCP client
result = await website_snapshot("https://example.com")

输出结构:

✅ 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: ...

🖥️ Console:
No console messages

🎯 Element References:
[ref=1]: link "Home"
[ref=2]: link "About"
[ref=3]: button "Contact"
[ref=4]: link "Get Started"

配置

服务器可以通过以下方式配置 CONFIG 字典在 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
}

自定义选项

视口大小：调整浏览器窗口尺寸
用户代理：自定义浏览器标识
超时：控制页面操作的最大等待时间
内容过滤：修改响应正文大小限制和内容类型筛选器

用例

LLM指导测试

捕获全面的页面状态以自动生成测试：

"Please take a snapshot of https://myapp.com/login and help me create Page Object Model classes based on the discovered elements and structure."

Web内容分析

提取结构化数据以进行内容分析和监控：

"Take a snapshot of https://competitor.com/pricing and analyze any pricing changes or new features compared to what we discussed last week."

可访问性审计

利用可访问性树数据进行合规性检查：

"Please capture a snapshot of https://myapp.com and identify any accessibility issues or areas for improvement based on WCAG guidelines."

API集成分析

监控网络活动以了解应用程序行为：

"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."

跨浏览器测试设置

基于捕获的交互生成测试场景：

"Snapshot https://myapp.com/checkout and help me create comprehensive test cases that cover all the interactive elements and user workflows."

错误处理

服务器包括全面的错误处理：

URL无效：返回格式错误的URL的有用错误消息
网络超时：可配置的超时限制，具有优雅的回退功能
浏览器崩溃：自动清理和资源管理
内容限制：智能过滤大型响应体，防止内存问题

贡献

分叉存储库
创建要素分支： 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
提交拉取请求

请确保所有测试都通过，并保持或提高当前的测试覆盖率。

许可证

此项目根据MIT许可证获得许可-请参阅许可证文件以获取详细信息。

致谢

灵感来自 MCP服务器网站快照文章
建立在以下基础之上微软剧作家MCP
由...驱动剧作家实现可靠的浏览器自动化
用途模型上下文协议用于LLM集成

目录标签

PythonClaude浏览器自动化research-and-data网页快照本地部署网络监控可访问性分析LLM优化

支持客户端

Claude DesktopClaudeCursorWindsurfVS Code

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

none

运行时（runtime，运行环境）

Python

工具数量（toolCount，工具数）

1

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdionone部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP.so

mcp.so

/server/mcp-web-snapshot/gustavo-meilus

Take snapshot of websites and deliver it to LLM tools.

MCP World

mcpworld.com

/detail/371928fb2416360bc2943b914bda8c54

MCP Web Snapshot是一个基于Playwright的网页快照服务，专为LLMs设计，提供结构化可访问性快照、网络监控和控制台消息收集功能。

继续浏览同类 MCP

更多搜索检索 MCP（7,303）返回 MCP 目录

上一个 MCP

MCP Web Server

一个使用Brave Search API提供网页搜索功能的MCP服务器。

下一个 MCP

MCP Web Tools

MCP Web Tools是一款本地运行的网页搜索和内容抓取工具，为AI助手提供直接的网络请求能力。

MCP Web Snapshot