drag_and_drop

Instructions

Implementation Reference

• src/tools/drag-drop.ts:16-39 (handler)

  The registerDragDropTools function registers the 'drag_and_drop' tool on the MCP server. It defines the schema for 'from' and 'to' positions (supporting coordinates, CSS selectors, or XPath), and the handler sends a 'drag_and_drop' command via WebSocketBridge.

  export function registerDragDropTools(server: McpServer, bridge: WebSocketBridge) {
    server.tool(
      'drag_and_drop',
      'Drag an element from one location to another. Use this for sliders, sortable lists, file upload drop zones, or any drag-interactive elements. Simulates realistic human drag speed.',
      {
        from: positionSchema.describe('Source element/position to start dragging from'),
        to: positionSchema.describe('Target element/position to drop onto'),
        tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
        apiKey: z.string().optional().describe('API key for authentication if enabled'),
      },
      async ({ from, to, tabId, apiKey }) => {
        const result = await bridge.sendCommand({
          command: 'drag_and_drop',
          params: { from, to },
          tabId,
          apiKey,
        });
        if (!result.success) {
          return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
        }
        return { content: [{ type: 'text', text: 'Drag and drop completed' }] };
      }
    );
  }

• src/tools/drag-drop.ts:5-14 (schema)

  The positionSchema Zod schema defines the input validation for source/target positions: a method type ('coordinates', 'css', 'xpath') and a value (string selector or {x,y} coordinates object).

  const positionSchema = z.object({
    type: z.enum(['coordinates', 'css', 'xpath']).describe('Method to locate: "css" (most reliable), "xpath", or "coordinates"'),
    value: z.union([
      z.string().describe('CSS selector or XPath to element'),
      z.object({ 
        x: z.number().describe('X coordinate in pixels'), 
        y: z.number().describe('Y coordinate in pixels') 
      }).describe('Exact pixel coordinates'),
    ]).describe('The selector string or {x, y} coordinates object'),
  });

• src/tools/drag-drop.ts:17-25 (schema)

  The tool's parameter schema defines 'from' and 'to' positions using positionSchema, plus optional 'tabId' and 'apiKey' parameters.

  server.tool(
    'drag_and_drop',
    'Drag an element from one location to another. Use this for sliders, sortable lists, file upload drop zones, or any drag-interactive elements. Simulates realistic human drag speed.',
    {
      from: positionSchema.describe('Source element/position to start dragging from'),
      to: positionSchema.describe('Target element/position to drop onto'),
      tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
      apiKey: z.string().optional().describe('API key for authentication if enabled'),
    },

• src/tools/drag-drop.ts:1-3 (helper)

  Imports used by the drag-and-drop tool: McpServer from MCP SDK, Zod for validation, and WebSocketBridge for sending commands to the Chrome extension.

  import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
  import { z } from 'zod';
  import { WebSocketBridge } from '../websocket-bridge.js';

• src/tools/index.ts:9-9 (registration)

  The import line that brings registerDragDropTools into the central tools registry.

  import { registerDragDropTools } from './drag-drop.js';

• src/tools/index.ts:36-36 (registration)

  The call to registerDragDropTools(server, bridge) inside registerAllTools, which is invoked from createServer in server.ts.

  registerDragDropTools(server, bridge);