Dropl MCP

Dropl MCP

Cursor または Claude Code からクライアントが編集できる写真・動画ギャラリーを作成して、埋め込みます。

Dropl MCP を使うと、AI コーディングエージェントがクライアントのウェブサイト向けに Dropl を設定できます。クライアントのサイトやショーケース（埋め込み可能な写真・動画ギャラリー）の作成、カテゴリを設定したメディアフォルダー一式のアップロード、HTML、Next.js、WordPress、Webflow、Framer 用の埋め込みコードの取得、メニュー、在庫、イベントなどのコレクションの管理、コードを修正して返信し、対応済みとしてマークすることによるクライアントのフィードバックへの対応が可能です。クライアントは CMS を使わずに、スマートフォンから自分の写真や動画を更新できます。

これは Dropl 向けの MCP サーバーです。Dropl では、クライアントが編集できるギャラリー、エージェンシー向けの動画ホスティング（広告なしの Vimeo 代替サービス）、クライアントからのフィードバックを利用できます。コード、WordPress、Webflow、Framer でクライアントサイトを構築する方向けです。アップロードはコンピューターから Dropl のストレージに直接送信され、中断後に再開でき、再実行しても安全です。エージェントは、何かを作成またはアップロードする前に、計画を提示して確認を求めるよう指示されています。

インストール

または手動で追加します。クライアントの設定を参照してください。Node.js 20.3 以降が必要です。インストールは不要です。MCP クライアントが npx で実行します。

次に、ターミナルから一度サインインします。ブラウザーが開き、アクセスを承認できます。キーはこのコンピューターに保存されます。

npx -y @dropl/mcp login

依頼できること

• 「./assets/portfolio にある写真を、このクライアント用に新しい Dropl ショーケースへアップロードして。フォルダーごとにフィルタータブを1つ作って。」
• 「そのショーケースを Work ページに埋め込んで。」
• 「Vimeo の動画を ~/vimeo-export にダウンロードした。Dropl に移して、Vimeo の埋め込みを Dropl のものに置き換えて。」
• 「このサイトのメニューを、クライアントが編集できる Dropl コレクションにして。」
• 「このサイトの未対応の Dropl フィードバックを修正して。」
• 「Projects ショーケースにある、代替テキストが未設定の写真に代替テキストを書いて。」
• 「このクライアントのストレージと帯域幅はあとどれくらい残っている？」

エージェントはまず計画を立て、作成、アップロード、またはコレクションのフィールド変更を行う前に確認を求めます。

認証

次のいずれかを選択してください。

• ブラウザーでサインイン（推奨）： npx -y @dropl/mcp login を実行します。コードが表示され、Dropl の承認ページが開き、API キーが保存されます。ラベルを付けるには --client "Cursor"、リンクのみを表示するには --no-browser、本番環境以外の API を使うには --api-url を指定します。
• API キー： Dropl → Settings → API keys でキーを作成し、MCP サーバーの環境変数 DROPL_API_KEY に設定します。設定されている場合、保存済みのサインインより優先されます。

サインインを承認したり、API キーを作成したりできるのは、アカウントのオーナーと管理者のみです。キーは特定のクライアントサイトやスコープに制限できます。

その他のコマンド：

npx -y @dropl/mcp whoami    # show the connected account and key
npx -y @dropl/mcp logout    # remove the saved key from this computer

logout はローカルのコピーを削除するだけです。キーを無効にするには、Dropl → Settings → API keys でキーを取り消してください。

クライアントの設定

Cursor

.cursor/mcp.json（このプロジェクト）または ~/.cursor/mcp.json（すべてのプロジェクト）に設定します。

{
  "mcpServers": {
    "dropl": {
      "command": "npx",
      "args": ["-y", "@dropl/mcp@latest"]
    }
  }
}

ブラウザーでのサインインの代わりに API キーを使う場合：

{
  "mcpServers": {
    "dropl": {
      "command": "npx",
      "args": ["-y", "@dropl/mcp@latest"],
      "env": { "DROPL_API_KEY": "dropl_live_…" }
    }
  }
}

キーを含む設定ファイルをコミットしないでください。ユーザーレベルの ~/.cursor/mcp.json を使うか、プロジェクトの設定ファイルをバージョン管理の対象外にしてください。

Claude Code

claude mcp add dropl -- npx -y @dropl/mcp@latest

API キーを使う場合：

claude mcp add dropl -e DROPL_API_KEY=dropl_live_… -- npx -y @dropl/mcp@latest

その他の MCP クライアント

npx コマンドと引数 ["-y", "@dropl/mcp@latest"] を使用して、stdio サーバーを使います。ブラウザーでサインインしない場合は、環境変数に DROPL_API_KEY を追加してください。

ツール

ツール	機能
plan_migration	ローカルフォルダーをスキャンします。データはアップロードしません。フォルダーごとの写真／動画の数とサイズ、未対応ファイル、提案カテゴリー、実行手順を返します。layout: "projects" を指定するか、プロジェクトフォルダーを含む projects/ フォルダーを使用すると、フォルダーごとにプロジェクトを計画し、タイトル、スラッグ、件数を返します。
whoami	接続中のアカウント、ユーザー、ロール、キー名／プレフィックス、スコープ、サイト制限を返します。
list_sites / create_site	クライアントのサイトを一覧表示するか、サイトを作成します（名前、任意のドメイン）。
list_showcases / create_showcase	サイトのショーケースを種類とプロジェクト数とともに一覧表示するか、ショーケースを作成します（タイトル、type は gallery または projects、レイアウト、グリッドの表示調整、カテゴリーの絞り込み、ページサイズ）。
get_showcase / update_showcase	ショーケースの概要（ステータス別・カテゴリー別のアイテム、プロジェクト、代替テキストがない写真、失敗）を返すか、設定を変更します。
list_showcase_items	ショーケースのアイテムをページ単位で取得します。内容は、ID、種類、ステータス、ファイル名、アップロード元のローカルパス、代替テキスト、カテゴリーです。種類、代替テキストの有無、カテゴリー、テキストで絞り込めます。
update_items	アップロード時に返される ID を指定して、複数のアイテムの代替テキストを設定し、カテゴリーを追加または削除します（一度の呼び出しで実行できます。ライブラリ動画の ID も使用できます）。存在しないカテゴリーは作成されます。
create_category	ショーケースにカテゴリーを追加します。同じ名前のカテゴリーがすでに存在する場合は、それを再利用します。
tag_items	アップロード時に返される ID を指定して、ショーケースのアイテムにカテゴリーを追加または削除します。
upload_photos	ファイル、フォルダー、または glob から写真をショーケースにアップロードします。写真ごとに代替テキストとカテゴリーを任意で指定できます（files）。フォルダー名からカテゴリーを作成することもできます。projects ショーケースでは、project を指定するとそのプロジェクトにアップロードします。ドライランと再開に対応しています。各ファイルのショーケースアイテム ID を返します。
list_videos	サイトの動画を一覧表示します。
upload_videos	再開可能なパート方式で動画をサイトのライブラリにアップロードし、任意でカテゴリーとともにショーケース（または project を指定してそのプロジェクト）に追加します。各ファイルの動画 ID（およびショーケースアイテム ID）を返します。
add_videos_to_showcase	ライブラリ内の既存の動画をショーケースまたはそのプロジェクトに追加します。
get_embed_code	動画またはショーケース（あるいはカテゴリーまたはプロジェクト）の埋め込みコードと、HTML、React/Next.js、WordPress、Webflow、Framer への貼り付け方法を返します。projects ショーケースでは、projectUrl（例：/work/{slug}）を指定すると、インデックスカードからプロジェクトごとのページにリンクできます。
list_projects	projects ショーケースのプロジェクトを順番に一覧表示します（抜粋、詳細、カテゴリー、件数）。または、1 つのプロジェクトの完全な説明と写真・動画を返します。
create_project / update_project	プロジェクトを追加（タイトル、サブタイトル、説明、スラッグ、詳細、カテゴリー）または変更します。カバーも変更できます。同じタイトルまたはスラッグのプロジェクトがすでに存在する場合は、それを再利用します。
reorder_projects / reorder_project_items	プロジェクトの順序、または 1 つのプロジェクト内の写真・動画の順序を設定します。一部のリスト項目は先頭に配置され、残りは順序を維持します。
get_project_details	projects ショーケースのカスタム詳細（場所や年などのフィールド）とその version を返します。ダッシュボードで行われた編集も含まれます。
plan_project_details / apply_project_details	保存せずにプロジェクト詳細の変更をプレビューし、読み取った expectedVersion を指定して適用します。キーは変更できません。値を削除するには confirmDestructive が必要です。
get_usage	プランに対するストレージと帯域幅の使用量、およびアップロードが停止されているかどうかを返します。
list_collections	サイトのコレクション（メニュー、在庫、イベント）を、アイテム数とプラン上限とともに一覧表示します。
get_collection_schema	コレクションの現在のフィールドと schemaVersion を返します。ダッシュボードで行われた編集も含まれます。
plan_collections / apply_collection_plan	コレクションの作成または変更をプレーンテキストの差分としてプレビューし、適用します。破壊的な変更には confirmDestructive が必要です。古いスキーマに基づくプランは拒否されます。
add_collection_items	アイテムを一括追加し、アイテムごとのエラーを返します。デフォルトではドライランで実行されます。再試行しても重複しません。
list_collection_items	検索、ステータスやフィールドによる絞り込み、並べ替え、ページ分割を指定してアイテムを一覧表示します。
get_collection_code	コレクションの TypeScript 型と Next.js のフェッチ例を返します。
undo_collection_change	データが失われない場合に、直近のスキーマ変更を取り消します。
list_feedback	サイトでクライアントが残したフィードバック（コメント、テキストの変更、メモ）を一覧表示します。デフォルトではオープンおよび対応中のものが対象です。ステータス、種類、ページで絞り込めます。
get_feedback	1 件のリクエストについて、ページ、クリックされた要素（セレクターとテキスト）、デバイス、スクリーンショットと写真、スレッドなど、完全なコンテキストを返します。
reply_to_feedback	クライアントに詳細の確認を求める場合などに、リクエストのスレッドに返信します。クライアントにメールが送信されます。再試行しても二重投稿されません。
update_feedback_status	ステータスをオープン、対応中、完了、または対応しないに設定し、短いメモを追加します。完了にするとクライアントにメールが送信されます。
コレクションの読み取りには collections:read スコープ、アイテムの追加には collections:write スコープ、コレクションの作成または変更には collections:schema スコープが必要です。

フィードバックの読み取りには feedback:read スコープ、返信またはステータスの変更には feedback:write スコープが必要です。Feedback が登場する前に作成されたキーには、これらのスコープがありません。新しいキーを取得するには、もう一度 npx -y @dropl/mcp login を実行してください。エージェントに 「未対応の Dropl フィードバックを修正して」 と依頼すると、各リクエストを読み取り、コードにテキストの変更を適用し、不明な点があればクライアントに確認して、修正したものを完了としてマークします。

アップロード結果、ID、代替テキスト

upload_photos と upload_videos は、各ローカルパスを Dropl ID に対応付けた files リストを返します。各項目のステータスは uploaded、already_uploaded（再実行時にスキップされ、ID が含まれます）、failed（error が含まれます）、または pending（ドライラン）です。最初の 100 件が表示されます。残りのページ取得方法は omitted と more で確認でき、list_showcase_items を使って取得できます。

{
  "uploaded": 2,
  "alreadyUploaded": 1,
  "altTextSet": 2,
  "files": {
    "count": 3,
    "items": [
      { "path": "Decks/cedar.jpg", "id": "0190…a1", "status": "uploaded" },
      { "path": "Decks/railing.jpg", "id": "0190…a2", "status": "uploaded" },
      { "path": "kitchen.jpg", "id": "0190…a0", "status": "already_uploaded" }
    ],
    "omitted": 0,
    "more": null
  }
}

アップロード時に、写真ごとに代替テキストとカテゴリーを設定します。

{
  "showcaseId": "…",
  "files": [
    { "path": "/abs/photos/cedar.jpg", "alt": "Cedar deck with glass railing at dusk", "categories": ["Decks"] },
    { "path": "/abs/photos/texture.jpg", "alt": "" }
  ]
}

または、再アップロードせずに後から update_items を使って設定します。例：{ "showcaseId": "…", "items": [{ "id": "0190…a1", "alt": "Cedar deck at dusk", "addCategories": ["Decks"] }] }。簡潔で説明的な代替テキスト（写真に写っているものを、「画像」などの語を使わずに説明）を記述し、装飾目的のみの写真は空欄にしてください。代替テキストは最大 500 文字です。代替テキストの変更には showcases:write スコープが必要です。

対応しているアップロード形式：JPEG、PNG、WebP、AVIF、HEIC の写真（各 20 MB 以下。拡張子だけでなくファイルの内容も確認します）。動画は MP4、MOV、WebM、MKV、AVI、MPEG、M4V に対応しています。隠しファイルはスキップされます。アップロード対象のフォルダーの外を指すシンボリックリンクはたどりません。

環境変数

変数	用途
DROPL_API_KEY	保存済みのサインイン情報の代わりに使用する API キーです。
DROPL_API_URL	API のベース URL です。デフォルトは https://www.dropl.io/api です。プレーンな http:// は localhost／127.0.0.1 に限り使用できます。たとえば、ローカル開発では http://localhost:3000/api を使用できます。

セキュリティ

• 保存されたキーは ~/.config/dropl/credentials.json（設定されている場合は $XDG_CONFIG_HOME/dropl、Windows では %APPDATA%\dropl）にあります。フォルダーはモード 0700 で作成され、ファイルはモード 0600 でアトミックに書き込まれます。他のユーザーが読み取れる場合、サーバーはファイルの読み取りを拒否します。
• キー全体が表示されることはありません。表示されるのはプレフィックス（例：dropl_live_ab12…）のみです。キーをチャットに貼り付けるよう求めないことがエージェントに指示されています。
• キーは、設定された Dropl API に HTTPS 経由でのみ送信され、リダイレクトは一切たどりません。ファイルは短期間有効な署名付き URL を通じてストレージにアップロードされます。キーがストレージに送信されることはありません。
• 中断されたアップロードを再開できるよう、アップロードの進捗を記録した小さなマニフェストが ~/.config/dropl/uploads/ に保存されます。記録されるのはファイルパスと Dropl ID で、ファイルの内容は記録されません。
• Dropl → Settings → API keys で、いつでも任意のキーを無効化できます。

FAQ

無料ですか？ MCP サーバーは無料のオープンソース（MIT）です。Dropl アカウントが必要です。新規アカウントでは、クレジットカード不要の無料トライアルを利用できます。料金はユーザー数ではなく、クライアントのサイトごとに設定されています。詳しくは料金をご覧ください。

クライアントにもアカウントが必要ですか？ 編集する場合のみ必要です。Dropl → Settings → Sites からクライアントを招待すると、そのサイトだけが表示されるクライアントポータルを利用できるようになります。クライアントはスマートフォンから自分の写真や動画を更新したり、コレクションを編集したり、変更をリクエストしたりできます。クライアントサイト向けの CMS の代替手段です。覚えることはなく、コードに触れる必要もありません。ウェブサイトの訪問者には何も必要ありません。

どのサイトビルダーに対応していますか？ 埋め込みコードまたはスクリプトタグを受け付けるものであれば、どれでも使えます。get_embed_code は写真ギャラリーの埋め込みコードまたは動画プレーヤーを返します。プレーンな HTML、React、Next.js、WordPress、Webflow、Framer への貼り付け手順も含まれているため、同じショーケースを Webflow ギャラリーや Framer ギャラリーとして表示できます。コードで作成されたサイトでは、コレクションを JSON としても提供します。CMS を実行せずに Next.js でヘッドレスメディアを利用できます。

ファイルはどこに保存されますか？ お使いの Dropl アカウントに保存されます。アップロードは有効期間の短い署名付き URL を介して、コンピューターから Dropl のストレージに直接送信され、埋め込みコンテンツはそこから配信されます。コンピューター上でサーバーが保持するのは、サインインキーと小さなアップロードログのみです（セキュリティをご覧ください）。

録画するデモ

上記は、デモができるまでのプレースホルダーです。1280×800 程度で録画し、それぞれ 30 秒以内に収めて、docs/media/ に保存してください。npm パッケージにはこのフォルダーが含まれないため、公開リポジトリの絶対 URL でリンクしてください（例：https://raw.githubusercontent.com/<owner>/<repo>/main/docs/media/fix-feedback.gif）。これにより npm 上でも表示されます。

1. fix-feedback.gif：Cursor で「このサイトに関する未対応の Dropl フィードバックを修正して」と指示します。エージェントがリクエストを一覧表示し、コードを編集し、不明瞭なリクエストの 1 つについて返信し、残りを完了済みにするところを見せます。その後、クライアントポータルで完了済みとして表示される様子を見せます。
2. folder-to-embed.gif：「./assets/portfolio を新しいショーケースにアップロードして、Work ページに埋め込んで」と指示します。計画と確認、アップロードの進捗、ページに貼り付けられた埋め込みコード、フィルタータブ付きのギャラリーをブラウザーで表示する様子を見せます。