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 | string | \* | 要捕获的URL |
html | string | \* | 要呈现的原始HTML(替代url) |
markdown | string | \* | 要呈现的Markdown(替代url) |
format | string | 否 | png, jpeg, webp,或 avif (默认值:png) |
quality | number | no | 对于jpeg/webp,1–100(默认值:80) |
width | number | no | 视口宽度(默认值:1280) |
height | number | no | 视口高度(默认值:800) |
fullPage | boolean | 否 | 捕获完整的可滚动页面 |
selector | string | no | 用于元素捕获的CSS选择器 |
delay | number | no | 页面加载后等待毫秒后捕获 |
waitUntil | string | 否 | load, domcontentloaded,或 networkidle |
darkMode | boolean | 否 | 深色配色方案 |
blockAds | boolean | 否 | 阻止广告网络 |
blockCookieBanners | boolean | 否 | 阻止cookie弹出窗口 |
css | string | no | 要注入的自定义CSS |
javascript | string | no | 要执行的自定义JS |
device | string | no | 设备预设(例如。 iphone-15-pro)--使用 list_devices 查看全部 |
hideSelectors | string\[\] | no | 捕获前要隐藏的元素 |
\*至少一个 url, html,或 markdown 必须提供。
示例提示:
- “截图https://example.com在黑暗模式下”
- “屏幕截图https://github.com在iPhone 15 Pro上”
- “捕获以下内容的完整页面截图https://news.ycombinator.com广告被屏蔽”
- “将此HTML呈现为屏幕截图: `
Hello `"
______________________________________________________________________
刮擦
使用真实浏览器抓取网页内容(JavaScript渲染的页面有效)。
参数:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
url | string | yes | 要抓取的URL |
type | string | 否 | text (Markdown), html,或 links (默认值:文本) |
pages | number | no | 要跟踪的页面,1-10(默认值:1) |
waitMs | number | no | 页面加载后的额外等待时间(毫秒) |
blockResources | boolean | 否 | 阻止图像/媒体/字体以加快速度 |
locale | string | no | 浏览器区域设置(例如。 en-US) |
premiumProxy | boolean | 否 | 使用住宅代理绕过街区 |
示例提示:
- “从中删除文本内容https://example.com/blog"
- “从获取所有链接https://news.ycombinator.com"
- “刮擦https://example.com/pricing作为HTML”
______________________________________________________________________
提取
提取针对LLM优化的干净、结构化的内容。
参数:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
url | string | yes | 要提取的URL |
type | string | 否 | markdown, text, html, article, links, images, metadata,或 structured (默认值:markdown) |
selector | string | no | 作用域提取到CSS元素 |
waitFor | string | no | 提取前等待CSS选择器 |
maxLength | number | no | 最大字符长度 |
cleanOutput | boolean | no | 删除噪波(默认值:true) |
blockAds | boolean | 否 | 阻止广告网络 |
blockCookieBanners | boolean | 否 | 阻止cookie弹出窗口 |
fields | object | 否 | 自定义字段提取映射 |
示例提示:
- “从中提取文章内容https://example.com/post作为降价”
- “从以下位置获取元数据(标题、描述、OG图像)https://example.com"
- “从中提取价格和评级https://example.com/product"
______________________________________________________________________
从URL或HTML生成PDF。
参数:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
url | string | \* | 转换为PDF的URL |
html | string | \* | HTML转换为PDF(替代url) |
pdfOptions.pageSize | string | 否 | a4, a3, a5, letter, legal, tabloid (默认值:a4) |
pdfOptions.landscape | boolean | 否 | 横向 |
pdfOptions.printBackground | boolean | 否 | 包括背景图形 |
pdfOptions.scale | 数字 | 否 | 比例因子0.1–2 |
pdfOptions.marginTop | string | no | 上边距,例如。 1cm |
pdfOptions.marginBottom | string | 否 | 底部边距 |
pdfOptions.marginLeft | string | 否 | 左边距 |
pdfOptions.marginRight | string | 否 | 右边距 |
delay | number | no | 页面加载后等待毫秒 |
waitUntil | string | 否 | load, domcontentloaded,或 networkidle |
\*至少一个 url 或 html 必须提供。
示例提示:
- “生成PDFhttps://example.com/report风景A4“
- “将此HTML转换为边距为2cm的PDF”
______________________________________________________________________
分析
从URL中提取内容,并在一次调用中使用AI模型对其进行分析。
参数:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
url | string | yes | 要分析的URL |
prompt | string | yes | AI的分析指令 |
extractType | string | 否 | markdown, text, article,或 structured (默认:文章) |
maxLength | number | no | 传递给AI的内容的最大字符数(默认值:20000) |
示例提示:
- “分析https://example.com/article--主要论点是什么?"
- “从中提取所有产品规格https://example.com/product"
- “这篇新闻文章的观点是什么:https://example.com/news"
______________________________________________________________________
视频
将浏览器会话录制为视频(WebM)。
参数:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
url | string | yes | 要记录的URL |
duration | number | no | 录制持续时间(秒),1–60(默认值:5) |
width | number | no | 视口宽度(默认值:1280) |
height | number | no | 视口高度(默认值:800) |
scenario | string | no | 录制期间要运行的JavaScript(滚动、单击等) |
delay | number | no | 开始录制前等待毫秒 |
waitUntil | string | 否 | load, domcontentloaded,或 networkidle |
darkMode | boolean | 否 | 深色配色方案 |
blockAds | boolean | 否 | 阻止广告网络 |
blockCookieBanners | boolean | 否 | 阻止cookie弹出窗口 |
device | string | no | 设备预设--使用 list_devices 查看全部 |
示例提示:
- “录制一段10秒的视频https://example.com向下滚动”
- “记录https://example.com在iPhone 15 Pro上”
______________________________________________________________________
获取_使用
检查您的SnapAPI配额和月度统计数据。无需参数。
示例提示:
- “这个月我还有多少SnapAPI请求?”
- “显示我的SnapAPI使用情况”
______________________________________________________________________
列表_设备
列出屏幕截图和视频模拟的所有可用设备预设。无需参数。
示例提示: “屏幕截图有哪些设备预设?”
______________________________________________________________________
环境变量
| 变量 | 必填 | 描述 |
|---|---|---|
SNAPAPI_API_KEY | 是 | 您的SnapAPI API密钥(sk_live_...) |
SNAPAPI_BASE_URL | 没有 | API基本URL(默认值: https://api.snapapi.pics) |
______________________________________________________________________
发展
# 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 该工具作为回退,用于获取页面内容并自行分析。
______________________________________________________________________
许可证
麻省理工学院
