Give AI Agents Eyes: ShotAPI MCP Server for Web Screenshots

Why This Matters

When you're working with an AI coding agent, you often need to:

Verify deployments — "Does the landing page look right?"
Debug UI issues — "Why is the layout broken on mobile?"
Capture visual data — "What does this dashboard chart show?"
Test responsive designs — "How does this look at 1280px vs 768px?"

Your agent can fetch the HTML, but it can't render it. ShotAPI fills that gap.

One Command to Connect

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

# Cursor → Settings → MCP → Add server
{
  "mcpServers": {
    "shotapi": {
      "type": "streamable-http",
      "url": "https://aiphotoshop.mynatapp.cc/mcp"
    }
  }
}

No Python, no Playwright, no Docker. It's a remote MCP server — just connect and start screenshoting.

3 MCP Tools

Tool	What it does	Example prompt
`screenshot`	Capture a webpage screenshot	"Screenshot github.com"
`render`	Render HTML string to an image	"Render this HTML to an image"
`health`	Check service status	"Is ShotAPI alive?"

REST API (No MCP Required)

# Screenshot
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://news.ycombinator.com" -o shot.png

# Render HTML
curl -s -X POST "https://aiphotoshop.mynatapp.cc/v1/render" \
  -H "Content-Type: application/json" \
  -d '{"html":"<h1>Hello ShotAPI</h1>","width":800,"height":600}' \
  -o render.png

Free Tier vs Paid

Feature	Free (10+10/mo)	Paid ($4.90/mo)
Screenshot+Render	10 each/month	5,000+/month
Formats	PNG/JPEG	PNG/JPEG/WebP
Full-page screenshots	❌	✅
CSS selector capture	❌	✅
Custom viewport sizes	❌	✅
Auth	IP-based	API Key