ShotAPI MCP Server

io.github.smallhandsome由 GitHub 帳號 smallhandsome 發布v1.0.1更新於 Oct 24, 2026

Screenshot and HTML render MCP server for AI agents

已驗證Streamable HTTP可網頁執行瀏覽器自動化開發者工具

概覽

AI 產生的概覽

遠端 MCP 伺服器，讓助理對網頁截圖並把 HTML/CSS 算繪成圖片，以便直接檢視自己的輸出。

可以做什麼
  • 用一次呼叫對單一網址截圖
  • 依視窗大小、整頁、CSS 選擇器與格式等參數自訂截圖
  • 把助理撰寫的 HTML/CSS 算繪成圖片，方便查看並反覆修改
  • 透過 HTTP 介面在部署或 CI 檢查中做前後對比截圖
適用情境
適合助理撰寫 HTML/CSS 或前端程式碼後需要查看算繪結果時，也適合在不於本機安裝瀏覽器環境的情況下快速目視檢查已部署的頁面。
執行需求
遠端 streamable-http 端點，不需本機安裝或 Playwright。清單宣告需要 OAuth，而 README 描述的是以 IP 計算的免費額度、免註冊或 API 金鑰。本機 STDIO 模式需要 Python、Playwright Chromium，並可選擇設定 SHOTAPI_BASE_URL 與 SHOTAPI_KEY 環境變數。
安裝前請注意
截圖與算繪的 HTML 會傳送到第三方服務，應避免提交含密鑰或隱私資料的頁面與程式碼。付費方案需要 API 金鑰（SHOTAPI_KEY）並付費訂閱。免費額度依 IP 計算且有限制，README 的免驗證說法與清單要求的 OAuth 有所衝突。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 ShotAPI MCP Server，將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存，絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.smallhandsome%2Fshotapi-mcp-server/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

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

README

ShotAPI — Web Screenshot & Render MCP Server for AI Agents

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

[GitHub stars] [MCP Registry]

中文文档

Quick Start (Remote Mode — No Install)

bash
# Claude Codeclaude mcp add --transport streamable-http shotapi https://aiphotoshop.mynatapp.cc/mcp
# Or with npxnpx -y @anthropic-ai/claude-code@latest --mcp https://aiphotoshop.mynatapp.cc/mcp

For Claude Desktop / Cursor, add to your config:

json
{  "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

bash
# Capture before/after screenshots and comparecurl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o before.pngcurl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o after.png

3 MCP Tools

ToolDescriptionExample
screenshot_one_linerOne URL, one screenshotscreenshot_one_liner(url="https://github.com")
screenshotFull control: viewport, full-page, CSS selector, formatscreenshot(url="https://github.com", selector="#hero")
renderRender HTML/CSS to image — Agent writes code, sees result instantlyrender(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)

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

Pricing

PlanPriceLimit
Free$050+50/month (IP-based, all features, no signup)
Starter$4.90/mo5,000/month
Pro$9.90/mo20,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:

bash
# Install dependenciespip install -r requirements.txtplaywright install chromium
# Set env varsexport SHOTAPI_BASE_URL=https://aiphotoshop.mynatapp.ccexport SHOTAPI_KEY=your_key_here  # optional for paid tiers
# Add to Claude Codeclaude mcp add shotapi python mcp_stdio.py

Links

來源：README.md，提交 09b175a

工具

0
該伺服器需要 API 金鑰等憑證，因此 SourceWeft 無法在沒有憑證的情況下讀取其工具，也未收錄。

版本歷史

1
  1. v1.0.1最新Sep 16, 2026

評分

已滿足適用檢查項的 85%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分