@yashwant.dharmdas/elementor-mcp 3.16.0 → 3.18.0

package/dist/index.js

@@ -3,6 +3,8 @@ import AjvModule from "ajv";
 const Ajv = AjvModule.default || AjvModule;
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { createServer } from "node:http";
 import { z } from "zod";
 import axios from "axios";
 import fs from "fs";
@@ -4005,6 +4007,77 @@ function createMcpServer(sites) {
             return { content: [{ type: "text", text: `Error setting button: ${error.response?.data?.message || error.message}` }], isError: true };
         }
     });
+    // ── set-css-filters ───────────────────────────────────────────────────────
+    server.tool("set-css-filters", "Apply CSS filter effects to an image widget (or any widget via the Advanced tab) — blur, brightness, contrast, saturation, hue rotation. Use this when a Figma layer has image adjustments applied (Saturation slider, Contrast, Exposure, etc.).\n\nFIGMA → ELEMENTOR VALUE MAPPING (caller must convert):\n  • Figma Saturation -100..+100 → Elementor saturation 0..200 (formula: 100 + figma_value). A fully-desaturated Figma image (-100) → Elementor saturation=0 (B&W).\n  • Figma Contrast -100..+100 → Elementor contrast 0..200.\n  • Figma Exposure -100..+100 → Elementor brightness 0..200 (closest CSS-filter equivalent).\n  • Figma Highlights / Shadows / Temperature / Tint → no clean CSS-filter equivalent. Surface as a TODO; do NOT improvise with brightness/contrast.\n  • Figma Blur → Elementor blur in px.\n\nELEMENTOR-NATIVE RANGES (what this tool accepts directly):\n  • blur:       0..30   (px, 0 = none)\n  • brightness: 0..200  (100 = neutral, <100 darker, >100 brighter)\n  • contrast:   0..200  (100 = neutral)\n  • saturation: 0..200  (100 = neutral, 0 = B&W, 200 = oversaturated)\n  • hue:        0..360  (degrees, 0 = no rotation)\n\nAutomatically sets `css_filters_css_filter='custom'` so the values take effect. Pass `reset=true` to clear all filters (returns the widget to the default 'normal' filter mode). For non-image widgets, set `apply_to='any-widget'` to use the Advanced-tab `_css_filters_*` keys instead of the image-widget Style-tab `css_filters_*` keys.", {
+        page_id: z.string().describe("WordPress Page ID"),
+        element_id: z.string().describe("Element ID (typically an image widget; or any widget when apply_to='any-widget')"),
+        blur: z.number().optional().describe("Blur in px (0..30). 0 = no blur."),
+        brightness: z.number().optional().describe("Brightness 0..200 (100 = neutral)"),
+        contrast: z.number().optional().describe("Contrast 0..200 (100 = neutral)"),
+        saturation: z.number().optional().describe("Saturation 0..200 (100 = neutral, 0 = B&W). For a Figma layer with Saturation=-100, pass 0 here."),
+        hue: z.number().optional().describe("Hue rotation in degrees 0..360"),
+        hover_blur: z.number().optional().describe("Blur on hover (px)"),
+        hover_brightness: z.number().optional().describe("Brightness on hover (0..200)"),
+        hover_contrast: z.number().optional().describe("Contrast on hover (0..200)"),
+        hover_saturation: z.number().optional().describe("Saturation on hover (0..200)"),
+        hover_hue: z.number().optional().describe("Hue on hover (degrees)"),
+        apply_to: z.enum(["image-widget", "any-widget"]).optional().describe("Default 'image-widget' (Style-tab keys, css_filters_*). Use 'any-widget' for filters on a non-image widget via the Advanced tab (_css_filters_*)."),
+        reset: z.boolean().optional().describe("Clear all filters and set css_filter mode back to 'normal'. All numeric params are ignored when reset=true."),
+        site: siteParam,
+    }, async ({ page_id, element_id, blur, brightness, contrast, saturation, hue, hover_blur, hover_brightness, hover_contrast, hover_saturation, hover_hue, apply_to, reset, site }) => {
+        try {
+            const { wpUrl, authHeader } = resolveSite(sites, site);
+            const prefix = (apply_to ?? "image-widget") === "any-widget" ? "_css_filters_" : "css_filters_";
+            const slider = (n, unit = "px") => ({ unit, size: n, sizes: [] });
+            const s = {};
+            if (reset === true) {
+                s[`${prefix}css_filter`] = "normal";
+                // Zero out values explicitly so the editor doesn't keep showing stale settings
+                s[`${prefix}blur`] = slider(0);
+                s[`${prefix}brightness`] = slider(100);
+                s[`${prefix}contrast`] = slider(100);
+                s[`${prefix}saturation`] = slider(100);
+                s[`${prefix}hue`] = slider(0);
+            }
+            else {
+                // Any filter param triggers 'custom' mode
+                const anySet = blur !== undefined || brightness !== undefined || contrast !== undefined ||
+                    saturation !== undefined || hue !== undefined ||
+                    hover_blur !== undefined || hover_brightness !== undefined || hover_contrast !== undefined ||
+                    hover_saturation !== undefined || hover_hue !== undefined;
+                if (!anySet) {
+                    return { content: [{ type: "text", text: "No filter parameters provided. Pass at least one of blur/brightness/contrast/saturation/hue (or hover_*) — or pass reset=true." }], isError: true };
+                }
+                s[`${prefix}css_filter`] = "custom";
+                if (blur !== undefined)
+                    s[`${prefix}blur`] = slider(blur);
+                if (brightness !== undefined)
+                    s[`${prefix}brightness`] = slider(brightness);
+                if (contrast !== undefined)
+                    s[`${prefix}contrast`] = slider(contrast);
+                if (saturation !== undefined)
+                    s[`${prefix}saturation`] = slider(saturation);
+                if (hue !== undefined)
+                    s[`${prefix}hue`] = slider(hue);
+                // Hover variants
+                if (hover_blur !== undefined)
+                    s[`${prefix}hover_blur`] = slider(hover_blur);
+                if (hover_brightness !== undefined)
+                    s[`${prefix}hover_brightness`] = slider(hover_brightness);
+                if (hover_contrast !== undefined)
+                    s[`${prefix}hover_contrast`] = slider(hover_contrast);
+                if (hover_saturation !== undefined)
+                    s[`${prefix}hover_saturation`] = slider(hover_saturation);
+                if (hover_hue !== undefined)
+                    s[`${prefix}hover_hue`] = slider(hover_hue);
+            }
+            const result = await applyElementSettings(wpUrl, authHeader, page_id, element_id, s);
+            return { content: [{ type: "text", text: JSON.stringify({ applied: s, result }, null, 2) }] };
+        }
+        catch (error) {
+            return { content: [{ type: "text", text: `Error setting CSS filters: ${error.response?.data?.message || error.message}` }], isError: true };
+        }
+    });
     // ── validate-page-structure ───────────────────────────────────────────────
     server.tool("validate-page-structure", "Post-build sanity check on a page. Returns a report of structural / standards violations: header widgets in page body (should be a template), images with external URLs missing WP attachment IDs, hardcoded fonts/colors that should use kit globals, legacy _element_width on flex children, missing image alt text, suspicious min-heights. Call this AFTER building a page from Figma. If errors are found, fix them with the typed tools and re-run. If only warnings remain, surface them to the human for review.", {
         page_id: z.string().describe("WordPress Page ID to validate"),
@@ -4034,7 +4107,60 @@ else {
         console.error("No sites configured. Run first: npx elementor-mcp setup");
         process.exit(1);
     }
-    const server = createMcpServer(sites);
-    const transport = new StdioServerTransport();
-    await server.connect(transport);
+    const useStdio = process.argv.includes("--stdio");
+    if (useStdio) {
+        // ── Stdio mode — for Claude Desktop ──────────────────────────────────
+        const server = createMcpServer(sites);
+        const transport = new StdioServerTransport();
+        await server.connect(transport);
+    }
+    else {
+        // ── HTTP mode (default) — for browser-based MCP testers ──────────────
+        const port = parseInt(process.env.PORT ?? "3001");
+        const mcpServer = createMcpServer(sites);
+        const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
+        await mcpServer.connect(transport);
+        const httpServer = createServer(async (req, res) => {
+            // CORS — allow browser clients and Chrome Private Network Access
+            res.setHeader("Access-Control-Allow-Origin", "*");
+            res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+            res.setHeader("Access-Control-Allow-Headers", "Content-Type, mcp-session-id");
+            res.setHeader("Access-Control-Allow-Private-Network", "true");
+            if (req.method === "OPTIONS") {
+                res.writeHead(204);
+                res.end();
+                return;
+            }
+            if (req.url === "/health") {
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({ status: "ok", sites: sites.map((s) => s.name) }));
+                return;
+            }
+            if (req.url === "/mcp") {
+                let body;
+                if (req.method === "POST") {
+                    const chunks = [];
+                    await new Promise((resolve, reject) => {
+                        req.on("data", (c) => chunks.push(c));
+                        req.on("end", resolve);
+                        req.on("error", reject);
+                    });
+                    try {
+                        body = JSON.parse(Buffer.concat(chunks).toString());
+                    }
+                    catch { /* non-JSON body */ }
+                }
+                await transport.handleRequest(req, res, body);
+                return;
+            }
+            res.writeHead(404);
+            res.end("Not found");
+        });
+        httpServer.listen(port, () => {
+            console.log(`Elementor MCP HTTP server listening on port ${port}`);
+            console.log(`MCP endpoint:  http://localhost:${port}/mcp`);
+            console.log(`Health check:  http://localhost:${port}/health`);
+            console.log(`Sites loaded:  ${sites.map((s) => s.name).join(", ")}`);
+        });
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yashwant.dharmdas/elementor-mcp",
-  "version": "3.16.0",
+  "version": "3.18.0",
   "description": "MCP server for controlling Elementor via Claude — supports multiple WordPress sites",
   "main": "dist/index.js",
   "type": "module",