smallhandsome

Posted on Jun 5

ShotAPI - Let AI Agents See the Web: Screenshot and Render MCP Server

#ai #mcp #python

The web is visual — but most AI agents can only read text. What if your AI assistant could actually see a webpage, capture a screenshot, or render HTML to an image?

That's exactly what ShotAPI does. It's an MCP (Model Context Protocol) server that gives AI agents like Claude, Cursor, and Copilot the ability to take screenshots of any URL and render HTML/CSS to images.

What is ShotAPI?

ShotAPI is a screenshot and render API built as an MCP Server. It runs on FastAPI + Playwright, offering two core tools:

screenshot — Capture any webpage as a PNG/JPEG image
render — Convert HTML/CSS markup into a rendered image

How AI Agents Use ShotAPI

Via the MCP protocol, any MCP-compatible AI client can connect to ShotAPI and use these tools natively:

Claude Desktop — Add ShotAPI as an MCP server, and Claude can see any webpage you mention
Cursor/Windsurf — AI coding assistants can screenshot sites for design reference
Custom agents — Any agent using the MCP SDK can integrate visual web capabilities

Two Transport Modes

ShotAPI supports both MCP transport modes:

stdio — For local Claude Desktop integration (JSON-RPC over stdin/stdout)
streamable-http — For remote/Cursor integration (HTTP at /mcp endpoint)

The streamable-http mode means you can host ShotAPI remotely and let multiple agents connect — no local installation needed.

Quick Start: Connect as MCP Server

For Claude Desktop, add this to your MCP config:

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

For Cursor/Windsurf, the same config works in their MCP settings.

Free Tier + Paid Plans

ShotAPI offers a generous free tier:

30 screenshots + 30 renders per month (IP-based, no signup needed)
No API key required for free usage

Paid plans for heavier usage:

Starter — 5,000 calls/month
Pro — 20,000 calls/month

API Endpoints

GET /v1/screenshot?url=https://example.com&width=1280&height=720&format=png
GET /v1/render?html=<h1>Hello</h1>&width=800&height=600&format=png

Both endpoints return image data directly.

Get Started

Visit ShotAPI website to try it free
Check the API docs for integration details
Connect as MCP server in your AI client config

ShotAPI is open and ready — give your AI agent eyes on the web!

DEV Community