X (Twitter)

Claude Code、Codex、Gemini CLI などの MCP クライアントを接続し、AI でスクリーンショットプロジェクトを作成・編集、ブラウザで確認、Webサイトのエディタから書き出します。

AI ツールを接続する

この AppScreenshots デプロイで MCP が有効な場合、互換性のある AI ツールに以下のエンドポイントを登録します：

https://appscreenshots.net/api/mcp

HTTP / Streamable HTTP と OAuth を選択してください。ブラウザで AppScreenshots にログインし、ツールが利用できるプロジェクトとアセットを選び、プロジェクト作成を許可するかどうかを決めます。データベースアクセスも API キーも不要です。

概要とサンプルプロンプトは MCP ランディングページを参照してください。

クライアントを接続する

以下のコマンドでエンドポイントを各クライアントに登録します。接続後、クライアントが表示したらブラウザログインを完了してください。

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

その後 Claude Code で /mcp を実行して認可します。プロジェクトスコープの接続にはユーザースコープではなく .mcp.json のマージを使い、両方を同時に設定しないでください。

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

クライアントの config.toml に url = "..." を含む [mcp_servers.appscreenshots] セクションをマージする方法もあります。

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Gemini CLI 内で /mcp auth appscreenshots を実行します。設定ファイルでは httpUrl で Streamable HTTP を指定し、"oauth": {"enabled": true} を加えます。

/mcp-config を開いてエンドポイントの HTTP サーバーを追加し、/mcp-config login appscreenshots を実行します。設定ファイルは ~/.kimi-code/mcp.json です：

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

設定追加後にセッションを再起動してください。旧 kimi-cli では代わりに kimi mcp add --transport http --auth oauth を使います。

~/.zcode/cli/config.json の mcp.servers にサーバーをマージするか、Settings → MCP で appscreenshots という HTTP サービスを追加します：

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

セッションを再起動し、クライアントが表示したら OAuth ブラウザログインを完了します。デスクトップクライアントは約 180 秒で保留中の認可をキャンセルするため、ログインはすみやかに完了してください。

アカウントまたはワークスペースで利用できるカスタム MCP 接続エントリで、OAuth と上のエンドポイントを使用します。利用可否はアカウントとワークスペースの設定次第で、公開 GitHub リポジトリが ChatGPT のディレクトリ掲載を自動的に作ることはありません。

クライアントごとの接続手順は、公式ドキュメントと完了済みのプロトコルレベルのエンドツーエンドテスト（OAuth、プロジェクト作成、編集、Webサイトプレビュー、エクスポート）に基づきます。個別クライアントの認証は進行中です。現在の状況は接続キットの検証マトリクスを参照してください。

接続キット

公開リポジトリ appscreenshots-mcp には、上記すべてのクライアントの設定ファイル、スクリーンショットワークフローを教えるオプションのエージェント Skill、ターミナルからサーバーを診断する doctor コマンドが含まれます：

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # クライアント設定スニペットを表示
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

このヘルパーは設定の表示と Skill のインストールだけを行います。ローカル stdio サーバーではないため、クライアント本来のリモート接続を使ってください。

ツール

以下の 9 つのツールが Streamable HTTP 経由で提供されます。クライアントが名前にプレフィックスを付けることがあります。入力スキーマとアカウント権限の最新情報はホスト側サーバーが正です。

ツール	種別	役割
`get_capabilities`	読み取り	権限、デザイン範囲（100〜5000 px）、デバイス、要素タイプ、`maxFrames`（20）、`maxElementsPerFrame`（100）、プレビュー/エクスポートモード
`search_templates`	読み取り	公開テンプレートのメタデータを検索（`query`、`offset`）
`get_template`	読み取り	権限のあるテンプレートを id で取得
`list_projects`	読み取り	許可されたプロジェクトを一覧表示、1 ページ 25 件
`get_project`	読み取り	現在のリビジョンと編集可能なデザイン、`editorUrl` を取得
`get_project_preview`	読み取り	エディタリンク、リビジョン、フレーム、ブラウザレビュー手順 — 画像ではなくテキスト
`list_assets`	読み取り	共有アセットと許可プロジェクト内のアセットを一覧表示、1 ページ 50 件
`create_project`	書き込み	テンプレートまたは空白キャンバスから作成（`name`、任意の `templateId`、`width`、`height`、`idempotencyKey`）
`update_project`	書き込み	1 回の呼び出しで 1〜100 個の構造化操作を適用、`expectedRevision` と `idempotencyKey` 付き

編集操作

update_project は次の判別可能な操作リストを受け付けます：

set_name —— プロジェクトの名前変更
add_frame / remove_frame / reorder_frames —— フレーム管理
upsert_element —— 要素の挿入または置換。完全なジオメトリが必要で、同じ要素タイプの省略フィールドは保持されます
patch_element —— 要素 id による部分編集。要素タイプの変更は不可
remove_element —— 要素の削除
set_background —— 1 フレームの背景を設定。共有背景はフレームごとに確定されます
set_locales —— 1〜20 のロケールとデフォルトロケールを設定
set_canvas —— キャンバスサイズ（100〜5000）とモード（separate または continuous）

要素はタイポグラフィ、デバイスモックアップフィールド、画像の assetId 参照、図形、アイコン、rotation、stackOrder を持ちます。画像は許可された assetId でのみ参照できます — URL やローカルパスは使えず、既存の画像参照はサーバー側で保持されるため送り返さないでください。

論理的な書き込みには毎回新しい冪等キーを使い、完全に同一のリトライでのみ再利用します。リビジョン競合後は最新版を読んでから再開してください。SQL、HTML、スクリプトを編集指示として使ってはいけません。

エラー

エラーは {code, message} の JSON と isError: true で返ります：

コード	意味
`REVISION_CONFLICT`	`expectedRevision` 以降にプロジェクトが変更された — 再読み込みしてリトライ
`ASSET_NOT_AUTHORIZED`	アセットが同意ページで選択されていない
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	参照されたフレームまたは要素が存在しない
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` では要素タイプを変更できない
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	フレーム順序またはデフォルトロケールが不正
`DUPLICATE_ID`	id が既存と衝突している
`PROJECT_SIZE_LIMIT`	フレーム・要素・ペイロードの上限を超過
`RATE_LIMITED`	呼び出しが多すぎる — `Retry-After` 付きの HTTP 429

認可と制限

サーバーは OAuth 2.1 + PKCE のブラウザログインを使用します：

スコープ：projects:read、projects:write（作成・編集を許可した場合のみ）、assets:read、offline_access。
アクセストークンは 1 時間、リフレッシュトークンは 30 日有効です。
アクセストークンは有効なグラントを要求します。接続を取り消すと既存トークンは即時に無効になります。
レート制限：無料プランで毎分 60 回、有料プランで毎分 120 回の MCP 呼び出し。超過すると Retry-After: 60 付きの HTTP 429 を返します。
リクエストボディは 2 MB、プロジェクトは 20 フレーム・フレームあたり 100 要素が上限です。

プランの権限は通常どおり適用されます。プロジェクト数、有料テンプレート、カスタムフォント、一括エクスポートの制限は変わらず、ホスト AI の課金もありません — デザインとコピーは接続した AI が提供します。

まずスクリーンショットを用意する

元のスクリーンショットは Webサイトのエディタで先にアップロードしてください。そのプロジェクトを認可するか、同意ページで個別のアセットを選択します。MCP にはバイナリアップロードのツールがなく、チャットに添付したファイルは自動的には利用できません。

次のプロンプトを試してください：

許可済みアセットを使い、利用可能なテンプレートから英語の App Store スクリーンショットプロジェクトを作成してください。短い見出しとシンプルなレイアウトで。ブラウザツールでエディタを開き、スクリーンショットを確認して視覚的な問題を修正し、Webサイトでエクスポートできるプロジェクトリンクを渡してください。

デザインとコピーは接続した AI が担い、MCP は編集可能なプロジェクトを保存します。get_project_preview は画像ではなくエディタリンクとレビュー手順を返します。ブラウザツールを持つエージェントはエディタを開き、スクリーンショットを確認し、MCP で修正してから安全に再読み込みして確認できます。ブラウザログインは MCP の OAuth とは別で、未保存の編集は再読み込み前に保持してください。プレビューとエクスポートはユーザーが Webサイトのエディタで行います。

アクセスを管理する

Settings → Connected AI tools でプロジェクトやアセットの範囲を変更したり、接続を取り消せます。ツールは未選択のプロジェクトにアクセスできません。Webサイトと AI ツールが同じプロジェクトを同時に編集する場合は、保存前に最新版を再読み込みしてください。

ブラウザレビューに Browserless やバックグラウンドのレンダリングキューは不要です。この MCP が提供するのはプロジェクトツールとブラウザレビューの指針であり、クラウドレンダリングではありません。ブラウザ/画像ツールがない場合、エージェントは検証を主張するのではなく、エディタリンクを返して視覚確認が未完了であると報告すべきです。

トラブルシューティング

症状	対処
`invalid_redirect_uri: web clients require https redirect URIs`	ループバック（`http://127.0.0.1:<ポート>/callback` または `http://localhost:<ポート>/callback`）を使い、ループバック登録をネイティブクライアントの既定に任せる
`WWW-Authenticate: Bearer resource_metadata=…` 付きの 401	未認証呼び出しに対する通常のディスカバリー応答 — クライアントで OAuth フローを完了する
認可が繰り返し切れる	クライアントから再接続する。グラントの取り消しや期限切れでリフレッシュトークンは無効になる
クライアントがブラウザログインをキャンセルする	すみやかにログインを完了し（一部クライアントは約 180 秒でキャンセル）、接続をやり直す
429 `RATE_LIMITED`	`Retry-After`（60 秒）を待ってからリトライ。有料プランでは毎分 120 回まで

クライアント別の注意点と最新の検証マトリクスは接続キットのトラブルシューティングガイドを参照してください。

AI ツールを接続する

この AppScreenshots デプロイで MCP が有効な場合、互換性のある AI ツールに以下のエンドポイントを登録します：

https://appscreenshots.net/api/mcp

概要とサンプルプロンプトは MCP ランディングページを参照してください。

クライアントを接続する

以下のコマンドでエンドポイントを各クライアントに登録します。接続後、クライアントが表示したらブラウザログインを完了してください。

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

クライアントの config.toml に url = "..." を含む [mcp_servers.appscreenshots] セクションをマージする方法もあります。

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Gemini CLI 内で /mcp auth appscreenshots を実行します。設定ファイルでは httpUrl で Streamable HTTP を指定し、"oauth": {"enabled": true} を加えます。

/mcp-config を開いてエンドポイントの HTTP サーバーを追加し、/mcp-config login appscreenshots を実行します。設定ファイルは ~/.kimi-code/mcp.json です：

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

設定追加後にセッションを再起動してください。旧 kimi-cli では代わりに kimi mcp add --transport http --auth oauth を使います。

~/.zcode/cli/config.json の mcp.servers にサーバーをマージするか、Settings → MCP で appscreenshots という HTTP サービスを追加します：

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

接続キット

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # クライアント設定スニペットを表示
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

ツール

ツール	種別	役割
`get_capabilities`	読み取り	権限、デザイン範囲（100〜5000 px）、デバイス、要素タイプ、`maxFrames`（20）、`maxElementsPerFrame`（100）、プレビュー/エクスポートモード
`search_templates`	読み取り	公開テンプレートのメタデータを検索（`query`、`offset`）
`get_template`	読み取り	権限のあるテンプレートを id で取得
`list_projects`	読み取り	許可されたプロジェクトを一覧表示、1 ページ 25 件
`get_project`	読み取り	現在のリビジョンと編集可能なデザイン、`editorUrl` を取得
`get_project_preview`	読み取り	エディタリンク、リビジョン、フレーム、ブラウザレビュー手順 — 画像ではなくテキスト
`list_assets`	読み取り	共有アセットと許可プロジェクト内のアセットを一覧表示、1 ページ 50 件
`create_project`	書き込み	テンプレートまたは空白キャンバスから作成（`name`、任意の `templateId`、`width`、`height`、`idempotencyKey`）
`update_project`	書き込み	1 回の呼び出しで 1〜100 個の構造化操作を適用、`expectedRevision` と `idempotencyKey` 付き

編集操作

update_project は次の判別可能な操作リストを受け付けます：

set_name —— プロジェクトの名前変更
add_frame / remove_frame / reorder_frames —— フレーム管理
upsert_element —— 要素の挿入または置換。完全なジオメトリが必要で、同じ要素タイプの省略フィールドは保持されます
patch_element —— 要素 id による部分編集。要素タイプの変更は不可
remove_element —— 要素の削除
set_background —— 1 フレームの背景を設定。共有背景はフレームごとに確定されます
set_locales —— 1〜20 のロケールとデフォルトロケールを設定
set_canvas —— キャンバスサイズ（100〜5000）とモード（separate または continuous）

エラー

エラーは {code, message} の JSON と isError: true で返ります：

コード	意味
`REVISION_CONFLICT`	`expectedRevision` 以降にプロジェクトが変更された — 再読み込みしてリトライ
`ASSET_NOT_AUTHORIZED`	アセットが同意ページで選択されていない
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	参照されたフレームまたは要素が存在しない
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` では要素タイプを変更できない
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	フレーム順序またはデフォルトロケールが不正
`DUPLICATE_ID`	id が既存と衝突している
`PROJECT_SIZE_LIMIT`	フレーム・要素・ペイロードの上限を超過
`RATE_LIMITED`	呼び出しが多すぎる — `Retry-After` 付きの HTTP 429

認可と制限

サーバーは OAuth 2.1 + PKCE のブラウザログインを使用します：

スコープ：projects:read、projects:write（作成・編集を許可した場合のみ）、assets:read、offline_access。
アクセストークンは 1 時間、リフレッシュトークンは 30 日有効です。
アクセストークンは有効なグラントを要求します。接続を取り消すと既存トークンは即時に無効になります。
レート制限：無料プランで毎分 60 回、有料プランで毎分 120 回の MCP 呼び出し。超過すると Retry-After: 60 付きの HTTP 429 を返します。
リクエストボディは 2 MB、プロジェクトは 20 フレーム・フレームあたり 100 要素が上限です。

症状	対処
`invalid_redirect_uri: web clients require https redirect URIs`	ループバック（`http://127.0.0.1:<ポート>/callback` または `http://localhost:<ポート>/callback`）を使い、ループバック登録をネイティブクライアントの既定に任せる
`WWW-Authenticate: Bearer resource_metadata=…` 付きの 401	未認証呼び出しに対する通常のディスカバリー応答 — クライアントで OAuth フローを完了する
認可が繰り返し切れる	クライアントから再接続する。グラントの取り消しや期限切れでリフレッシュトークンは無効になる
クライアントがブラウザログインをキャンセルする	すみやかにログインを完了し（一部クライアントは約 180 秒でキャンセル）、接続をやり直す
429 `RATE_LIMITED`	`Retry-After`（60 秒）を待ってからリトライ。有料プランでは毎分 120 回まで

クライアント別の注意点と最新の検証マトリクスは接続キットのトラブルシューティングガイドを参照してください。

AI ツールを接続する

AI ツールを接続する

クライアントを接続する

接続キット

ツール

編集操作

エラー

認可と制限

まずスクリーンショットを用意する

アクセスを管理する

トラブルシューティング

目次

AI ツールを接続する

AI ツールを接続する

クライアントを接続する

接続キット

ツール

編集操作

エラー

認可と制限

まずスクリーンショットを用意する

アクセスを管理する

トラブルシューティング

目次