MCP Server Tauri

Instructions

Implementation Reference

• packages/mcp-server/src/driver/webview-interactions.ts:309-325 (handler)

  Main handler function: destructures options, builds execution script using SCRIPTS.getStyles, and executes it via executeInWebview in the target webview.

  export async function getStyles(options: GetStylesOptions): Promise<string> {
     const { selector, properties, multiple = false, windowId, appIdentifier } = options;
  
     const script = buildScript(SCRIPTS.getStyles, {
        selector,
        properties: properties || [],
        multiple,
     });
  
     try {
        return await executeInWebview(script, windowId, appIdentifier);
     } catch(error: unknown) {
        const message = error instanceof Error ? error.message : String(error);
  
        throw new Error(`Get styles failed: ${message}`);
     }
  }

• packages/mcp-server/src/driver/webview-interactions.ts:73-78 (schema)

  Zod schema defining input parameters for the tool, extending WindowTargetSchema.

  export const GetStylesSchema = WindowTargetSchema.extend({
     selector: z.string().describe('CSS selector for element(s) to get styles from'),
     properties: z.array(z.string()).optional().describe('Specific CSS properties to retrieve. If omitted, returns all computed styles'),
     multiple: z.boolean().optional().default(false)
        .describe('Whether to get styles for all matching elements (true) or just the first (false)'),
  });

• packages/mcp-server/src/tools-registry.ts:422-447 (registration)

  Tool registration entry in the central TOOLS array, binding schema and handler with metadata.

  {
     name: 'tauri_webview_get_styles',
     description:
        '[Tauri Apps Only] Get computed CSS styles from elements in a Tauri app. ' +
        'Requires active tauri_driver_session. ' +
        MULTI_APP_DESC + ' ' +
        'For browser style inspection, use Chrome DevTools MCP instead.',
     category: TOOL_CATEGORIES.UI_AUTOMATION,
     schema: GetStylesSchema,
     annotations: {
        title: 'Get Styles in Tauri Webview',
        readOnlyHint: true,
        openWorldHint: false,
     },
     handler: async (args) => {
        const parsed = GetStylesSchema.parse(args);
  
        return await getStyles({
           selector: parsed.selector,
           properties: parsed.properties,
           multiple: parsed.multiple,
           windowId: parsed.windowId,
           appIdentifier: parsed.appIdentifier,
        });
     },
  },

• packages/mcp-server/src/driver/scripts/get-styles.js:1-42 (helper)

  Injected JavaScript IIFE: selects elements by CSS selector, retrieves computed styles (specific properties or all), returns JSON string.

  /**
   * Get computed CSS styles for elements
   *
   * @param {Object} params
   * @param {string} params.selector - CSS selector for element(s)
   * @param {string[]} params.properties - Specific CSS properties to retrieve
   * @param {boolean} params.multiple - Whether to get styles for all matching elements
   */
  (function(params) {
     const { selector, properties, multiple } = params;
  
     const elements = multiple
        ? Array.from(document.querySelectorAll(selector))
        : [document.querySelector(selector)];
  
     if (!elements[0]) {
        throw new Error(`Element not found: ${selector}`);
     }
  
     const results = elements.map(element => {
        const styles = window.getComputedStyle(element);
  
        if (properties.length > 0) {
           const result = {};
           properties.forEach(prop => {
              result[prop] = styles.getPropertyValue(prop);
           });
           return result;
        }
  
        // Return all styles
        const allStyles = {};
        for (let i = 0; i < styles.length; i++) {
           const prop = styles[i];
           allStyles[prop] = styles.getPropertyValue(prop);
        }
        return allStyles;
     });
  
     return JSON.stringify(multiple ? results : results[0]);
  })