mcpField
S
shotframe

shotframe

ローカル
github.com/CloudCorpRecordsメディア・デザイン01 週間前に更新

shotframe について

shotframe は、画面レイアウトと画像ファイルを AppScreen API に送信し、App Store と Google Play 用のスクリーンショットを作成する MCP サーバーとコマンドラインツールです。ポーリング可能なレンダリングジョブ、またはダウンロードリンクを返します。

主な機能

  1. 01レイアウトと画像ファイルを送信してレンダリング
  2. 02ローカルファイルまたはインライン base64 に対応
  3. 03レンダリングジョブの状態をポーリング
  4. 04署名付きダウンロードリンクの取得
  5. 05API のクォータと費用情報の表示

活用シーン

  1. 01画面レイアウトからストア用画像を作成
  2. 02非同期レンダリングの進捗を確認
  3. 03期限切れの署名付きリンクを更新

MCP 対応

AppScreen API を介したスクリーンショット作成と、ジョブの状態やダウンロード URL の確認に使えるツールを MCP クライアントに提供します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"cloudcorprecords-shotframe": {
"command": "npx",
"args": [
"-y",
"@reneturcios/shotframe"
]
}
}
}
起動コマンドnpx -y @reneturcios/shotframe

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@reneturcios/shotframe0.1.0
ocighcr.io/cloudcorprecords/shotframe:0.1.0

ツール

2

掲載時のツール一覧 · 1 週間前に更新

パラメーター型必須説明
filesarrayいいえ画像ファイル。各項目は {name, path} または {name, base64} オブジェクトで、path または base64 のいずれか一方のみを含みます。
screensarrayはいJSON オブジェクト形式の画面レイアウト。構造は AppScreen API で定義され、内容を解釈せずに渡されます。

詳細

shotframe

App Store または Google Play のストア掲載用スクリーンショットが必要ですか? shotframe は、画面レイアウト一式と、それらが参照する画像ファイルを AppScreen API に渡し、ポーリング可能なレンダリングジョブ、または完成したスクリーンショットの直接ダウンロードリンクを返します。

レンダリングの流れ:

  • screens — JSON オブジェクトとしてのレイアウトです。その構造は AppScreen API によって定義されます。shotframe は内容をそのまま渡し、検証は行いません。
  • files — レイアウトで使用する画像です。各項目にはファイル名と、1 つだけのソースが指定されます。ローカルの path(クライアントがディスクからバイト列を読み込み、エンコードします。先頭の ~/ はホームディレクトリに展開されます)、またはインラインの base64(小さな合成テスト画像専用)です。読み取れないパスがある場合、リクエストを行う前に呼び出しは失敗します。
  • 返信には API 独自のフィールドがそのまま含まれます。キー指定または非同期レンダリングの場合は jobId、匿名またはインラインレンダリングの場合はダウンロードリンクに加え、報告される場合は balance と cost が含まれます。API が報告するクォータのメタデータは、MCP の結果の _meta に表示されます(quota、および存在する場合は balance/cost/upgradeUrl)。

ジョブのステータスを確認し、完了時に署名付きダウンロード URL を取得するには、jobId を指定してポーリングします。署名付き URL は約 1 時間で有効期限が切れるため、更新するには再度ポーリングしてください。

設定

API キーは省略可能です。サービスによって生涯 5 回までに制限されますが、匿名で利用できます。

export APPSCREEN_API_KEY="your key"   # optional

レンダリングには、ご自身の AppScreen ワークスペースのクレジットが使用されます。クレジットがなくなると、API は 402 を返し、ツールは API の費用と残高のテキストを含む insufficient_credits エラーとして報告します。shotframe 自体は決済手段を保持しません。

その他の環境変数:

  • APPSCREEN_BASE_URL — API のベース URL (デフォルトは https://api.appscreen.co)
  • APPSCREEN_MCP_CLIENT — 呼び出し元のクライアントを識別するために、X-MCP-Client ヘッダーとして送信されます

CLI

npx @reneturcios/shotframe render_screenshots '{"screens":[{"device":"iphone"}], "files":[{"name":"icon.png","path":"~/shots/icon.png"}]}'
npx @reneturcios/shotframe get_render_status '{"job_id":"job-123"}'
npx @reneturcios/shotframe --version

出力は API の結果本文を JSON 形式で表したものです。終了コード:成功時は 0、実行時エラー(検証失敗、ファイルを読み取れない場合、上流エラーを含む)時は 1、使用方法のエラー時は 2 です。

MCP サーバー

npx -y @reneturcios/shotframe mcp

MCP クライアントの設定:

{
  "mcpServers": {
    "shotframe": {
      "command": "npx",
      "args": ["-y", "@reneturcios/shotframe", "mcp"],
      "env": { "APPSCREEN_API_KEY": "your key" }
    }
  }
}
ツール
  • render_screenshots — 画面(レイアウト JSON)と画像ファイルから、App Store および Google Play のスクリーンショットをレンダリングします。キー指定または非同期レンダリングの場合は jobId、匿名またはインラインレンダリングの場合はダウンロードリンクを返します。screens は必須で、files は省略可能です。
  • get_render_status — jobId を指定してレンダリングジョブをポーリングします。ステータスと、完了時には署名付きダウンロード URL を返します。署名付き URL は約 1 時間で有効期限が切れるため、更新するには再度ポーリングしてください。

Docker

docker run -i -e APPSCREEN_API_KEY="your key" ghcr.io/cloudcorprecords/shotframe
docker run --rm ghcr.io/cloudcorprecords/shotframe get_render_status '{"job_id":"job-123"}'

開発

npm install
npm run build   # tsc -> dist/
npm test        # tsx --test test/*.test.ts (fake fetch + temp files, no network)
npm run dev     # run the CLI from source

ライセンス

MIT — Copyright (c) 2026 Rene Turcios

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。