Dropl MCP

Client-editable galleries, set up from Cursor or Claude Code.

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.

Add to Cursor Add to VS Code Read the setup guide

Setup

Two steps. Then just ask.

Use the buttons above, or add the server to your tool by hand. Then sign in once. Works with Cursor, Claude Code, VS Code, and any client that supports MCP.

.cursor/mcp.json (Cursor)

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

Terminal (Claude Code)

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

Any MCP client

Command:   npx
Arguments: -y @dropl/mcp@latest

Then sign in (opens your browser)

npx -y @dropl/mcp login

Tools

What your assistant can do

Every tool the Dropl MCP server provides. Anything that creates, uploads, or changes a schema shows you the plan first.

Galleries

plan_migration: Scans a local folder without uploading and proposes a plan for you to confirm.
upload_photos: Uploads local photos into a showcase, with alt text and categories per photo. Returns each file's id. Dry run first; resumable.
list_showcases: Lists a client site's showcases, newest first.
create_showcase: Creates an embeddable photo and video gallery after you confirm.
get_showcase: Summarizes a showcase: settings, items by status, categories, photos missing alt text, and failed items.
list_showcase_items: Pages through a showcase's items with their ids, the local files they came from, alt text, and categories.
update_items: Sets alt text and adds or removes categories on many items at once, by the ids uploads return. No re-upload.
update_showcase: Changes a showcase's title, layout, filter tabs, or page size.
create_category: Adds a filter tab, reusing one that already exists.
tag_items: Adds or removes categories on showcase photos and videos, by the ids uploads return.
get_embed_code: Returns the official embed for a video or showcase, and where to paste it (HTML, React/Next.js, WordPress, Webflow, Framer).

Projects

list_projects: Lists a portfolio showcase's projects with their details, categories, and photos.
create_project: Adds a project with its title, location line, description, details, and categories.
update_project: Changes a project's text, link name, cover photo, details, or categories.
reorder_projects: Puts projects in a new order on the website.
reorder_project_items: Reorders the photos and videos inside one project.
get_project_details: Reads the custom project details (like square footage or year), including dashboard edits.
plan_project_details: Dry run: previews changes to the custom project details as a plain-text diff. Nothing is saved.
apply_project_details: Saves the details change you approved. Removing values needs explicit confirmation; a stale plan is refused.

Video

upload_videos: Uploads local videos to a client site's library and returns each file's id. Dry run first; resumable.
list_videos: Lists videos in a client site's library, with an optional title search.
add_videos_to_showcase: Adds existing library videos to a showcase.

Collections

list_collections: Lists a client site's collections with item counts, when the site last read each one, and the plan's limits.
get_collection_schema: Reads a collection's current fields, including edits made in the dashboard, so changes start from the real state.
plan_collections: Dry run: previews creating or changing up to 10 collections and returns a plain-text diff. Nothing is saved.
apply_collection_plan: Applies the plan you approved. Destructive changes need explicit confirmation; a collection edited since the plan is refused.
add_collection_items: Bulk-imports items, like a list hard-coded in your site, with per-item errors. Previews first; saving needs your confirmation.
list_collection_items: Lists items, drafts included, with search, filters, sorting, and paging.
get_collection_code: Returns TypeScript types and a Next.js fetch example generated from the current fields, plus the public items URL.
undo_collection_change: Undoes the most recent schema change after you confirm, when no data written since would be lost.

Feedback

list_feedback: Lists the change requests a client left on their site, newest first; open and in progress by default.
get_feedback: Reads one request in full: page, element, current and requested text, device, screenshot, and the thread.
reply_to_feedback: Replies to the client in the request's thread; they get it by email. Used to ask instead of guessing.
update_feedback_status: Sets open, in progress, done, or won't do, with a short note. Marking done emails the client.

Account and usage

whoami: Shows the connected account, user, role, and API key, to check the connection.
list_sites: Lists the client sites the key can reach, with domains and the plan's site allowance.
create_site: Creates a client site after you confirm. Safe to retry.
get_usage: Shows storage and bandwidth used against the plan's limits.

Walkthroughs: Set up Collections with AI and Resolve feedback with AI

Example prompts

Say it in plain English.

> Make the menu on this site editable by my client.
Plans a Menu collection from your code and shows the diff, creates it after you approve, imports the existing dishes, and swaps the hard-coded list for live Dropl data with matching TypeScript types.
> Fix the open Dropl feedback for this site.
Reads each request with its page, element, and screenshot, applies text changes in your code, asks the client about anything unclear, and marks finished requests done with a note.
> Add a project gallery my client can update.
Creates a showcase in the right client site after you confirm, then pastes the official embed into the page.
> Move the photos in public/projects into Dropl, one tab per folder.
Plans the migration first, then uploads after you confirm, tagging each photo with its folder as a filter tab.
> Host this hero video and swap in the embed.
Uploads the video to the client site's library and replaces the local file with the Dropl player embed.
> I downloaded our Vimeo videos to ~/vimeo-export. Move them to Dropl and swap the embeds.
Plans the upload and waits for your go-ahead, uploads each video to the client site's library, then replaces the Vimeo iframes in your code with Dropl embeds.
> How much storage does this client have left?
Reads usage against the plan's limits for this period.

Security

Scoped, revocable, and yours to control.

Sign in through your browser
The login command opens a page where an owner or admin approves the connection. No key is pasted into chat.
Scoped keys
Each key gets only the scopes and client sites you pick. Collections split read, write (items), and schema (structure), so a key can edit items without touching fields.
Expiry
Keys can expire, and they stop working if the person who made them leaves the account.
Revoke any time
Revoke a key in Settings and anything using it stops right away.

Every API key scope

sites:read: See your client sites
sites:write: Create client sites
showcases:read: See showcases and their categories
showcases:write: Create and edit showcases, categories, and tags
videos:read: See videos in your library
media:write: Upload photos and videos
embed:read: Get embed codes
usage:read: See storage and delivery usage
collections:read: See collections, their fields, and items (drafts included)
collections:write: Add, edit, reorder, and delete collection items
collections:schema: Create collections and change their fields (structure)
feedback:read: See website change requests from clients, with their context and replies
feedback:write: Reply to change requests and update their status

API keys in the docs

FAQ

Questions about Dropl MCP

Is Dropl MCP free?

The MCP server is free and open source (MIT). It works with a Dropl account: every new account gets 14 days free with no credit card, and after that it's one plan at $15/month with unlimited client sites.

Does my client need an account?

Only to edit. Invite your client from Settings → Sites and they get a client portal that shows just their site, where they upload photos and videos from their phone, edit collections, and request changes. Visitors to the website need nothing.

Which site builders work?

Anything that accepts an embed or a script tag. The get_embed_code tool returns code and paste instructions for plain HTML, React and Next.js, WordPress, Webflow, and Framer. Collections are also served as JSON for sites written in code.

Where are my files stored?

In your Dropl account. Uploads go straight from your computer to Dropl's storage through short-lived signed URLs, and the embeds serve them from there. On your computer, the server keeps only its sign-in key and a small upload log so interrupted uploads can resume.

Which AI tools does it work with?

Cursor, Claude Code, VS Code, and any other client that supports MCP (Model Context Protocol). It runs locally with npx and needs Node.js 20.3 or later.

Can the AI change things without asking?

It's told to show you a plan and wait for your go-ahead before it creates, uploads, or changes a collection's fields. Keys are scoped to the client sites and permissions you pick, and you can revoke them any time in Settings.

One conversation. A gallery you update without code.

Connect the MCP server and put a gallery on your next client site.

Start free trial Read the setup guide