Shotapi

ShotAPI — AI エージェント向け Web スクリーンショット＆レンダリング MCP サーバー

AI エージェントに目を与えましょう。コマンドはひとつ、インストールは不要です。

中国語ドキュメント

クイックスタート（リモートモード — インストール不要）

# 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

Claude Desktop／Cursor の場合は、設定に追加してください。

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

実際のユースケース

1. Claude が自分のコードを検証

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. デプロイの検証

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. CI/CD での UI リグレッション

# 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 ツール

ツール	説明	例
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 サーバーディレクトリに掲載されています。

今すぐ試す（登録不要）

curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com" -o shot.jpg

料金

プラン	価格	上限
無料	$0	月 50+50（IP ベース、すべての機能、登録不要）
Starter	$4.90/mo	月 5,000
Pro	$9.90/mo	月 20,000

無料枠：API キーは不要です。有料プラン：料金ページでキーを取得してください。

ローカルモード（STDIO）

プライベート環境へのデプロイや有料プランの利用には、ローカルで実行してください。

# 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

リンク

• ドキュメント: 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