内容
# ShotAPI — 网页截图与渲染 MCP 服务器，为 AI 代理提供视觉能力
给你的 AI 代理配备眼睛。一个命令，零安装。
[](https://github.com/smallhandsome/shotapi-mcp-server)
[](https://registry.modelcontextprotocol.io/servers/io.github.smallhandsome/shotapi-mcp-server)
[中文文档](README_CN.md)
## 快速开始（远程模式 — 无需安装）
```bash
# Claude 代码
claude mcp add --transport streamable-http shotapi https://aiphotoshop.mynatapp.cc/mcp
# 或使用 npx
npx -y @anthropic-ai/claude-code@latest --mcp https://aiphotoshop.mynatapp.cc/mcp
```
适用于 Claude Desktop / Cursor，请在配置中添加：
```json
{
"mcpServers": {
"shotapi": {
"type": "streamable-http",
"url": "https://aiphotoshop.mynatapp.cc/mcp"
}
}
}
```
## 真实用例
### 1. Claude 验证自己的代码
```
人类：创建一个带有英雄板块、客户评价和定价表格的着陆页。
Claude：[编写 HTML/CSS 代码]
Claude：让我用渲染工具检查一下……
[Claude 调用 ShotAPI 渲染工具，传入它编写的 HTML]
Claude：定价表格在移动设备上重叠。修复响应式断点……
```
### 2. 部署验证
```
人类：我刚刚部署完毕。检查一下是否正常。
Claude：[调用 ShotAPI 对 https://yourapp.com 进行截图]
Claude：页脚文本被截断 — CSS 溢出问题。背景图片 404。
```
### 3. CI/CD 中的 UI 回归
```bash
# 捕获前后截图并比较
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 渲染为图像 — 代理编写代码，立即看到结果 | `render(html="<h1>Hello</h1>")` |
`render` 工具闭环：**编写代码 → 渲染 → 查看 → 修订 → 再次渲染**。
## 为什么选择 ShotAPI？
- **MCP 原生** — 无需胶水代码。代理直接在对话中调用工具。
- **零安装远程模式** — streamable-http，无需 Python/Playwright。
- **直接中国访问** — 无需 VPN。
- **免费层** — 50 张截图 + 50 次渲染/月，基于 IP，无需注册，无需 API 密钥。所有功能解锁（全页、选择器、WebP）。
- **渲染能力** — 不仅仅是现有页面的截图。渲染代理生成的 HTML。
- **内置广告拦截** — 更干净的截图，更少的噪音。
- **列入 MCP 注册表** — 官方 Anthropic MCP 服务器目录。
## 立即试用（无需注册）
```bash
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com" -o shot.jpg
```
## 定价
| 计划 | 价格 | 限制 |
|------|-------|-------|
| 免费 | $0 | 50+50/月（基于 IP，所有功能，无需注册） |
| 入门 | $4.90/月 | 5,000/月 |
| 专业 | $9.90/月 | 20,000/月 |
免费层：无需 API 密钥。付费：获取 [定价页面](https://aiphotoshop.mynatapp.cc/pricing) 的密钥。
## 本地模式（STDIO）
适用于私有部署或付费层使用，本地运行：
```bash
# 安装依赖
pip install -r requirements.txt
playwright install chromium
# 设置环境变量
export SHOTAPI_BASE_URL=https://aiphotoshop.mynatapp.cc
export SHOTAPI_KEY=your_key_here # 付费层可选
# 添加到 Claude 代码
claude mcp add shotapi python mcp_stdio.py
```
## 链接
- **文档**：https://aiphotoshop.mynatapp.cc/docs
- **定价**：https://aiphotoshop.mynatapp.cc/pricing
- **健康检查**：https://aiphotoshop.mynatapp.cc/health
- **MCP 注册表**：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
