Drop-ins MCP

If you use Cursor, VS Code, or Claude on a Commerce storefront project, you can connect the Dropins MCP server so your assistant looks up current drop-in details instead of guessing from old training data.

The Dropins MCP is a Model Context Protocol (MCP) server. Your editor calls it when it needs current facts about Adobe Commerce drop-in components. The server reads an index built from drop-in source code so slots, events, containers, and API functions stay aligned with the versions in your project.

Once you connect it, your assistant can answer questions like “What slots does CartSummaryList have?”, create a new block with the correct imports, flag renamed or removed APIs in your code, and generate event handlers and slot code that match the real APIs.

Related topics

This page covers installation and verification. For every MCP tool with parameters and usage examples, see Dropins MCP reference. If the server does not connect or your editor cannot find it, see FAQ.

Prerequisites

• Node.js 18 or later (node -v to confirm)
• An AI editor that supports MCP servers: Cursor , VS Code with GitHub Copilot , or Claude Desktop

Installation

You’ll add the Dropins MCP server to your editor and confirm the connection works.

1. Add the server to your editor configuration. Open the tab for your editor and paste the snippet into the config file shown.

   Cursor

   Add to ~/.cursor/mcp.json for all projects, or .cursor/mcp.json inside a specific project:

   {
     "mcpServers": {
       "dropins": {
         "command": "npx",
         "args": ["@dropins/mcp"]
       }
     }
   }

   VS Code

   Add to .vscode/mcp.json inside your project:

   {
     "servers": {
       "dropins": {
         "type": "stdio",
         "command": "npx",
         "args": ["@dropins/mcp"]
       }
     }
   }

   Claude Code

   Add to .mcp.json at your project root (this applies to both the Claude Code VS Code extension and the Claude Code CLI):

   {
     "mcpServers": {
       "dropins": {
         "type": "stdio",
         "command": "npx",
         "args": ["@dropins/mcp"]
       }
     }
   }

   Claude Code uses your terminal’s PATH, so npx works without a global install.

   To auto-approve the server without a prompt each session, add the following to .claude/settings.json in your project:

   {
     "enableAllProjectMcpServers": true
   }

   Claude Desktop

   The config file lives outside your project:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json

   In Claude Desktop, choose Settings, open Developer, then click Edit Config to create or open that file.

   Add to claude_desktop_config.json:

   {
     "mcpServers": {
       "dropins": {
         "command": "dropins-mcp"
       }
     }
   }

   Claude Desktop is a desktop app, not a terminal, so it doesn’t read your shell’s PATH. Commands like npx may not be found when Claude Desktop tries to start the server. A global install puts the binary in a system location Claude Desktop can reach:

   npm install -g @dropins/mcp

   If you use nvm, the binary lands in a version-specific folder that isn’t on the system PATH. Run this in your terminal to find the full path:

   which dropins-mcp

   Then replace dropins-mcp in the config with that absolute path. For example:

   /Users/yourname/.nvm/versions/node/v20.11.0/bin/dropins-mcp

2. Restart your editor. When the server loads, dropins appears in your editor’s MCP server list.

3. Verify the connection. Ask your AI assistant:

   “Use the dropins MCP — what slots does the CartSummaryList container have?”

   If your assistant returns a list of slot names with context types, the MCP server is connected and working.

   If the server does not appear, open your editor’s MCP logs and confirm that npx @dropins/mcp runs without errors in a terminal outside the editor.

What you can ask

The MCP works best when you ask specific questions about your project. For example:

• “What events does the checkout drop-in emit when a payment method is selected?”
• “Create a block that combines CartSummaryList and OrderConfirmation”
• “Are there any stale containers or removed APIs in my commerce-cart block?”
• “What GraphQL mutation does checkout use to place an order?”
• “Generate a slot implementation that adds a loyalty points badge next to the cart line item price”
• “Am I using the latest drop-in versions?”
• “What CSS design tokens control button colors?”

Tip

If your editor does not automatically use the MCP for drop-in questions, start your prompt with “Use the dropins MCP”. In Cursor, you can also add a rule in .cursor/rules/ that tells the agent to consult the MCP for drop-in questions.

Optional: enable AI-powered documentation search

The search_commerce_docs tool searches Adobe Commerce documentation on Adobe’s servers using the Adobe I/O command-line interface (CLI). Without it, the MCP still answers drop-in questions using search_docs, which searches a local copy of the documentation included with the server.

To sign in and enable remote documentation search, install the Adobe I/O CLI and log in once:

npm install -g @adobe/aio-cli
aio auth login