Dropl MCP

Dropl MCP

Create client-editable photo and video galleries from Cursor or Claude Code, then embed them.

Dropl MCP lets AI coding agents set up Dropl for client websites: create client sites and showcases (embeddable photo and video galleries), upload whole folders of media with categories, fetch embed code for HTML, Next.js, WordPress, Webflow, and Framer, manage collections like menus, inventory, and events, and work through client feedback by fixing it in code, replying, and marking it done. Clients then update their own photos and videos from a phone, without a CMS.

It's an MCP server for Dropl, which gives you client-editable galleries, video hosting for agencies (an ad-free Vimeo alternative), and client feedback, for people who build client sites in code or on WordPress, Webflow, and Framer. Uploads go straight from your computer to Dropl's storage, are resumable, and are safe to re-run. The agent is told to show you a plan and get your confirmation before it creates anything or uploads.

Install

Or add it by hand: see Client configuration. Requires Node.js 20.3 or later. Nothing to install: your MCP client runs it with npx.

Then sign in once from a terminal. This opens your browser so you can approve access; the key is saved on this computer.

npx -y @dropl/mcp login

What you can ask

• *"Upload the photos in ./assets/portfolio to a new Dropl showcase for this client, one filter tab per folder."*
• *"Embed that showcase on the Work page."*
• *"I downloaded our Vimeo videos to ~/vimeo-export. Move them to Dropl and swap the Vimeo embeds for Dropl ones."*
• *"Make the menu on this site a Dropl collection my client can edit."*
• *"Fix the open Dropl feedback for this site."*
• *"Write alt text for the photos in the Projects showcase that are missing it."*
• *"How much storage and bandwidth does this client have left?"*

The agent plans first and asks before it creates, uploads, or changes a collection's fields.

Authentication

Choose one:

• Browser sign-in (recommended): npx -y @dropl/mcp login. It shows a code, opens the Dropl approval page, and saves the resulting API key. Use --client "Cursor" to label it, --no-browser to just print the link, and --api-url for a non-production API.
• API key: create one in Dropl → Settings → API keys and set it as DROPL_API_KEY in the MCP server's environment. When it's set, it takes precedence over the saved sign-in.

Only account owners and admins can approve sign-ins or create API keys. Keys can be limited to specific client sites and scopes.

Other commands:

npx -y @dropl/mcp whoami    # show the connected account and key

npx -y @dropl/mcp logout # remove the saved key from this computer

logout only deletes the local copy. To disable a key, revoke it in Dropl → Settings → API keys.

Client configuration

Cursor

In .cursor/mcp.json (this project) or ~/.cursor/mcp.json (all projects):

{

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

With an API key instead of the browser sign-in:

{

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

Don't commit a config file that contains a key. Use the user-level ~/.cursor/mcp.json, or keep the project file out of version control.

Claude Code

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

With an API key:

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

Other MCP clients

Use a stdio server with command npx and arguments ["-y", "@dropl/mcp@latest"]. Add DROPL_API_KEY to its environment if you aren't using the browser sign-in.

Tools

Collections need an API key with the collections:read scope to read, collections:write to add items, and collections:schema to create or change collections.

Feedback needs feedback:read to read and feedback:write to reply or change status. Keys created before Feedback existed don't have these scopes; run npx -y @dropl/mcp login again to get a new key. Ask your agent to *"fix the open Dropl feedback"*: it reads each request, applies text changes in the code, asks the client when something is unclear, and marks the fixed ones done.

Upload results, ids, and alt text

upload_photos and upload_videos return a files list mapping each local path to its Dropl id, with a status of uploaded, already_uploaded (skipped on a re-run, id included), failed (with error), or pending (dry run). The first 100 are listed; omitted and more say how to page through the rest with 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 } }

Set alt text and categories per photo at upload time:

{

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

Or later, without uploading again: update_items with { "showcaseId": "…", "items": [{ "id": "0190…a1", "alt": "Cedar deck at dusk", "addCategories": ["Decks"] }] }. Write concise, descriptive alt text (what the photo shows, without "image of"), and leave it empty for purely decorative photos. Alt text is at most 500 characters. Changing alt text needs the showcases:write scope.

Supported uploads: JPEG, PNG, WebP, AVIF, and HEIC photos up to 20 MB each, checked by file contents as