watermark-studio-mcp 1.1.0 → 1.2.0

package/README.md

@@ -1,5 +1,6 @@
 # Watermark & Resize Studio MCP Server 🖼️⚡
 
+[![npm version](https://img.shields.io/npm/v/watermark-studio-mcp.svg?color=cb3837)](https://www.npmjs.com/package/watermark-studio-mcp)
 [![smithery badge](https://smithery.ai/badge/Miladmet/watermark-studio-mcp)](https://smithery.ai/server/Miladmet/watermark-studio-mcp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-green.svg)](https://nodejs.org)
@@ -16,6 +17,7 @@ Official open-source MCP server powered by [Watermark & Resize Studio](https://w
 - **⚡ 100% Local Processing**: All operations run locally via `sharp` (libvips C++ engine). Zero cloud uploads, zero external API latency, zero bandwidth costs.
 - **🛍️ E-Commerce & Platform Presets**: Instant batch-ready resizing for **Shopify (2048x2048)**, **Etsy (2000x2000)**, **Instagram Square/Story/Portrait**, **YouTube Thumbnails**, **Facebook**, and **Pinterest**.
 - **🛡️ Copyright & Watermark Protection**: Dynamic text and logo compositing with SVG drop shadows, 6-point positioning, opacity control, and repeating tiled patterns for asset protection.
+- **🖼️ 1200x630 OpenGraph Social Cards**: Generate viral Twitter/LinkedIn/OG preview cards with modern gradient themes (`dark-violet`, `ocean-blue`, `sunset`, `cyber-emerald`), auto text-wrapping, brand pills, and background photo/logo overlays.
 - **🔒 Privacy EXIF / GPS Stripper**: Completely removes GPS geolocation coordinates, camera serial numbers, and creator metadata before public publishing.
 - **🚀 WebP & MozJPEG Compression**: Reduces file sizes by 85–95% while maintaining crisp visual fidelity.
 
@@ -91,6 +93,21 @@ Bulk process an entire directory of photos in parallel: resize with platform pre
 | `watermark_position`| `string` | No | `bottom-right`, `bottom-left`, `top-right`, `center` (Default: `bottom-right`). |
 | `max_concurrency` | `number` | No | Parallel worker concurrency (Default: `4`). |
 
+### 5. `generate_social_card`
+Generate professional 1200x630 OpenGraph and Twitter preview cards with modern gradients, bold typography, brand pill badges, and optional background photo or logo overlays.
+
+| Parameter | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | **Yes** | Headline text for the social card (e.g., blog post title or product update). |
+| `subtitle` | `string` | No | Supporting subheader or descriptive tagline. |
+| `brand_name` | `string` | No | Brand/category text for top pill badge (Default: `Watermark & Resize Studio`). |
+| `theme` | `string` | No | Gradient scheme: `dark-violet`, `ocean-blue`, `sunset`, `cyber-emerald` (Default: `dark-violet`). |
+| `logo_path` | `string` | No | Path to brand logo PNG/SVG to overlay in top-right. |
+| `background_image_path` | `string` | No | Path to background photo (automatically blurred with dark contrast mask). |
+| `format` | `string` | No | `png`, `webp`, `jpeg` (Default: `png`). |
+| `quality` | `number` | No | Compression quality from 1 to 100 (Default: `90`). |
+| `output_path` | `string` | No | Custom destination path (Defaults to `social-card-[slug].[format]`). |
+
 ---
 
 ## 💻 Manual Configuration
@@ -156,7 +173,9 @@ This verifies:
 1. Preset image resizing (Shopify, Instagram, YouTube HD) with WebP compression.
 2. Text, logo, and tiled watermark compositing with SVG drop shadows.
 3. EXIF, GPS, and IPTC privacy sanitization.
-4. Live JSON-RPC protocol compliance over `stdio`.
+4. Parallel multi-core batch processing of entire image folders.
+5. 1200x630 OpenGraph social card generation with gradient themes and brand badges.
+6. Live JSON-RPC protocol compliance over `stdio`.
 
 ---
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "watermark-studio-mcp",
-  "version": "1.1.0",
-  "description": "High-performance Model Context Protocol (MCP) server for batch image resizing, watermarking, and EXIF privacy stripping by Watermark & Resize Studio.",
+  "version": "1.2.0",
+  "description": "High-performance Model Context Protocol (MCP) server for batch image resizing, watermarking, EXIF privacy stripping, and OpenGraph social card generation by Watermark & Resize Studio.",
   "main": "src/index.js",
   "bin": {
     "watermark-studio-mcp": "src/index.js"
@@ -26,6 +26,8 @@
     "resize",
     "watermark",
     "exif-stripper",
+    "opengraph",
+    "social-card",
     "shopify",
     "instagram",
     "etsy",

package/src/imageProcessor.js

@@ -654,3 +654,255 @@ export async function batchProcessFolder(args) {
   };
 }
 
+/**
+ * Helper to wrap text into multiple lines for SVG rendering
+ */
+function wrapLines(text, maxChars = 34) {
+  if (!text) return [];
+  const words = text.trim().split(/\s+/);
+  const lines = [];
+  let current = '';
+
+  for (const word of words) {
+    if ((current + ' ' + word).trim().length <= maxChars) {
+      current = (current + ' ' + word).trim();
+    } else {
+      if (current) lines.push(current);
+      current = word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
+
+const CARD_THEMES = {
+  'dark-violet': {
+    bg: '#0b0a13',
+    glow1: '#a855f7',
+    glow2: '#ec4899',
+    badgeBg: 'rgba(168, 85, 247, 0.2)',
+    badgeBorder: 'rgba(168, 85, 247, 0.45)',
+    badgeText: '#d8b4fe',
+    accentText: '#c084fc'
+  },
+  'ocean-blue': {
+    bg: '#080f1e',
+    glow1: '#3b82f6',
+    glow2: '#06b6d4',
+    badgeBg: 'rgba(59, 130, 246, 0.2)',
+    badgeBorder: 'rgba(59, 130, 246, 0.45)',
+    badgeText: '#93c5fd',
+    accentText: '#60a5fa'
+  },
+  'sunset': {
+    bg: '#140812',
+    glow1: '#f97316',
+    glow2: '#f43f5e',
+    badgeBg: 'rgba(249, 115, 22, 0.2)',
+    badgeBorder: 'rgba(249, 115, 22, 0.45)',
+    badgeText: '#fdba74',
+    accentText: '#fb923c'
+  },
+  'cyber-emerald': {
+    bg: '#060f11',
+    glow1: '#10b981',
+    glow2: '#14b8a6',
+    badgeBg: 'rgba(16, 185, 129, 0.2)',
+    badgeBorder: 'rgba(16, 185, 129, 0.45)',
+    badgeText: '#6ee7b7',
+    accentText: '#34d399'
+  }
+};
+
+/**
+ * Tool 5: generate_social_card
+ * Generate high-converting 1200x630 OpenGraph & Twitter preview share cards.
+ */
+export async function generateSocialCard(args) {
+  const {
+    title,
+    subtitle,
+    brand_name = 'Watermark & Resize Studio',
+    logo_path,
+    background_image_path,
+    theme = 'dark-violet',
+    format = 'png',
+    quality = 90,
+    output_path
+  } = args;
+
+  if (!title) {
+    throw new Error('title is required to generate a social share card.');
+  }
+
+  const selectedTheme = CARD_THEMES[theme] || CARD_THEMES['dark-violet'];
+  const safeTitle = escapeXml(title);
+  const safeSubtitle = subtitle ? escapeXml(subtitle) : '';
+  const safeBrand = escapeXml(brand_name.toUpperCase());
+
+  // Line wrapping
+  const titleCharLimit = safeTitle.length > 50 ? 38 : 32;
+  const titleLines = wrapLines(safeTitle, titleCharLimit);
+  const subtitleLines = safeSubtitle ? wrapLines(safeSubtitle, 48).slice(0, 2) : [];
+
+  const titleFontSize = titleLines.length > 3 ? 42 : (titleLines.length > 2 ? 48 : 54);
+  const titleLineHeight = Math.round(titleFontSize * 1.25);
+
+  let titleTspans = '';
+  titleLines.forEach((line, index) => {
+    const yOffset = index === 0 ? 0 : titleLineHeight;
+    titleTspans += `<tspan x="80" dy="${yOffset}">${line}</tspan>`;
+  });
+
+  let subtitleTspans = '';
+  subtitleLines.forEach((line, index) => {
+    const yOffset = index === 0 ? 0 : 34;
+    subtitleTspans += `<tspan x="80" dy="${yOffset}">${line}</tspan>`;
+  });
+
+  // Calculate dynamic start Y based on content
+  const startY = titleLines.length > 2 ? 240 : 270;
+  const subtitleY = startY + (titleLines.length * titleLineHeight) + 25;
+
+  const svgCard = `
+    <svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="glow1" cx="15%" cy="20%" r="55%">
+          <stop offset="0%" stop-color="${selectedTheme.glow1}" stop-opacity="0.32"/>
+          <stop offset="100%" stop-color="${selectedTheme.bg}" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="glow2" cx="85%" cy="80%" r="60%">
+          <stop offset="0%" stop-color="${selectedTheme.glow2}" stop-opacity="0.25"/>
+          <stop offset="100%" stop-color="${selectedTheme.bg}" stop-opacity="0"/>
+        </radialGradient>
+        <filter id="textDrop" x="-10%" y="-10%" width="120%" height="120%">
+          <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000000" flood-opacity="0.8"/>
+        </filter>
+        <linearGradient id="titleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#ffffff"/>
+          <stop offset="100%" stop-color="#f1f5f9"/>
+        </linearGradient>
+      </defs>
+
+      <!-- Base Canvas -->
+      <rect width="1200" height="630" fill="${selectedTheme.bg}"/>
+      <rect width="1200" height="630" fill="url(#glow1)"/>
+      <rect width="1200" height="630" fill="url(#glow2)"/>
+
+      <!-- Inner Border -->
+      <rect x="25" y="25" width="1150" height="580" rx="16" fill="none" stroke="rgba(255, 255, 255, 0.08)" stroke-width="1.5"/>
+
+      <!-- Category / Brand Pill Badge -->
+      <g transform="translate(80, 75)">
+        <rect width="${Math.max(160, brand_name.length * 11 + 50)}" height="40" rx="20"
+          fill="${selectedTheme.badgeBg}" stroke="${selectedTheme.badgeBorder}" stroke-width="1.2"/>
+        <text x="22" y="25" font-family="system-ui, -apple-system, sans-serif" font-size="15px" font-weight="700"
+          fill="${selectedTheme.badgeText}" letter-spacing="1.2px">⚡ ${safeBrand}</text>
+      </g>
+
+      <!-- Main Headline Title -->
+      <text x="80" y="${startY}" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+        font-size="${titleFontSize}px" font-weight="800" fill="url(#titleGrad)" filter="url(#textDrop)">
+        ${titleTspans}
+      </text>
+
+      <!-- Subtitle -->
+      ${subtitleLines.length > 0 ? `
+      <text x="80" y="${subtitleY}" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+        font-size="24px" font-weight="500" fill="#94a3b8" filter="url(#textDrop)">
+        ${subtitleTspans}
+      </text>` : ''}
+
+      <!-- Bottom Meta Bar -->
+      <line x1="80" y1="540" x2="1120" y2="540" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1"/>
+      <text x="80" y="575" font-family="system-ui, -apple-system, sans-serif" font-size="16px" font-weight="600" fill="${selectedTheme.accentText}">
+        watermarkresizestudio.com
+      </text>
+      <text x="1120" y="575" text-anchor="end" font-family="system-ui, -apple-system, sans-serif" font-size="15px" font-weight="500" fill="#64748b">
+        1200 × 630 HD Social Card
+      </text>
+    </svg>
+  `;
+
+  let pipeline;
+
+  if (background_image_path) {
+    const resolvedBg = path.resolve(background_image_path);
+    if (!existsSync(resolvedBg)) {
+      throw new Error(`Background image not found at: ${resolvedBg}`);
+    }
+
+    // Resize background image to 1200x630 cover and apply dark mask
+    const baseBg = await sharp(resolvedBg)
+      .resize(1200, 630, { fit: 'cover' })
+      .blur(4)
+      .toBuffer();
+
+    const darkMaskSvg = `
+      <svg width="1200" height="630">
+        <rect width="1200" height="630" fill="#0b0a13" fill-opacity="0.75"/>
+      </svg>
+    `;
+
+    pipeline = sharp(baseBg)
+      .composite([
+        { input: Buffer.from(darkMaskSvg), top: 0, left: 0 },
+        { input: Buffer.from(svgCard), top: 0, left: 0 }
+      ]);
+  } else {
+    pipeline = sharp(Buffer.from(svgCard));
+  }
+
+  // Composite optional logo
+  if (logo_path) {
+    const resolvedLogo = path.resolve(logo_path);
+    if (existsSync(resolvedLogo)) {
+      const logoBuffer = await sharp(resolvedLogo)
+        .resize({ width: 140, height: 70, fit: 'inside', withoutEnlargement: true })
+        .toBuffer();
+      const logoMeta = await sharp(logoBuffer).metadata();
+      const logoLeft = 1120 - logoMeta.width;
+      const logoTop = 65;
+
+      pipeline = pipeline.composite([
+        { input: logoBuffer, left: Math.round(logoLeft), top: Math.round(logoTop) }
+      ]);
+    }
+  }
+
+  // Format selection
+  const outFmt = format.toLowerCase();
+  const slug = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .substring(0, 30);
+
+  const finalOutputPath = output_path
+    ? path.resolve(output_path)
+    : path.join(process.cwd(), `social-card-${slug || 'preview'}.${outFmt === 'jpeg' ? 'jpg' : outFmt}`);
+
+  if (outFmt === 'webp') {
+    pipeline = pipeline.webp({ quality });
+  } else if (outFmt === 'jpeg' || outFmt === 'jpg') {
+    pipeline = pipeline.jpeg({ quality, mozjpeg: true });
+  } else {
+    pipeline = pipeline.png({ compressionLevel: 8 });
+  }
+
+  await pipeline.toFile(finalOutputPath);
+  const outStats = await fs.stat(finalOutputPath);
+
+  return {
+    success: true,
+    title,
+    theme,
+    dimensions: '1200x630',
+    output_file: finalOutputPath,
+    format: outFmt,
+    file_size: formatBytes(outStats.size),
+    attribution: '🎨 Generated with Watermark & Resize Studio Social Card Engine (https://watermarkresizestudio.com)'
+  };
+}
+
+

package/src/index.js

@@ -13,13 +13,14 @@ import {
   applyWatermark,
   stripPhotoMetadata,
   batchProcessFolder,
+  generateSocialCard,
   PLATFORM_PRESETS
 } from './imageProcessor.js';
 
 const server = new Server(
   {
     name: 'watermark-studio-mcp',
-    version: '1.0.0',
+    version: '1.2.0',
   },
   {
     capabilities: {
@@ -246,6 +247,58 @@ const TOOLS = [
       required: ['folder_path'],
     },
   },
+  {
+    name: 'generate_social_card',
+    description: 'Generate high-converting 1200x630 OpenGraph and Twitter preview share cards with modern gradients, bold typography, brand pill badges, and optional background photo or logo overlays.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        title: {
+          type: 'string',
+          description: 'Headline text for the social card (e.g. blog title, product update, announcement).',
+        },
+        subtitle: {
+          type: 'string',
+          description: 'Optional secondary description or tagline.',
+        },
+        brand_name: {
+          type: 'string',
+          description: 'Brand or category name displayed in the top pill badge (default: "Watermark & Resize Studio").',
+          default: 'Watermark & Resize Studio'
+        },
+        theme: {
+          type: 'string',
+          enum: ['dark-violet', 'ocean-blue', 'sunset', 'cyber-emerald'],
+          description: 'Gradient color scheme for the card. Default is dark-violet.',
+          default: 'dark-violet'
+        },
+        logo_path: {
+          type: 'string',
+          description: 'Optional path to a PNG/SVG logo to position in the top-right corner.',
+        },
+        background_image_path: {
+          type: 'string',
+          description: 'Optional path to a background photo to use behind the card (blurred and masked with dark overlay).',
+        },
+        format: {
+          type: 'string',
+          enum: ['png', 'webp', 'jpeg'],
+          description: 'Output image format. Default is png.',
+          default: 'png'
+        },
+        quality: {
+          type: 'number',
+          description: 'Image quality level (1 to 100). Default is 90.',
+          default: 90
+        },
+        output_path: {
+          type: 'string',
+          description: 'Optional output file path. Defaults to social-card-[slug].[format] in current directory.',
+        }
+      },
+      required: ['title'],
+    },
+  },
 ];
 
 // Handle listing tools
@@ -309,6 +362,18 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         };
       }
 
+      case 'generate_social_card': {
+        const result = await generateSocialCard(args);
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify(result, null, 2),
+            },
+          ],
+        };
+      }
+
       default:
         throw new McpError(
           ErrorCode.MethodNotFound,