Dropins AI tools

The AI tools for drop-ins are distributed as the @dropins/ai-tools npm package. They provide a tool server for Cursor, VS Code, Claude Code, and Claude Desktop. They index drop-in source code — both B2C and B2B — so your AI editor gets current slots, events, containers, API functions, and design tokens, instead of relying on outdated training data.

Related topics

See the AI tools reference for each tool’s parameters and usage examples. If the server doesn’t connect or your editor can’t find it, see the FAQ.

Prerequisites

Before installing the AI tools for drop-ins, make sure you have the following:

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

Installation

Configure the AI tools for drop-ins in your editor and verify the connection.

1. Add the server to your editor configuration. Open the tab for your editor and paste the snippet into the config file shown. If you use the Claude Code extension in VS Code, choose the Claude Code tab, rather than VS Code (Copilot), which is for VS Code’s built-in tool-server support through GitHub Copilot.

   Cursor

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

   {
     "mcpServers": {
       "dropins": {
         "command": "npx",
         "args": ["--yes", "@dropins/ai-tools"]
       }
     }
   }

   VS Code (Copilot)

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

   {
     "servers": {
       "dropins": {
         "type": "stdio",
         "command": "npx",
         "args": ["--yes", "@dropins/ai-tools"]
       }
     }
   }

   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": ["--yes", "@dropins/ai-tools"]
       }
     }
   }

   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-ai-tools"
       }
     }
   }

   Claude Desktop is a desktop app, not a terminal, so it doesn’t read your shell’s PATH. Commands such as npx might 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/ai-tools

   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-ai-tools

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

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

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

3. Verify the connection. Ask your AI editor:

“Use the AI tools for drop-ins — what slots does the CartSummaryList container have?”

If your AI editor returns a list of slot names with context types, the AI tools for drop-ins are connected and working.

If dropins doesn’t appear in your editor’s tool server list, or your editor can’t answer the question, open your editor’s tool server logs and confirm that npx --yes @dropins/ai-tools runs without errors in a terminal outside the editor.

Example prompts

The AI tools for drop-ins work 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 doesn’t automatically use the AI tools for drop-ins, start your prompt with “Use the AI tools for drop-ins”. In Cursor, you can also add a rule in .cursor/rules/ that tells the agent to consult these tools for drop-in questions.

Enable documentation search (optional)

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 AI tools for drop-ins still answer 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