AppScreenshots

AppScreenshots MCP

简体中文 · クライアントの設定 · ツール · トラブルシューティング

AI エージェントで編集可能なアプリのスクリーンショットプロジェクトを作成し、許可されたアセットを使用して、利用可能なクライアントのブラウザーツールでデザインを確認・修正した後、AppScreenshots でウェブサイトから書き出せるよう、エディターのリンクを共有できます。

プレビューサービスは稼働中です。 2026年9月18日、あるプロトコルクライアントが OAuth を完了し、2フレームのプロジェクトを作成・編集して、ウェブサイトのエディターを開き、2つの PNG を書き出しました。Claude Code、Codex、Gemini CLI、Kimi Code、ZCode、ChatGPT との個別連携は、まだ認証されていません。ウェブサイトのループバックコールバックの修正がデプロイされるまでは、127.0.0.1 のリダイレクト URI を使用するクライアントで認証に失敗することがあります。詳しくはトラブルシューティングをご覧ください。

この公開リポジトリには、接続例、小さなインストールヘルパー、オプションのエージェント Skillが含まれています。MCP サーバーは AppScreenshots 内で動作します。ウェブサイト、認証、データベース、課金、レンダリングのバックエンドコードは、既存の非公開デプロイメント内に引き続き配置されます。このヘルパーはローカルの stdio サーバーではありません。

MCP サービスに接続する

リモート Streamable HTTP エンドポイント：

https://appscreenshots.net/api/mcp

クライアントを選び、その OAuth フローに従ってください。AppScreenshots アカウントでサインインし、プロジェクトやアセットを選択して、必要に応じて新しいプロジェクトを許可します。データベースの認証情報やサービス API キーは不要です。

Claude Code

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

Claude Code で /mcp を開き、AppScreenshots を認証します。

Codex

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

Gemini CLI、Kimi Code、ZCode、ChatGPT については、クライアントの設定をご覧ください。ツールの呼び出しには MCP だけで十分です。以下の Skill を使うと、デザインとプレビューのワークフローを再利用できます。

オプションの Skill をインストールする

Git と Node.js 20 以降が必要です。npm の依存関係やインストールフックは使用しません。

git clone https://github.com/horace68/appscreenshots-mcp.git
cd appscreenshots-mcp
node bin/appscreenshots.mjs install-skill codex

Claude Code の場合は、最後の行を次のように置き換えます。

node bin/appscreenshots.mjs install-skill claude

インストーラーは、Codex の場合は skills/appscreenshots を ~/.agents/skills/appscreenshots に、Claude Code の場合は ~/.claude/skills/appscreenshots にコピーします。既存のディレクトリがある場合、上書きは行いません。Skill を認識させるにはエージェントを再起動し、Codex では $appscreenshots、Claude Code では /appscreenshots を使用します。MCP への接続と認証は別途行ってください。

プロジェクト内またはその他の互換性のある Skill ホストで使用するには、Skill の親ディレクトリを明示的に指定します。

node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills --dry-run
node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills

クライアントが必要とするディレクトリを使用してください。インストーラーは、他のクライアントを自動設定したり、既存の MCP 設定を変更したりしません。カスタマイズした Skill を更新する場合は、このリポジトリと比較して変更内容を統合してください。クリーンな状態で更新するには、古いディレクトリを別の場所に移動してから、インストールを再実行します。アンインストールするには、インストールした appscreenshots Skill ディレクトリだけを削除してください。サーバーへのアクセス権は、ウェブサイトの設定で別途取り消してください。

接続ヘルパー

node bin/appscreenshots.mjs config codex
node bin/appscreenshots.mjs config claude
node bin/appscreenshots.mjs config gemini
node bin/appscreenshots.mjs config kimi
node bin/appscreenshots.mjs doctor

config は、既存の設定にマージするスニペットを表示します。doctor は公開 OAuth ディスカバリーを確認し、認証情報は送信せず、ディスカバリーが利用できない場合はゼロ以外の終了コードで終了します。認証やレンダリングのテストは行いません。npm パッケージ名は npm レジストリに公開されていないため、この Git リポジトリを使用してください。

タスクを試す

許可済みのスクリーンショットを使って、英語の App Store スクリーンショットプロジェクトを作成してください。利用可能なテンプレートを選び、見出しは短くしてください。利用可能なブラウザーツールでエディターを開いてスクリーンショットを確認し、クリッピング、トリミング、レイアウトの問題を修正してください。その後、ウェブサイトで書き出せるよう、プロジェクトのリンクを教えてください。

スクリーンショットは、まずウェブサイトにアップロードしてから、プロジェクトまたは個別のアセットを許可してください。チャットへの添付ファイルは、MCP から自動的に利用できるわけではありません。ツールのリファレンスでは、編集、再試行、プレビュー、ダウンロードについて説明しています。

利用可能状況とデータ

デフォルトのフローでは、クラウドレンダリングは不要です。MCP がプロジェクトを保存し、エージェントが独自のブラウザツールを使ってウェブサイトを確認し、ユーザーがエディターでエクスポートします。ブラウザーアクセスはクライアントによって提供され、この Skill によってインストールされるものではありません。ウェブサイトへのログインは MCP OAuth とは別です。ブラウザー／画像ツールを利用できない場合、ビジュアル検証は保留となります。プロジェクト、テンプレート、エクスポートの利用権限は引き続き適用されます。ブラウザー確認ガイドを参照してください。

アクセスの管理や取り消しは、Settings → Connected AI tools で行えます。このリポジトリは、購入、削除、ホスト型 AI 生成、アプリストアへの公開を実装していません。セキュリティと範囲。

開発

npm test
npm run check
npm pack --dry-run

テストでは、設定の生成、インストールの分離、上書き保護、CLI の失敗、検出診断を検証します。CI は Node.js 20 と 22 を使用し、Linux、macOS、Windows で実行されます。あるプロトコルクライアントでは、ホスト環境での作成、エディターのプレビュー、エクスポートのフローが完了しています。個別のクライアント連携とアセットのアップロードは、引き続き未検証です。互換性マトリックスを参照してください。

MIT ライセンスは、このリポジトリのヘルパー、サンプル、Skill に適用されますが、ホストサービスへのアクセスや、ユーザーのアセット、有料テンプレート、ウェブサイトのバックエンドに関する権利を付与するものではありません。