网页捕捉API服务

snapapi mcp

MCP（模型上下文协议）服务器 SnapAPI --直接从Claude Desktop、Cursor、Windsurf、Cline和Zed等人工智能工具中截取屏幕截图、抓取网页、提取内容、生成PDF、录制视频和分析页面。

这是什么？

该软件包运行本地MCP服务器，将您的人工智能助手连接到SnapAPI web捕获API。配置后，您的AI可以：

• 截图 任何URL（全屏、移动、暗模式、元素选择、设备模拟）
• 废弃网页 使用真实的浏览器获取干净的文本、HTML或链接列表
• 提取内容 针对LLM消费进行了优化（Markdown、文章、元数据、结构化数据）
• 生成PDF 来自URL或HTML
• 录制视频 具有可选交互场景的浏览器会话
• 分析页面 使用AI（一次通话中提取+分析）
• 检查您的使用情况 配额和帐户统计信息

先决条件

• Node.js 18或更高版本
• 一个SnapAPI API密钥-在 app.snapapi.pics

快速开始

克劳德桌面

添加 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）：

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

保存后重新启动Claude Desktop。

光标

添加 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

帆板运动

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Cline（VS代码）

打开临床设置→ MCP服务器→ 添加服务器：

• 命令： npx
• Args： -y snapapi-mcp
• 环境： SNAPAPI_API_KEY=sk_live_your_key_here

VS代码（原生MCP支持）

添加 .vscode/mcp.json 在您的工作区（或用户设置）中：

{
  "servers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

泽德

添加 ~/.config/zed/settings.json:

{
  "context_servers": {
    "snapapi": {
      "command": {
        "path": "npx",
        "args": ["-y", "snapapi-mcp"],
        "env": {
          "SNAPAPI_API_KEY": "sk_live_your_key_here"
        }
      }
    }
  }
}

自动安装程序

运行附带的辅助脚本：

# For Claude Desktop
./install-mcp.sh claude

# For Cursor
./install-mcp.sh cursor

# For Windsurf
./install-mcp.sh windsurf

可用工具

拼

请验证SnapAPI是否可访问，以及您的API密钥是否有效。无需参数。

示例提示： “Ping SnapAPI以检查其是否正常工作”

截图

对任何具有广泛自定义功能的URL进行截图。

参数：

*至少一个 url, html，或 markdown 必须提供。

示例提示：

• “截图https://example.com在黑暗模式下”
• “屏幕截图https://github.com在iPhone 15 Pro上”
• “捕获以下内容的完整页面截图https://news.ycombinator.com广告被屏蔽”
• “将此HTML呈现为屏幕截图： <h1>Hello</h1>"

刮擦

使用真实浏览器抓取网页内容（JavaScript渲染的页面有效）。

参数：

示例提示：

• “从中删除文本内容https://example.com/blog"
• “从获取所有链接https://news.ycombinator.com"
• “刮擦https://example.com/pricing作为HTML”

提取

提取针对LLM优化的干净、结构化的内容。

参数：

示例提示：

• “从中提取文章内容https://example.com/post作为降价”
• “从以下位置获取元数据（标题、描述、OG图像）https://example.com"
• “从中提取价格和评级https://example.com/product"

PDF

从URL或HTML生成PDF。

参数：

*至少一个 url 或 html 必须提供。

示例提示：

• “生成PDFhttps://example.com/report风景A4“
• “将此HTML转换为边距为2cm的PDF”

分析

从URL中提取内容，并在一次调用中使用AI模型对其进行分析。

参数：

示例提示：

• “分析https://example.com/article--主要论点是什么？"
• “从中提取所有产品规格https://example.com/product"
• “这篇新闻文章的观点是什么：https://example.com/news"

视频

将浏览器会话录制为视频（WebM）。

参数：

示例提示：

• “录制一段10秒的视频https://example.com向下滚动”
• “记录https://example.com在iPhone 15 Pro上”

获取_使用

检查您的SnapAPI配额和月度统计数据。无需参数。

示例提示：

• “这个月我还有多少SnapAPI请求？”
• “显示我的SnapAPI使用情况”

列表_设备

列出屏幕截图和视频模拟的所有可用设备预设。无需参数。

示例提示： “屏幕截图有哪些设备预设？”

环境变量

发展

# Clone the repo
git clone https://github.com/Sleywill/snapapi-mcp.git
cd snapapi-mcp

# Install dependencies
npm install

# Build
npm run build

# Run locally (reads MCP protocol from stdin)
SNAPAPI_API_KEY=sk_live_your_key node dist/index.js

故障排除

“SNAPAPI_API_KEY环境变量是必需的” 确保 env MCP配置中的块包含您的API密钥。检查它开始于 sk_live_.

工具未出现在Claude Desktop中 保存配置后重新启动Claude Desktop。检查MCP日志：

• macOS： ~/Library/Logs/Claude/mcp*.log
• 窗户： %APPDATA%\Claude\logs\mcp*.log

npx第一次运行时间太长 使用 "args": ["-y", "snapapi-mcp"] --the -y flag自动确认安装提示，无需交互。

截图/抓取返回错误

• 在验证您的API密钥是否有效 app.snapapi.pics/仪表板
• 使用以下工具检查您的剩余配额 get_usage 工具
• 对于JavaScript繁重的页面，请尝试添加 "waitUntil": "networkidle" 和一个 "delay" 价值

分析工具返回错误 分析终结点需要SnapAPI后端上的Anthropic API信用。使用 extract 该工具作为回退，用于获取页面内容并自行分析。

许可证

麻省理工学院