@yashwant.dharmdas/elementor-mcp 3.1.0 → 3.2.1

package/dist/index.js

@@ -992,6 +992,121 @@ function createMcpServer(sites) {
             return { content: [{ type: "text", text: `Error enabling Elementor: ${error.response?.data?.message || error.message}` }], isError: true };
         }
     });
+    // ── Group 9: Screenshot ──────────────────────────────────────────────────────
+    server.tool("screenshot-page", "Take a screenshot of a published WordPress page using system Chrome. Saves the file to disk and returns both a preview image and the saved file path. Pass the file_path to Basecamp MCP's upload_attachment tool to attach it — never relay the raw image data yourself.", {
+        page_id: z.string().describe("WordPress Page ID"),
+        full_page: z.boolean().optional().describe("Capture full scrollable page (default: true)"),
+        width: z.number().optional().describe("Viewport width in pixels (default: 1440)"),
+        format: z.enum(["jpeg", "png"]).optional().describe("Image format — jpeg is much smaller and recommended (default: jpeg)"),
+        quality: z.number().min(1).max(100).optional().describe("JPEG quality 1–100 (default: 82). Lower = smaller file size."),
+        max_height: z.number().optional().describe("Cap the captured height in pixels (e.g. 4000). Useful for very long pages to stay under size limits."),
+        site: siteParam,
+    }, async ({ page_id, full_page, width, format, quality, max_height, site }) => {
+        try {
+            const { wpUrl, authHeader } = resolveSite(sites, site);
+            // ── 1. Resolve the page's public URL ─────────────────────────────
+            const pageRes = await axios.get(`${wpUrl}/wp-json/wp/v2/pages/${page_id}`, {
+                headers: { Authorization: authHeader },
+            });
+            const pageUrl = pageRes.data.link;
+            if (!pageUrl)
+                throw new Error("Could not resolve public URL for this page.");
+            // ── 2. Detect system Chrome ───────────────────────────────────────
+            const chromePaths = [
+                "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+                "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+                "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+                "/usr/bin/google-chrome",
+                "/usr/bin/google-chrome-stable",
+                "/usr/bin/chromium-browser",
+                "/usr/bin/chromium",
+            ];
+            let executablePath;
+            for (const p of chromePaths) {
+                if (fs.existsSync(p)) {
+                    executablePath = p;
+                    break;
+                }
+            }
+            if (!executablePath) {
+                throw new Error("Google Chrome not found. Install it from https://www.google.com/chrome/\n" +
+                    "Checked:\n" + chromePaths.map(p => `  • ${p}`).join("\n"));
+            }
+            // ── 3. Ensure screenshots directory exists ───────────────────────
+            const screenshotsDir = path.join(CONFIG_DIR, "screenshots");
+            if (!fs.existsSync(screenshotsDir))
+                fs.mkdirSync(screenshotsDir, { recursive: true });
+            // ── 4. Launch puppeteer-core ──────────────────────────────────────
+            let puppeteer;
+            try {
+                puppeteer = await import("puppeteer-core");
+            }
+            catch {
+                throw new Error("puppeteer-core is not installed. Reinstall @yashwant.dharmdas/elementor-mcp to get it.");
+            }
+            const browser = await puppeteer.launch({
+                executablePath,
+                headless: true,
+                args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
+            });
+            try {
+                const page = await browser.newPage();
+                const vpWidth = width ?? 1440;
+                const vpHeight = max_height ?? 900;
+                await page.setViewport({ width: vpWidth, height: vpHeight, deviceScaleFactor: 1 });
+                await page.goto(pageUrl, { waitUntil: "networkidle2", timeout: 30_000 });
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                const fmt = format ?? "jpeg";
+                const screenshotOptions = { type: fmt, fullPage: !max_height && (full_page ?? true) };
+                if (fmt === "jpeg")
+                    screenshotOptions.quality = quality ?? 82;
+                if (max_height)
+                    screenshotOptions.clip = { x: 0, y: 0, width: vpWidth, height: vpHeight };
+                const screenshotBuffer = await page.screenshot(screenshotOptions);
+                const buf = Buffer.isBuffer(screenshotBuffer) ? screenshotBuffer : Buffer.from(screenshotBuffer);
+                // ── 5. Save to disk ─────────────────────────────────────────────
+                const ext = fmt === "jpeg" ? "jpg" : "png";
+                const filename = `page_${page_id}_${Date.now()}.${ext}`;
+                const filePath = path.join(screenshotsDir, filename);
+                fs.writeFileSync(filePath, buf);
+                const sizeKB = Math.round(buf.length / 1024);
+                const mimeType = `image/${fmt}`;
+                // ── 6. Return image preview if small enough, always return path ─
+                const PREVIEW_LIMIT = 750 * 1024; // 750 KB raw → ~1 MB base64
+                const content = [
+                    {
+                        type: "text",
+                        text: [
+                            `✅ Screenshot saved successfully.`,
+                            `📁 file_path: ${filePath}`,
+                            `📐 Size: ${sizeKB} KB  |  Format: ${ext.toUpperCase()}  |  URL: ${pageUrl}`,
+                            ``,
+                            `👉 To upload to Basecamp, call upload_attachment with:`,
+                            `   file_path = "${filePath}"`,
+                            `   project_id = <your Basecamp project ID>`,
+                        ].join("\n"),
+                    },
+                ];
+                if (buf.length <= PREVIEW_LIMIT) {
+                    content.unshift({
+                        type: "image",
+                        data: buf.toString("base64"),
+                        mimeType,
+                    });
+                }
+                return { content };
+            }
+            finally {
+                await browser.close();
+            }
+        }
+        catch (error) {
+            return {
+                content: [{ type: "text", text: `Error taking screenshot: ${error.message}` }],
+                isError: true,
+            };
+        }
+    });
     return server;
 }
 // ─── Entry Point ──────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yashwant.dharmdas/elementor-mcp",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "MCP server for controlling Elementor via Claude — supports multiple WordPress sites",
   "main": "dist/index.js",
   "type": "module",
@@ -19,6 +19,7 @@
     "@modelcontextprotocol/sdk": "^1.26.0",
     "ajv": "^8.12.0",
     "axios": "^1.6.0",
+    "puppeteer-core": "^22.15.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {