snapapi-mcp

SnapAPI 的 MCP (Model Context Protocol) 服务器 — 可直接从 Claude Desktop、Cursor、Windsurf、Cline 和 Zed 等 AI 工具中截取屏幕截图、抓取网页、提取内容、生成 PDF、录制视频并分析页面。

这是什么？

此包运行一个本地 MCP 服务器，将您的 AI 助手连接到 SnapAPI 网络捕获 API。配置完成后，您的 AI 可以：

• 截取屏幕截图：支持任何 URL（全页、移动端、深色模式、元素选择、设备模拟）

• 抓取网页：使用真实浏览器获取干净的文本、HTML 或链接列表

• 提取内容：针对 LLM 使用进行优化（Markdown、文章、元数据、结构化数据）

• 生成 PDF：从 URL 或 HTML 生成

• 录制视频：录制浏览器会话，支持可选的交互场景

• 分析页面：通过 AI 进行分析（一次调用即可完成提取 + 分析）

• 检查使用情况：查看配额和账户统计信息

先决条件

• Node.js 18 或更高版本

• SnapAPI API 密钥 — 请在 app.snapapi.pics 获取

快速入门

Claude Desktop

添加到 ~/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

添加到 ~/.cursor/mcp.json：

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

Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json：

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

Cline (VS Code)

打开 Cline 设置 → MCP Servers → Add Server：

• Command: npx

• Args: -y snapapi-mcp

• Environment: SNAPAPI_API_KEY=sk_live_your_key_here

VS Code (原生 MCP 支持)

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

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

Zed

添加到 ~/.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

可用工具

ping

验证 SnapAPI 是否可达且您的 API 密钥有效。无需参数。

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

screenshot

截取任何 URL 的屏幕截图，并提供丰富的自定义选项。

参数：

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

示例提示词：

• "在深色模式下截取 https://example.com 的屏幕截图"

• "在 iPhone 15 Pro 上截取 https://github.com"

• "截取 https://news.ycombinator.com 的全页截图并拦截广告"

• "将此 HTML 渲染为截图：<h1>Hello</h1>"

scrape

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

参数：

示例提示词：

• "抓取 https://example.com/blog 的文本内容"

• "获取 https://news.ycombinator.com 的所有链接"

• "以 HTML 格式抓取 https://example.com/pricing"

extract

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

参数：

示例提示词：

• "将 https://example.com/post 的文章内容提取为 markdown"

• "从 https://example.com 获取元数据（标题、描述、OG 图像）"

• "从 https://example.com/product 提取价格和评分"

pdf

从 URL 或 HTML 生成 PDF。

参数：

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

示例提示词：

• "将 https://example.com/report 生成为横向 A4 PDF"

• "将此 HTML 转换为带有 2cm 边距的 PDF"

analyze

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

参数：

示例提示词：

• "分析 https://example.com/article — 主要论点是什么？"

• "从 https://example.com/product 提取所有产品规格"

• "这篇新闻文章的情感倾向是什么：https://example.com/news"

video

将浏览器会话录制为视频 (WebM)。

参数：

示例提示词：

• "录制一段 10 秒的 https://example.com 向下滚动的视频"

• "在 iPhone 15 Pro 上录制 https://example.com"

get_usage

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

示例提示词：

• "我这个月还剩多少 SnapAPI 请求？"

• "显示我的 SnapAPI 使用情况"

list_devices

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

示例提示词： "有哪些可用于截图的设备预设？"

环境变量

开发

# 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 environment variable is required" 确保 MCP 配置中的 env 块包含您的 API 密钥。检查它是否以 sk_live_ 开头。

工具未在 Claude Desktop 中显示 保存配置后重启 Claude Desktop。检查 MCP 日志：

• macOS: ~/Library/Logs/Claude/mcp*.log

• Windows: %APPDATA%\Claude\logs\mcp*.log

npx 首次运行时耗时过长 使用 "args": ["-y", "snapapi-mcp"] — -y 标志会自动确认安装提示，无需交互。

screenshot / scrape 返回错误

• 在 app.snapapi.pics/dashboard 验证您的 API 密钥是否有效

• 使用 get_usage 工具检查剩余配额

• 对于 JavaScript 繁重的页面，尝试添加 "waitUntil": "networkidle" 和 "delay" 值

analyze 工具返回错误 分析端点需要 SnapAPI 后端上的 Anthropic API 额度。使用 extract 工具作为回退方案来获取页面内容并自行分析。

许可证

MIT