highlight_element

Instructions

Implementation Reference

• src/index.js:106-114 (handler)

  The tool handler for 'highlight_element'. It receives 'name' (element name or CSS selector) and calls proxy.highlight(name) to queue a highlight command.

  async ({ name }) => {
    proxy.highlight(name);
    return {
      content: [{
        type: 'text',
        text: `Highlighted "${name}" on the page. The user should see a brief red flash around the element.`,
      }],
    };
  }

• src/index.js:99-115 (registration)

  Registration of the 'highlight_element' tool via mcp.tool() with Zod schema for 'name' parameter.

  // Tool 3: Highlight a specific element
  mcp.tool(
    'highlight_element',
    'Briefly flash-highlight a specific element on the page so the user can see which element you are referring to. Useful for confirming "do you mean this element?"',
    {
      name: z.string().describe('The element name or CSS selector to highlight'),
    },
    async ({ name }) => {
      proxy.highlight(name);
      return {
        content: [{
          type: 'text',
          text: `Highlighted "${name}" on the page. The user should see a brief red flash around the element.`,
        }],
      };
    }
  );

• src/index.js:103-105 (schema)

  Zod schema definition for the 'name' input parameter of highlight_element tool.

  {
    name: z.string().describe('The element name or CSS selector to highlight'),
  },

• src/proxy.js:177-178 (helper)

  The proxy.highlight() helper that pushes a { type: 'highlight', name } command to pendingCommands, which the browser polls and executes.

  highlight: (name) => { pendingCommands.push({ type: 'highlight', name }); },
  rescan: () => { pendingCommands.push({ type: 'scan' }); },

• src/annotator.js:347-363 (helper)

  The client-side highlightByName() function that runs in the browser. It finds the element by name/selector, creates a red flash overlay div, and removes it after 2 seconds.

  function highlightByName(name) {
    const match = elements.find(e => e.name === name || e.selector === name);
    if (!match) return;
    const el = document.querySelector(match.selector);
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const flash = document.createElement('div');
    flash.setAttribute('data-ui-annotator', '1');
    flash.style.cssText = 'position:fixed;border:3px solid #e11d48;background:rgba(225,29,72,0.1);z-index:99997;pointer-events:none;border-radius:' + (getComputedStyle(el).borderRadius || '0') + ';transition:opacity .5s;';
    flash.style.left = (rect.left - 4) + 'px';
    flash.style.top = (rect.top - 4) + 'px';
    flash.style.width = (rect.width + 8) + 'px';
    flash.style.height = (rect.height + 8) + 'px';
    document.body.appendChild(flash);
    setTimeout(() => { flash.style.opacity = '0'; }, 1500);
    setTimeout(() => flash.remove(), 2000);
  }