ShotAPI

Screenshot and HTML rendering MCP server for AI agents

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "shotapi": {
      "command": "npx",
      "args": [
        "-y",
        "shotapi"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

ShotAPI — Web Screenshot & Render MCP Server for AI Agents

Give your AI Agent eyes. One command, zero install.

中文文档

Quick Start (Remote Mode — No Install)

bash

# 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:

config.json

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

Real Use Cases

1. Claude verifies its own code

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

Code

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

bash

# 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)

Terminal

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:

server.ts

# 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

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about ShotAPI

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "shotapi": { "command": "npx", "args": ["-y", "ShotAPI"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/shotapi?style=directory)](https://allmcps.com/mcp/shotapi)

HTML Embed

<a href="https://allmcps.com/mcp/shotapi"><img src="https://allmcps.com/api/badge/shotapi?style=directory" alt="ShotAPI on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

25Quality signal: Emerging · 25/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools10/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge and attach your website — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to ShotAPI →Install in Claude Desktop Install in Cursor Install in VS Code

ShotAPI

Screenshot and HTML rendering MCP server for AI agents

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "shotapi": {
      "command": "npx",
      "args": [
        "-y",
        "shotapi"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

ShotAPI — Web Screenshot & Render MCP Server for AI Agents

Give your AI Agent eyes. One command, zero install.

中文文档

Quick Start (Remote Mode — No Install)

bash

# 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:

config.json

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

Real Use Cases

1. Claude verifies its own code

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

Code

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

bash

# 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)

Terminal

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:

server.ts

# 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

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about ShotAPI

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "shotapi": { "command": "npx", "args": ["-y", "ShotAPI"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/shotapi?style=directory)](https://allmcps.com/mcp/shotapi)

HTML Embed

<a href="https://allmcps.com/mcp/shotapi"><img src="https://allmcps.com/api/badge/shotapi?style=directory" alt="ShotAPI on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

25Quality signal: Emerging · 25/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools10/30

Adoption & activity1/15

Community engagement0/10

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to ShotAPI →Install in Claude Desktop Install in Cursor Install in VS Code

ShotAPI

Quick Install

Client Config & Setup

Documentation Overview

ShotAPI — Web Screenshot & Render MCP Server for AI Agents

Quick Start (Remote Mode — No Install)

Real Use Cases

1. Claude verifies its own code

2. Deployment verification

3. UI regression in CI/CD

3 MCP Tools

Why ShotAPI?

Try It Now (No Signup)

Pricing

Local Mode (STDIO)

Links

Related MCP Servers

Reviews

Frequently Asked Questions about ShotAPI

AllMCPs Directory Badge

Technical Specs & Signals

Feature Your MCP Server

Own this project?

Share & Embed

Explore more

ShotAPI

Quick Install

Client Config & Setup

Documentation Overview

ShotAPI — Web Screenshot & Render MCP Server for AI Agents

Quick Start (Remote Mode — No Install)

Real Use Cases

1. Claude verifies its own code

2. Deployment verification

3. UI regression in CI/CD

3 MCP Tools

Why ShotAPI?

Try It Now (No Signup)

Pricing

Local Mode (STDIO)

Links

Related MCP Servers

Reviews

Frequently Asked Questions about ShotAPI

AllMCPs Directory Badge

Technical Specs & Signals

Feature Your MCP Server

Own this project?

Share & Embed

Explore more