Summary
Gives Claude the ability to capture screenshots of live URLs and render arbitrary HTML/CSS to images through three MCP tools: screenshot_one_liner for quick captures, screenshot with full control over viewport and selectors, and render for testing AI-generated markup. The render tool is the standout feature here, it closes the feedback loop so agents can write HTML, see what it looks like, then iterate without leaving the conversation. Uses streamable-http transport so you can add it without installing Playwright locally, though a local STDIO mode is available for paid tiers. Free tier gives you 10 screenshots and 10 renders per month, no API key required. Useful for deployment verification, visual regression checks, or any workflow where your agent needs to see what a page actually looks like.
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →ShotAPI — Web Screenshot & Render MCP Server for AI Agents
Give your AI Agent eyes. One command, zero install.
Quick Start (Remote Mode — No Install)
# 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
For Claude Desktop / Cursor, add to your config:
{
"mcpServers": {
"shotapi": {
"type": "streamable-http",
"url": "https://aiphotoshop.mynatapp.cc/mcp"
}
}
}
Real Use Cases
1. Claude verifies its own code
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. Deployment verification
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. UI regression in CI/CD
# 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 Tools
| Tool | Description | Example |
|---|---|---|
screenshot_one_liner | One URL, one screenshot | screenshot_one_liner(url="https://github.com") |
screenshot | Full control: viewport, full-page, CSS selector, format | screenshot(url="https://github.com", selector="#hero") |
render | Render HTML/CSS to image — Agent writes code, sees result instantly | render(html="<h1>Hello</h1>") |
The render tool closes the feedback loop: write code → render → see → revise → render again.
Why ShotAPI?
- MCP-native — No glue code. Agent calls tools directly in conversation.
- Zero install remote mode — streamable-http, no Python/Playwright needed.
- Direct China access — No VPN required.
- Free tier — 50 screenshots + 50 renders/month, IP-based, no signup, no API key. All features unlocked (full-page, selector, WebP).
- Render capability — Not just screenshots of existing pages. Render Agent-generated HTML.
- Built-in ad blocking — Cleaner screenshots, less noise.
- Listed in MCP Registry — Official Anthropic MCP server directory.
Try It Now (No Signup)
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com" -o shot.jpg
Pricing
| Plan | Price | Limit |
|---|---|---|
| Free | $0 | 50+50/month (IP-based, all features, no signup) |
| Starter | $4.90/mo | 5,000/month |
| Pro | $9.90/mo | 20,000/month |
Free tier: no API key needed. Paid: get key at pricing page.
Local Mode (STDIO)
For private deployments or paid-tier usage, run locally:
# 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
Links
- Docs: https://aiphotoshop.mynatapp.cc/docs
- Pricing: https://aiphotoshop.mynatapp.cc/pricing
- Health: 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 Article: https://dev.to/smallhandsome/give-your-ai-agent-eyes-building-a-visual-mcp-server-for-web-screenshots-3f49
Featured
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →