Chrome DevTools MCP

Instructions

Implementation Reference

• src/tools/input.ts:177-192 (handler)

  The handler function that implements the drag tool logic. It retrieves ElementHandles using UIDs, performs the drag and drop operation with a small delay, updates the response, and cleans up handles.

  handler: async (request, response, context) => {
    const fromHandle = await context.getElementByUid(request.params.from_uid);
    const toHandle = await context.getElementByUid(request.params.to_uid);
    try {
      await context.waitForEventsAfterAction(async () => {
        await fromHandle.drag(toHandle);
        await new Promise(resolve => setTimeout(resolve, 50));
        await toHandle.drop(fromHandle);
      });
      response.appendResponseLine(`Successfully dragged an element`);
      response.setIncludeSnapshot(true);
    } finally {
      void fromHandle.dispose();
      void toHandle.dispose();
    }
  },

• src/tools/input.ts:173-176 (schema)

  Zod schema defining the input parameters for the drag tool: from_uid and to_uid.

  schema: {
    from_uid: z.string().describe('The uid of the element to drag'),
    to_uid: z.string().describe('The uid of the element to drop into'),
  },

• src/tools/input.ts:166-193 (registration)

  The registration of the 'drag' tool using defineTool, exporting it with name, description, annotations, schema, and handler.

  export const drag = defineTool({
    name: 'drag',
    description: `Drag an element onto another element`,
    annotations: {
      category: ToolCategories.INPUT_AUTOMATION,
      readOnlyHint: false,
    },
    schema: {
      from_uid: z.string().describe('The uid of the element to drag'),
      to_uid: z.string().describe('The uid of the element to drop into'),
    },
    handler: async (request, response, context) => {
      const fromHandle = await context.getElementByUid(request.params.from_uid);
      const toHandle = await context.getElementByUid(request.params.to_uid);
      try {
        await context.waitForEventsAfterAction(async () => {
          await fromHandle.drag(toHandle);
          await new Promise(resolve => setTimeout(resolve, 50));
          await toHandle.drop(fromHandle);
        });
        response.appendResponseLine(`Successfully dragged an element`);
        response.setIncludeSnapshot(true);
      } finally {
        void fromHandle.dispose();
        void toHandle.dispose();
      }
    },
  });