Set up with AI (Cursor, Claude Code)

Dropl has an MCP server, @dropl/mcp. MCP is how AI coding assistants like Cursor and Claude Code use outside tools. With Dropl connected, your assistant can create a client site and a showcase, upload photos and videos from your project, and paste the embed code into the right page.

It always plans first and asks you before it creates or uploads anything.

What you need

• An AI assistant that supports MCP: Cursor, Claude Code, or another MCP client.
• Node.js 22 or later, because the server runs with npx.
• An Owner or Admin to approve the sign-in. Team members can set up their editor, but an owner or admin has to approve the connection.

1. Add the Dropl MCP server

Cursor

Add this to .cursor/mcp.json in your project. If the file already lists servers, add the dropl entry next to them.

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

Claude Code

Run this in your project folder:

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

Other MCP clients

Add a stdio server named dropl with the command npx and the arguments -y @dropl/mcp.

After adding the server, restart or reload MCP servers in your editor so the Dropl tools show up.

2. Sign in

Run this in a terminal:

npx -y @dropl/mcp login

1. Your browser opens the Connect an app page. Sign in to Dropl if asked.
2. Check that the code on the page matches the one in your terminal, then click Continue.
3. Review the request. The app and device names are reported by the app itself, so anyone can set them: the code and the time are what to check.
4. Pick the Account to connect. Untick any permission you don't want to give, and limit the connection to some Client sites if you like.
5. Click Approve, then go back to your terminal or editor.

The code expires after 10 minutes. If it runs out, run the sign-in command again.

Approving creates an API key that acts as you. It shows up in Settings → API keys with the app's name, and you can revoke it there any time.

Warning: Only approve a sign-in you just started yourself. Dropl will never ask you for this code by email, chat, or phone. If you didn't start it, click Deny.

Use an API key instead

Owners and admins can create a key in Settings → API keys and set it as DROPL_API_KEY in the MCP server's environment (the env block in .cursor/mcp.json, or -e for Claude Code). Never paste a key into a chat or commit it. See API keys.

3. Copy a prompt from the dashboard

1. Open the Library and click Set up with AI. Owners and admins also find it on Settings → Sites.
2. Under Connect Dropl to your editor, copy the snippet for your editor if you haven't added Dropl yet.
3. Under Copy a prompt, pick what you want done:
   • Migrate an existing gallery: move a gallery that's hard-coded in the project into a showcase.
   • Upload a folder as a showcase: turn a folder of photos and videos into a new showcase.
   • Add a video player to a page: upload a video and put the player where it should play.
   • Create a new client site: add a site for this project.
4. Fill in the details. The client site is filled in from the site you have open.
5. Check the preview and click Copy prompt, then paste it into your assistant's chat.

Prompts never include API keys or passwords.

What the assistant does

1. Calls whoami to confirm which account and permissions it has.
2. Looks through your project for the gallery, folder, or page you described.
3. Shows you a plan: the client site, the showcase and its categories, and how many files it will upload with their total size.
4. Waits for your confirmation.
5. Finds or creates the client site, creates the showcase, turns folders into categories, and uploads the files.
6. Gets the embed code from Dropl with get_embed_code and pastes it into the page. It never writes the snippet by hand.
7. Runs your project's build and fixes anything it broke.
8. Reports what it did, with links to your dashboard.

The Dropl tools it uses:

Confirm before anything is uploaded

The prompts tell your assistant to show a plan and wait for your explicit go-ahead before it creates anything in Dropl or uploads a file. Read the plan: check the client site, the number of files, and the total size. Say no, or ask for changes, if anything looks off.

Uploads count toward your plan's storage, and everything the assistant creates shows up in your Library like anything you add yourself.

Troubleshooting

The Dropl tools don't show up. Check that .cursor/mcp.json is valid JSON, or run claude mcp list in Claude Code. Make sure Node.js 22 or later is installed, then restart or reload MCP servers.

"That code is invalid or has expired." Codes last 10 minutes and work once. Run npx -y @dropl/mcp login again for a new one.

"An owner or admin needs to approve this." You're a team member. Ask an owner or admin of your account to approve the sign-in.

The assistant says the key is invalid (INVALID_API_KEY). The key was revoked or expired, or the person who approved it is no longer an owner or admin. Sign in again.

The assistant is missing a permission (INSUFFICIENT_SCOPE). The connection was approved without it. Sign in again and leave that permission ticked.

It can't create a client site (SITE_RESTRICTED_KEY). Connections limited to some client sites can't add new ones. Create the site in Settings → Sites, or sign in again with all client sites allowed.

An upload was rejected. Check the file against the upload limits.

Next steps

• API keys: scopes, site limits, expiry, and revoking access.
• Public API: call Dropl from your own scripts.
• Getting started: the dashboard basics.