Shotapi

ShotAPI — 面向 AI Agent 的网页截图与渲染 MCP 服务

为你的 AI Agent 装上眼睛。一条命令，无需安装。

中文文档

快速开始（远程模式 — 无需安装）

# Claude Code
claude mcp add --transport streamable-http shotapi https://aiphotoshop.mynatapp.cc/mcp

# Or with npx
npx -y @anthropic-ai/claude-code@latest --mcp https://aiphotoshop.mynatapp.cc/mcp

对于 Claude Desktop / Cursor，请添加到你的配置中：

{
  "mcpServers": {
    "shotapi": {
      "type": "streamable-http",
      "url": "https://aiphotoshop.mynatapp.cc/mcp"
    }
  }
}

实际应用场景

1. Claude 验证自己的代码

Human: Build a landing page with a hero section, testimonials, and pricing grid.

Claude: [writes HTML/CSS code]

Claude: Let me check this with the render tool...

[Claude calls ShotAPI render tool with the HTML it wrote]

Claude: The pricing grid overlaps on mobile. Fixing responsive breakpoints...

2. 部署验证

Human: I just deployed. Check if it looks right.

Claude: [calls ShotAPI screenshot on https://yourapp.com]

Claude: Footer text is cut off — CSS overflow issue. Background image 404.

3. CI/CD 中的 UI 回归测试

# Capture before/after screenshots and compare
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o before.png
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o after.png

3 个 MCP 工具

工具	描述	示例
screenshot_one_liner	一个 URL，一张截图	screenshot_one_liner(url="https://github.com")
screenshot	完全可控：视口、整页截图、CSS 选择器、格式	screenshot(url="https://github.com", selector="#hero")
render	将 HTML/CSS 渲染为图像 — Agent 编写代码，即刻查看结果	render(html="<h1>Hello</h1>")

render 工具形成了反馈闭环：编写代码 → 渲染 → 查看 → 修改 → 再次渲染。

为什么选择 ShotAPI？

• 原生支持 MCP — 无需编写胶水代码。Agent 可在对话中直接调用工具。
• 远程模式无需安装 — 使用 streamable-http，无需 Python/Playwright。
• 中国大陆可直接访问 — 无需 VPN。
• 免费套餐 — 每月 50 次截图 + 50 次渲染，按 IP 计算，无需注册、无需 API 密钥。解锁全部功能（整页截图、选择器、WebP）。
• 渲染功能 — 不只是为现有网页截图。还能渲染 Agent 生成的 HTML。
• 内置广告拦截 — 截图更清晰，干扰更少。
• 已列入 MCP Registry — Anthropic 官方 MCP 服务目录。

立即试用（无需注册）

curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com" -o shot.jpg

定价

套餐	价格	限额
免费版	$0	每月 50+50 次（按 IP 计算，全部功能，无需注册）
入门版	$4.90/mo	每月 5,000 次
专业版	$9.90/mo	每月 20,000 次

免费套餐：无需 API 密钥。付费用户：在定价页面获取密钥。

本地模式（STDIO）

对于私有部署或付费套餐用户，可在本地运行：

# Install dependencies
pip install -r requirements.txt
playwright install chromium

# Set env vars
export SHOTAPI_BASE_URL=https://aiphotoshop.mynatapp.cc
export SHOTAPI_KEY=your_key_here  # optional for paid tiers

# Add to Claude Code
claude mcp add shotapi python mcp_stdio.py

链接

• 文档：https://aiphotoshop.mynatapp.cc/docs
• 定价：https://aiphotoshop.mynatapp.cc/pricing
• 运行状态：https://aiphotoshop.mynatapp.cc/health
• MCP Registry：https://registry.modelcontextprotocol.io/servers/io.github.smallhandsome/shotapi-mcp-server
• Smithery：https://smithery.ai/server/@ljs/shotapi
• awesome-mcp-servers：https://github.com/punkpeye/awesome-mcp-servers
• Dev.to 文章：https://dev.to/smallhandsome/give-your-ai-agent-eyes-building-a-visual-mcp-server-for-web-screenshots-3f49