Autoconsent MCP

Instructions

Implementation Reference

• src/tools/dom.ts:255-361 (handler)

  Core handler function that uses Puppeteer to evaluate JavaScript on the page, selecting the element by CSS selector and serializing its full HTML structure recursively, including child elements, text content, shadow DOM, and same-origin iframe contents.

  export async function printElement(
    page: Page,
    selector: string,
  ): Promise<string> {
    return await page.evaluate((sel: string) => {
      function serializeFullElement(element: Element, depth: number = 0): string {
        const tagName = element.tagName.toLowerCase();
        const indent = "  ".repeat(depth);
  
        // Get attributes
        let attributes = "";
        for (const attr of Array.from(element.attributes)) {
          attributes += ` ${attr.name}="${attr.value}"`;
        }
  
        const openTag = `${indent}<${tagName}${attributes}>`;
        let content = "";
  
        // Check if element has shadow DOM or complex content first
        const hasShadowDOM = !!(element as any).shadowRoot;
        const hasChildElements = Array.from(element.childNodes).some(
          (child) => child.nodeType === Node.ELEMENT_NODE,
        );
  
        // Check if element has only text content (no child elements or shadow DOM)
        const hasOnlyTextContent =
          !hasShadowDOM &&
          !hasChildElements &&
          Array.from(element.childNodes).every(
            (child) => child.nodeType === Node.TEXT_NODE,
          );
  
        if (hasOnlyTextContent) {
          // Use inline format for simple text elements
          const textContent = element.textContent?.trim();
          if (textContent) {
            return `${openTag}${textContent}</${tagName}>`;
          } else {
            return `${openTag}</${tagName}>`;
          }
        }
  
        // Process child nodes with indentation
        for (const child of Array.from(element.childNodes)) {
          if (child.nodeType === Node.TEXT_NODE) {
            const textContent = child.textContent?.trim();
            if (textContent) {
              content += `\n${indent}  ${textContent}`;
            }
          } else if (child.nodeType === Node.ELEMENT_NODE) {
            const childElement = child as Element;
            const serializedChild = serializeFullElement(childElement, depth + 1);
            if (serializedChild) {
              content += "\n" + serializedChild;
            }
          }
        }
  
        // Handle shadow DOM content
        if ((element as any).shadowRoot) {
          const shadowRoot = (element as any).shadowRoot;
          for (const child of Array.from(shadowRoot.children)) {
            const serializedChild = serializeFullElement(
              child as Element,
              depth + 1,
            );
            if (serializedChild) {
              content += "\n" + serializedChild;
            }
          }
        }
  
        // Handle iframe content
        if (element.tagName.toLowerCase() === "iframe") {
          try {
            const iframeDoc = (element as HTMLIFrameElement).contentDocument;
            if (iframeDoc && iframeDoc.body) {
              const serializedIframe = serializeFullElement(
                iframeDoc.body,
                depth + 1,
              );
              if (serializedIframe) {
                content += "\n" + serializedIframe;
              }
            }
          } catch (e) {
            // Cross-origin iframe, can't access content
          }
        }
  
        const closeTag = `${indent}</${tagName}>`;
  
        if (content) {
          return `${openTag}${content}\n${closeTag}`;
        } else {
          return `${openTag}</${tagName}>`;
        }
      }
  
      const element = document.querySelector(sel);
      if (!element) {
        throw new Error(`Element not found: ${sel}`);
      }
  
      return serializeFullElement(element);
    }, selector);
  }

• src/index.ts:117-127 (registration)

  Tool registration in the TOOLS array, defining the name, description, and input schema (selector: string) for the print_element tool.

  {
    name: "print_element",
    description: "Outputs the full HTML of the given element",
    inputSchema: {
      type: "object",
      properties: {
        selector: { type: "string", description: "CSS selector" },
      },
      required: ["selector"],
    },
  },

• src/index.ts:406-428 (handler)

  Handler dispatch in the main tool call switch statement, invoking the printElement function with page and selector, and formatting the result as MCP CallToolResult.

  case "print_element":
    try {
      const html = await printElement(page, args.selector);
      return {
        content: [
          {
            type: "text",
            text: html,
          },
        ],
        isError: false,
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Failed to print element: ${(error as Error).message}`,
          },
        ],
        isError: true,
      };
    }

• src/index.ts:120-126 (schema)

  Input schema definition for the print_element tool, specifying a required 'selector' string parameter.

  inputSchema: {
    type: "object",
    properties: {
      selector: { type: "string", description: "CSS selector" },
    },
    required: ["selector"],
  },