@rog0x/mcp-image-tools 1.0.0

package/src/tools/favicon-finder.ts

@@ -0,0 +1,193 @@
+export interface FaviconResult {
+  domain: string;
+  favicons: FaviconEntry[];
+  checkedLocations: string[];
+}
+
+export interface FaviconEntry {
+  url: string;
+  source: string;
+  type: string | null;
+  sizes: string | null;
+}
+
+async function fetchText(url: string, timeoutMs = 10000): Promise<{ text: string; ok: boolean }> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+      redirect: "follow",
+      headers: { "User-Agent": "MCP-Image-Tools/1.0" },
+    });
+    if (!response.ok) return { text: "", ok: false };
+    const text = await response.text();
+    return { text, ok: true };
+  } catch {
+    return { text: "", ok: false };
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+async function checkUrl(url: string, timeoutMs = 8000): Promise<boolean> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, {
+      method: "HEAD",
+      signal: controller.signal,
+      redirect: "follow",
+    });
+    return response.ok;
+  } catch {
+    return false;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+function extractLinkTags(html: string, baseUrl: string): FaviconEntry[] {
+  const entries: FaviconEntry[] = [];
+  // Match <link> tags with rel containing "icon" or "apple-touch-icon"
+  const linkRegex = /<link\s+[^>]*>/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = linkRegex.exec(html)) !== null) {
+    const tag = match[0];
+    const relMatch = tag.match(/rel\s*=\s*["']([^"']+)["']/i);
+    if (!relMatch) continue;
+
+    const rel = relMatch[1].toLowerCase();
+    if (!rel.includes("icon")) continue;
+
+    const hrefMatch = tag.match(/href\s*=\s*["']([^"']+)["']/i);
+    if (!hrefMatch) continue;
+
+    const href = hrefMatch[1];
+    const typeMatch = tag.match(/type\s*=\s*["']([^"']+)["']/i);
+    const sizesMatch = tag.match(/sizes\s*=\s*["']([^"']+)["']/i);
+
+    let resolvedUrl: string;
+    try {
+      resolvedUrl = new URL(href, baseUrl).href;
+    } catch {
+      continue;
+    }
+
+    entries.push({
+      url: resolvedUrl,
+      source: `HTML link[rel="${rel}"]`,
+      type: typeMatch ? typeMatch[1] : null,
+      sizes: sizesMatch ? sizesMatch[1] : null,
+    });
+  }
+
+  return entries;
+}
+
+function extractManifestIcons(manifestJson: string, baseUrl: string): FaviconEntry[] {
+  const entries: FaviconEntry[] = [];
+  try {
+    const manifest = JSON.parse(manifestJson);
+    const icons = manifest.icons as Array<{ src: string; sizes?: string; type?: string }>;
+    if (!Array.isArray(icons)) return entries;
+
+    for (const icon of icons) {
+      if (!icon.src) continue;
+      let resolvedUrl: string;
+      try {
+        resolvedUrl = new URL(icon.src, baseUrl).href;
+      } catch {
+        continue;
+      }
+      entries.push({
+        url: resolvedUrl,
+        source: "manifest.json",
+        type: icon.type || null,
+        sizes: icon.sizes || null,
+      });
+    }
+  } catch {
+    // Invalid JSON
+  }
+  return entries;
+}
+
+export async function findFavicons(websiteUrl: string): Promise<FaviconResult> {
+  const parsed = new URL(websiteUrl);
+  const origin = parsed.origin;
+  const domain = parsed.hostname;
+  const checkedLocations: string[] = [];
+  const favicons: FaviconEntry[] = [];
+  const seenUrls = new Set<string>();
+
+  function addFavicon(entry: FaviconEntry): void {
+    if (!seenUrls.has(entry.url)) {
+      seenUrls.add(entry.url);
+      favicons.push(entry);
+    }
+  }
+
+  // 1. Check /favicon.ico
+  const faviconIcoUrl = `${origin}/favicon.ico`;
+  checkedLocations.push(faviconIcoUrl);
+  const icoExists = await checkUrl(faviconIcoUrl);
+  if (icoExists) {
+    addFavicon({
+      url: faviconIcoUrl,
+      source: "default /favicon.ico",
+      type: "image/x-icon",
+      sizes: null,
+    });
+  }
+
+  // 2. Parse HTML for link tags
+  checkedLocations.push(websiteUrl);
+  const { text: html, ok: htmlOk } = await fetchText(websiteUrl);
+  if (htmlOk) {
+    const htmlFavicons = extractLinkTags(html, websiteUrl);
+    for (const f of htmlFavicons) {
+      addFavicon(f);
+    }
+
+    // 3. Check for manifest.json reference
+    const manifestMatch = html.match(/<link\s+[^>]*rel\s*=\s*["']manifest["'][^>]*href\s*=\s*["']([^"']+)["']/i)
+      || html.match(/<link\s+[^>]*href\s*=\s*["']([^"']+)["'][^>]*rel\s*=\s*["']manifest["']/i);
+
+    if (manifestMatch) {
+      let manifestUrl: string;
+      try {
+        manifestUrl = new URL(manifestMatch[1], websiteUrl).href;
+      } catch {
+        manifestUrl = "";
+      }
+
+      if (manifestUrl) {
+        checkedLocations.push(manifestUrl);
+        const { text: manifestText, ok: manifestOk } = await fetchText(manifestUrl);
+        if (manifestOk) {
+          const manifestIcons = extractManifestIcons(manifestText, manifestUrl);
+          for (const f of manifestIcons) {
+            addFavicon(f);
+          }
+        }
+      }
+    }
+  }
+
+  // 4. Check common manifest location
+  const defaultManifest = `${origin}/manifest.json`;
+  if (!checkedLocations.includes(defaultManifest)) {
+    checkedLocations.push(defaultManifest);
+    const { text: manifestText, ok: manifestOk } = await fetchText(defaultManifest);
+    if (manifestOk) {
+      const manifestIcons = extractManifestIcons(manifestText, defaultManifest);
+      for (const f of manifestIcons) {
+        addFavicon(f);
+      }
+    }
+  }
+
+  return { domain, favicons, checkedLocations };
+}

package/src/tools/image-meta.ts

@@ -0,0 +1,64 @@
+export interface ImageMetadata {
+  url: string;
+  contentType: string | null;
+  fileSize: number | null;
+  fileSizeFormatted: string | null;
+  lastModified: string | null;
+  etag: string | null;
+  cacheControl: string | null;
+  acceptRanges: string | null;
+  server: string | null;
+  accessTime: string;
+  statusCode: number;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
+}
+
+export async function getImageMetadata(url: string): Promise<ImageMetadata> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 15000);
+
+  try {
+    // Use HEAD request first to avoid downloading the entire image
+    let response = await fetch(url, {
+      method: "HEAD",
+      signal: controller.signal,
+      redirect: "follow",
+    });
+
+    // Some servers reject HEAD, fall back to GET with range
+    if (response.status === 405 || response.status === 403) {
+      response = await fetch(url, {
+        method: "GET",
+        headers: { Range: "bytes=0-0" },
+        signal: controller.signal,
+        redirect: "follow",
+      });
+    }
+
+    const headers = response.headers;
+    const contentLength = headers.get("content-length");
+    const fileSize = contentLength ? parseInt(contentLength, 10) : null;
+
+    return {
+      url,
+      contentType: headers.get("content-type"),
+      fileSize,
+      fileSizeFormatted: fileSize !== null ? formatBytes(fileSize) : null,
+      lastModified: headers.get("last-modified"),
+      etag: headers.get("etag"),
+      cacheControl: headers.get("cache-control"),
+      acceptRanges: headers.get("accept-ranges"),
+      server: headers.get("server"),
+      accessTime: new Date().toISOString(),
+      statusCode: response.status,
+    };
+  } finally {
+    clearTimeout(timeout);
+  }
+}

package/src/tools/og-image.ts

@@ -0,0 +1,122 @@
+export interface OgImageResult {
+  url: string;
+  ogImage: string | null;
+  ogImageAlt: string | null;
+  ogImageWidth: string | null;
+  ogImageHeight: string | null;
+  ogImageType: string | null;
+  twitterImage: string | null;
+  twitterCard: string | null;
+  appleTouchIcon: string | null;
+  allImages: ImageEntry[];
+}
+
+export interface ImageEntry {
+  url: string;
+  source: string;
+  alt: string | null;
+}
+
+function extractMetaContent(html: string, property: string): string | null {
+  // Match both property="..." and name="..." attributes
+  const patterns = [
+    new RegExp(`<meta\\s+[^>]*property\\s*=\\s*["']${escapeRegex(property)}["'][^>]*content\\s*=\\s*["']([^"']+)["']`, "i"),
+    new RegExp(`<meta\\s+[^>]*content\\s*=\\s*["']([^"']+)["'][^>]*property\\s*=\\s*["']${escapeRegex(property)}["']`, "i"),
+    new RegExp(`<meta\\s+[^>]*name\\s*=\\s*["']${escapeRegex(property)}["'][^>]*content\\s*=\\s*["']([^"']+)["']`, "i"),
+    new RegExp(`<meta\\s+[^>]*content\\s*=\\s*["']([^"']+)["'][^>]*name\\s*=\\s*["']${escapeRegex(property)}["']`, "i"),
+  ];
+
+  for (const pattern of patterns) {
+    const match = html.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+}
+
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function extractAppleTouchIcon(html: string, baseUrl: string): string | null {
+  const match = html.match(/<link\s+[^>]*rel\s*=\s*["']apple-touch-icon["'][^>]*href\s*=\s*["']([^"']+)["']/i)
+    || html.match(/<link\s+[^>]*href\s*=\s*["']([^"']+)["'][^>]*rel\s*=\s*["']apple-touch-icon["']/i);
+
+  if (match) {
+    try {
+      return new URL(match[1], baseUrl).href;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+function resolveUrl(href: string | null, baseUrl: string): string | null {
+  if (!href) return null;
+  try {
+    return new URL(href, baseUrl).href;
+  } catch {
+    return null;
+  }
+}
+
+export async function extractOgImage(url: string): Promise<OgImageResult> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 15000);
+
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+      redirect: "follow",
+      headers: { "User-Agent": "MCP-Image-Tools/1.0" },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const html = await response.text();
+    const allImages: ImageEntry[] = [];
+
+    // Extract OG image properties
+    const ogImage = resolveUrl(extractMetaContent(html, "og:image"), url);
+    const ogImageAlt = extractMetaContent(html, "og:image:alt");
+    const ogImageWidth = extractMetaContent(html, "og:image:width");
+    const ogImageHeight = extractMetaContent(html, "og:image:height");
+    const ogImageType = extractMetaContent(html, "og:image:type");
+
+    if (ogImage) {
+      allImages.push({ url: ogImage, source: "og:image", alt: ogImageAlt });
+    }
+
+    // Extract Twitter card image
+    const twitterImage = resolveUrl(extractMetaContent(html, "twitter:image"), url);
+    const twitterCard = extractMetaContent(html, "twitter:card");
+
+    if (twitterImage && twitterImage !== ogImage) {
+      allImages.push({ url: twitterImage, source: "twitter:image", alt: null });
+    }
+
+    // Extract Apple touch icon
+    const appleTouchIcon = extractAppleTouchIcon(html, url);
+
+    if (appleTouchIcon) {
+      allImages.push({ url: appleTouchIcon, source: "apple-touch-icon", alt: null });
+    }
+
+    return {
+      url,
+      ogImage,
+      ogImageAlt,
+      ogImageWidth,
+      ogImageHeight,
+      ogImageType,
+      twitterImage,
+      twitterCard,
+      appleTouchIcon,
+      allImages,
+    };
+  } finally {
+    clearTimeout(timeout);
+  }
+}

package/src/tools/placeholder-generator.ts

@@ -0,0 +1,81 @@
+export interface PlaceholderConfig {
+  width: number;
+  height?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  text?: string;
+  format?: "png" | "jpg" | "jpeg" | "gif" | "webp" | "svg";
+  font?: string;
+  fontSize?: number;
+}
+
+export interface PlaceholderResult {
+  url: string;
+  width: number;
+  height: number;
+  backgroundColor: string;
+  textColor: string;
+  text: string;
+  format: string;
+  htmlImg: string;
+  markdownImg: string;
+}
+
+export function generatePlaceholder(config: PlaceholderConfig): PlaceholderResult {
+  const width = Math.max(1, Math.min(config.width, 4000));
+  const height = config.height ? Math.max(1, Math.min(config.height, 4000)) : width;
+  const bgColor = (config.backgroundColor || "cccccc").replace(/^#/, "");
+  const txtColor = (config.textColor || "333333").replace(/^#/, "");
+  const format = config.format || "png";
+  const text = config.text || `${width}x${height}`;
+
+  // Build placehold.co URL
+  let url = `https://placehold.co/${width}x${height}/${bgColor}/${txtColor}`;
+
+  // Add format
+  url += `.${format}`;
+
+  // Add query params
+  const params = new URLSearchParams();
+  if (config.text) {
+    params.set("text", config.text);
+  }
+  if (config.font) {
+    params.set("font", config.font);
+  }
+  if (config.fontSize) {
+    params.set("font-size", config.fontSize.toString());
+  }
+
+  const queryString = params.toString();
+  if (queryString) {
+    url += `?${queryString}`;
+  }
+
+  const alt = `Placeholder ${width}x${height}`;
+
+  return {
+    url,
+    width,
+    height,
+    backgroundColor: `#${bgColor}`,
+    textColor: `#${txtColor}`,
+    text,
+    format,
+    htmlImg: `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`,
+    markdownImg: `![${alt}](${url})`,
+  };
+}
+
+export function generatePlaceholderSet(
+  sizes: Array<{ width: number; height?: number }>,
+  options?: Omit<PlaceholderConfig, "width" | "height">
+): PlaceholderResult[] {
+  return sizes.map((size) =>
+    generatePlaceholder({
+      ...options,
+      width: size.width,
+      height: size.height,
+    })
+  );
+}

package/src/tools/responsive-images.ts

@@ -0,0 +1,127 @@
+export interface ResponsiveConfig {
+  baseUrl: string;
+  alt?: string;
+  widths?: number[];
+  sizes?: string;
+  className?: string;
+  loading?: "lazy" | "eager";
+  formats?: string[];
+}
+
+export interface ResponsiveResult {
+  baseUrl: string;
+  variants: ImageVariant[];
+  srcsetAttr: string;
+  imgTag: string;
+  pictureTag: string;
+}
+
+export interface ImageVariant {
+  url: string;
+  width: number;
+  descriptor: string;
+}
+
+function inferImageFormat(url: string): string {
+  const pathname = new URL(url).pathname.toLowerCase();
+  if (pathname.endsWith(".webp")) return "webp";
+  if (pathname.endsWith(".avif")) return "avif";
+  if (pathname.endsWith(".png")) return "png";
+  if (pathname.endsWith(".gif")) return "gif";
+  if (pathname.endsWith(".svg")) return "svg";
+  return "jpeg";
+}
+
+function buildVariantUrl(baseUrl: string, width: number): string {
+  // Append width parameter - handles both existing and new query strings
+  const url = new URL(baseUrl);
+  url.searchParams.set("w", width.toString());
+  return url.href;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function generateResponsiveImages(config: ResponsiveConfig): ResponsiveResult {
+  const defaultWidths = [320, 640, 768, 1024, 1280, 1536, 1920];
+  const widths = config.widths || defaultWidths;
+  const alt = config.alt || "";
+  const sizes = config.sizes || "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw";
+  const loading = config.loading || "lazy";
+  const className = config.className || "";
+  const formats = config.formats || ["webp", inferImageFormat(config.baseUrl)];
+  const sortedWidths = [...widths].sort((a, b) => a - b);
+
+  // Generate variants
+  const variants: ImageVariant[] = sortedWidths.map((width) => ({
+    url: buildVariantUrl(config.baseUrl, width),
+    width,
+    descriptor: `${width}w`,
+  }));
+
+  // Build srcset attribute
+  const srcsetAttr = variants
+    .map((v) => `${v.url} ${v.descriptor}`)
+    .join(",\n    ");
+
+  // Build simple <img> tag with srcset
+  const classAttr = className ? ` class="${escapeHtml(className)}"` : "";
+  const imgTag = [
+    `<img`,
+    `  src="${escapeHtml(config.baseUrl)}"`,
+    `  srcset="${srcsetAttr}"`,
+    `  sizes="${escapeHtml(sizes)}"`,
+    `  alt="${escapeHtml(alt)}"`,
+    `  loading="${loading}"`,
+    className ? `  class="${escapeHtml(className)}"` : null,
+    `/>`,
+  ]
+    .filter(Boolean)
+    .join("\n");
+
+  // Build <picture> element with multiple formats
+  const sourceElements = formats.map((format) => {
+    const formatVariants = sortedWidths.map((width) => {
+      const url = new URL(config.baseUrl);
+      url.searchParams.set("w", width.toString());
+      url.searchParams.set("fm", format);
+      return `${url.href} ${width}w`;
+    });
+    const formatSrcset = formatVariants.join(",\n      ");
+    const mimeType =
+      format === "jpg" || format === "jpeg"
+        ? "image/jpeg"
+        : format === "avif"
+          ? "image/avif"
+          : format === "webp"
+            ? "image/webp"
+            : format === "png"
+              ? "image/png"
+              : `image/${format}`;
+    return `  <source\n    type="${mimeType}"\n    srcset="${formatSrcset}"\n    sizes="${escapeHtml(sizes)}"\n  />`;
+  });
+
+  const pictureTag = [
+    `<picture${classAttr}>`,
+    ...sourceElements,
+    `  <img`,
+    `    src="${escapeHtml(config.baseUrl)}"`,
+    `    alt="${escapeHtml(alt)}"`,
+    `    loading="${loading}"`,
+    `  />`,
+    `</picture>`,
+  ].join("\n");
+
+  return {
+    baseUrl: config.baseUrl,
+    variants,
+    srcsetAttr,
+    imgTag,
+    pictureTag,
+  };
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": ["src/**/*"]
+}