ui-annotator-mcp

Instructions

Implementation Reference

• src/index.js:136-158 (handler)

  The tool 'inspect_mode' handler in src/index.js calls the proxy's inspectOn/inspectOff methods.

  // Tool 5: Toggle inspect mode
  mcp.tool(
    'inspect_mode',
    'Toggle inspect mode on the annotated page. When ON, the user can click any element to copy its name. When OFF, the page behaves normally. Use this to help the user copy element names for communicating design changes.',
    {
      enabled: z.boolean().describe('true to enable inspect mode, false to disable'),
    },
    async ({ enabled }) => {
      if (enabled) {
        proxy.inspectOn();
      } else {
        proxy.inspectOff();
      }
      return {
        content: [{
          type: 'text',
          text: enabled
            ? 'Inspect mode ON. The user can now click any element to copy its name. A toolbar indicator shows the mode is active.'
            : 'Inspect mode OFF. Page is back to normal interactive mode.',
        }],
      };
    }
  );

• src/proxy.js:179-180 (helper)

  The proxy helper functions that queue commands to be sent to the browser.

  inspectOn: () => { pendingCommands.push({ type: 'inspect_on' }); },
  inspectOff: () => { pendingCommands.push({ type: 'inspect_off' }); },