Vite MCP Server

Instructions

Implementation Reference

• src/tools/browser-tools.ts:445-528 (registration)

  Registration of the 'get-element-dimensions' MCP tool using server.tool, including description, input schema, and handler function.

  server.tool(
    'get-element-dimensions',
    'Retrieves dimension and position information of a specific element',
    {
      selector: z.string().describe('CSS selector of the element to inspect')
    },
    async ({ selector }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        // Get current checkpoint ID
        const checkpointId = await getCurrentCheckpointId(browserStatus.page);
  
        // Retrieve element dimensions and position information
        const dimensions = await browserStatus.page.evaluate((selector: string) => {
          const element = document.querySelector(selector);
          if (!element) return null;
  
          const rect = element.getBoundingClientRect();
          return {
            width: rect.width,
            height: rect.height,
            top: rect.top,
            left: rect.left,
            bottom: rect.bottom,
            right: rect.right,
            x: rect.x,
            y: rect.y,
            isVisible: !!(
              rect.width &&
              rect.height &&
              window.getComputedStyle(element).display !== 'none' &&
              window.getComputedStyle(element).visibility !== 'hidden'
            )
          };
        }, selector);
  
        if (!dimensions) {
          return {
            content: [
              {
                type: 'text',
                text: `Element with selector "${selector}" not found`
              }
            ],
            isError: true
          };
        }
  
        // Result message construction
        const resultMessage = {
          selector,
          dimensions,
          checkpointId
        };
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(resultMessage, null, 2)
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to get element dimensions: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to get element dimensions: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );

• src/tools/browser-tools.ts:451-527 (handler)

  The core handler logic: validates browser context, evaluates getBoundingClientRect() on the element to get dimensions and position, checks visibility, and formats the response with checkpoint ID.

    async ({ selector }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        // Get current checkpoint ID
        const checkpointId = await getCurrentCheckpointId(browserStatus.page);
  
        // Retrieve element dimensions and position information
        const dimensions = await browserStatus.page.evaluate((selector: string) => {
          const element = document.querySelector(selector);
          if (!element) return null;
  
          const rect = element.getBoundingClientRect();
          return {
            width: rect.width,
            height: rect.height,
            top: rect.top,
            left: rect.left,
            bottom: rect.bottom,
            right: rect.right,
            x: rect.x,
            y: rect.y,
            isVisible: !!(
              rect.width &&
              rect.height &&
              window.getComputedStyle(element).display !== 'none' &&
              window.getComputedStyle(element).visibility !== 'hidden'
            )
          };
        }, selector);
  
        if (!dimensions) {
          return {
            content: [
              {
                type: 'text',
                text: `Element with selector "${selector}" not found`
              }
            ],
            isError: true
          };
        }
  
        // Result message construction
        const resultMessage = {
          selector,
          dimensions,
          checkpointId
        };
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(resultMessage, null, 2)
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to get element dimensions: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to get element dimensions: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );

• src/tools/browser-tools.ts:448-450 (schema)

  Input schema validation using Zod: requires a single 'selector' parameter (CSS selector).

  {
    selector: z.string().describe('CSS selector of the element to inspect')
  },

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

  Re-export of browser-tools module, making the get-element-dimensions tool available for import and registration.

  export * from './browser-tools.js';
  export * from './log-manager.js';