@elementor/elementor-v3-mcp 4.1.0-754

package/dist/index.mjs

@@ -0,0 +1,1125 @@
+// src/elementor-mcp-server.ts
+import { getAngieSdk } from "@elementor/editor-mcp";
+import { waitForElementorEditor } from "@elementor/elementor-mcp-common";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+// src/resources.ts
+import { ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+// src/utils.ts
+var getElementor = () => window.elementor;
+var get$e = () => window.$e;
+var getElementorCommon = () => window.elementorCommon;
+function encodeToolJson(data) {
+  return JSON.stringify(data).replaceAll('"', "'");
+}
+
+// src/context.ts
+function deepMerge(target, source) {
+  if (!source || typeof source !== "object") {
+    return target;
+  }
+  if (!target || typeof target !== "object") {
+    return source;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (Array.isArray(sourceValue)) {
+      result[key] = sourceValue;
+    } else if (sourceValue && typeof sourceValue === "object") {
+      result[key] = deepMerge(targetValue, sourceValue);
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function getPageOverView() {
+  const document = getElementor()?.documents?.getCurrent();
+  if (!document) {
+    return { error: "No active document found" };
+  }
+  function extractElementData(element) {
+    if (!element || !element.model) {
+      return null;
+    }
+    const model = element.model.attributes;
+    if (!model) {
+      return null;
+    }
+    const result = {
+      id: model.id,
+      elType: model.elType,
+      widgetType: model.widgetType || void 0
+    };
+    const title = model.title || element.model.editor_settings?.title;
+    if (title) {
+      result.title = title;
+    }
+    if (element.children && element.children.length > 0) {
+      result.children = element.children.map((child) => extractElementData(child)).filter((child) => child !== null);
+    }
+    return result;
+  }
+  const containers = document.container.children ?? [];
+  const elements = containers.map((container) => extractElementData(container));
+  return {
+    documentId: document.id,
+    documentType: document.config?.type ?? "unknown",
+    title: document.config?.settings?.post_title || "Untitled",
+    elements: elements.filter((el) => el !== null)
+  };
+}
+function mapControlsToSchema(controlsData) {
+  if (!controlsData || typeof controlsData !== "object") {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(controlsData).filter(([, control]) => !["section", "tab", "tabs"].includes(control.type)).map(([controlKey, control]) => {
+      let options;
+      const controlConfig = getElementor()?.config?.controls?.[control.type] || {};
+      const completeConfig = deepMerge(controlConfig, control);
+      const returnValue = completeConfig.return_value;
+      if (completeConfig.options) {
+        options = Object.keys(completeConfig.options);
+      }
+      let fields;
+      if (completeConfig.fields) {
+        fields = mapControlsToSchema(completeConfig.fields);
+      }
+      const returnConfig = {
+        type: control.type,
+        default: completeConfig.default
+      };
+      if (options) {
+        returnConfig.options = options;
+      }
+      if (fields) {
+        returnConfig.fields = fields;
+      }
+      if (completeConfig.size_units) {
+        returnConfig.size_units = completeConfig.size_units;
+      }
+      if (returnValue !== void 0) {
+        returnConfig.onValue = returnValue;
+      }
+      return [controlKey, returnConfig];
+    })
+  );
+}
+function getDocumentSchema(documentId) {
+  const document = getElementor()?.documents?.get?.(documentId);
+  if (!document) {
+    return;
+  }
+  const controls = document.config?.settings?.controls;
+  return mapControlsToSchema(controls);
+}
+function loadDocumentSettings(documentId) {
+  const document = getElementor()?.documents?.get?.(documentId);
+  if (!document) {
+    return;
+  }
+  const allSettings = document.config?.settings?.settings || {};
+  const controls = document.config?.settings?.controls || {};
+  const result = {};
+  Object.entries(allSettings).forEach(([controlKey, value]) => {
+    const control = controls[controlKey];
+    if (value !== control?.default) {
+      result[controlKey] = value;
+    }
+  });
+  return result;
+}
+function loadDocumentSchema(documentId) {
+  return getDocumentSchema(documentId);
+}
+
+// src/resources.ts
+var RESOURCE_NAME_ELEMENT_SETTINGS = "elementor-element-settings";
+var RESOURCE_URI_ELEMENT_SETTINGS_TEMPLATE = "elementor://editor/element-settings/{elementId}";
+var RESOURCE_NAME_WIDGET_CONFIG = "elementor-widget-config";
+var RESOURCE_URI_WIDGET_CONFIG_TEMPLATE = "elementor://editor/widget-config/{widgetType}";
+var RESOURCE_NAME_PAGE_OVERVIEW = "elementor-page-overview";
+var RESOURCE_URI_PAGE_OVERVIEW = "elementor://editor/page-overview";
+var RESOURCE_NAME_PAGE_SETTINGS = "elementor-page-settings";
+var RESOURCE_URI_PAGE_SETTINGS = "elementor://editor/page-settings";
+function decodeResourceVariable(value) {
+  try {
+    let decoded = decodeURIComponent(value).replace(/[·]/g, "");
+    decoded = decoded.replace(/^{|}$/g, "");
+    return decoded;
+  } catch {
+    return value;
+  }
+}
+async function handleGetWidgetSettings(params) {
+  const elementor = getElementor();
+  const container = elementor?.getContainer(params.elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${params.elementId} not found.`);
+  }
+  const settings = container.settings.attributes || {};
+  return {
+    content: [{ type: "text", text: encodeToolJson(settings) }]
+  };
+}
+async function handleGetWidgetSchema(params) {
+  const elementor = getElementor();
+  const controls = elementor?.widgetsCache[params.widgetType]?.controls;
+  if (!controls) {
+    throw new Error(`Widget type ${params.widgetType} not found.`);
+  }
+  return {
+    content: [{ type: "text", text: encodeToolJson(controls) }]
+  };
+}
+function addElementorResources(server) {
+  server.resource(
+    RESOURCE_NAME_PAGE_OVERVIEW,
+    RESOURCE_URI_PAGE_OVERVIEW,
+    {
+      description: "Complete page structure showing all elements, containers, and their hierarchical relationships on the current Elementor page"
+    },
+    async (uri) => {
+      const overview = getPageOverView();
+      if (!overview || overview.error) {
+        throw new Error(overview?.error || "Failed to retrieve page overview");
+      }
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            mimeType: "application/json",
+            text: encodeToolJson(overview)
+          }
+        ]
+      };
+    }
+  );
+  server.resource(
+    RESOURCE_NAME_PAGE_SETTINGS,
+    RESOURCE_URI_PAGE_SETTINGS,
+    {
+      description: "Page/document settings schema and current values including title, template, margins, padding, and backgrounds"
+    },
+    async (uri) => {
+      const elementor = getElementor();
+      const currentDocument = elementor?.documents?.getCurrent();
+      if (!currentDocument) {
+        throw new Error("No active document found");
+      }
+      const documentSchema = loadDocumentSchema(currentDocument.id);
+      const documentSettings = loadDocumentSettings(currentDocument.id);
+      if (!documentSchema || !documentSettings) {
+        throw new Error("Failed to retrieve page settings");
+      }
+      const result = {
+        schema: documentSchema,
+        currentSettings: documentSettings
+      };
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            mimeType: "application/json",
+            text: encodeToolJson(result)
+          }
+        ]
+      };
+    }
+  );
+  server.resource(
+    RESOURCE_NAME_ELEMENT_SETTINGS,
+    new ResourceTemplate(RESOURCE_URI_ELEMENT_SETTINGS_TEMPLATE, {
+      list: void 0
+    }),
+    {
+      description: "Complete settings schema and current values for a specific element, including all available configuration options and their current state"
+    },
+    async (uri, variables) => {
+      let elementId = Array.isArray(variables.elementId) ? variables.elementId[0] : variables.elementId;
+      if (!elementId) {
+        throw new Error("Element ID is required");
+      }
+      elementId = decodeResourceVariable(elementId);
+      const result = await handleGetWidgetSettings({ elementId, action: "get-widget-settings" });
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            mimeType: "text/plain",
+            text: result.content[0].text
+          }
+        ]
+      };
+    }
+  );
+  server.resource(
+    RESOURCE_NAME_WIDGET_CONFIG,
+    new ResourceTemplate(RESOURCE_URI_WIDGET_CONFIG_TEMPLATE, {
+      list: void 0
+    }),
+    {
+      description: "Complete configuration schema for a specific widget type, showing all available settings, properties, and their expected formats"
+    },
+    async (uri, variables) => {
+      let widgetType = Array.isArray(variables.widgetType) ? variables.widgetType[0] : variables.widgetType;
+      if (!widgetType) {
+        throw new Error("Widget type is required");
+      }
+      widgetType = decodeResourceVariable(widgetType);
+      const result = await handleGetWidgetSchema({ widgetType, action: "get-widget-schema" });
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            mimeType: "text/plain",
+            text: result.content[0].text
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/tools/ai-tool.ts
+import { z } from "@elementor/schema";
+function addAiTool(server) {
+  server.registerTool(
+    "ai",
+    {
+      description: "Manage Elementor AI integration features and interfaces.",
+      inputSchema: {
+        action: z.enum(["open-brand-voice", "open-choose-element", "open-text-to-elementor"]).describe("The AI operation to perform")
+      },
+      annotations: {
+        title: "Manage AI Integration"
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "open-brand-voice":
+          return await handleOpenBrandVoice();
+        case "open-choose-element":
+          return await handleOpenChooseElement();
+        case "open-text-to-elementor":
+          return await handleOpenTextToElementor();
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleOpenBrandVoice() {
+  await get$e()?.run("ai-integration/open-brand-voice");
+  return {
+    content: [{ type: "text", text: "Brand Voice interface opened." }]
+  };
+}
+async function handleOpenChooseElement() {
+  await get$e()?.run("ai-integration/open-choose-element");
+  return {
+    content: [{ type: "text", text: "Choose Element interface opened." }]
+  };
+}
+async function handleOpenTextToElementor() {
+  await get$e()?.run("ai-integration/open-text-to-elementor");
+  return {
+    content: [{ type: "text", text: "Text to Elementor interface opened." }]
+  };
+}
+
+// src/tools/dynamic-tool.ts
+import { z as z2 } from "@elementor/schema";
+
+// src/validation-helpers.ts
+function validateDocumentSettingsUpdated(container) {
+  const updatedSettings = container.settings.attributes;
+  if (!updatedSettings) {
+    throw new Error("Document settings update failed: Settings not accessible");
+  }
+}
+function validateDynamicTagEnabled(container, controlName) {
+  const modelSettings = container.model?.attributes?.settings;
+  const controlValue = modelSettings?.[controlName];
+  const hasDynamic = controlValue && typeof controlValue === "object" && "__dynamic__" in controlValue;
+  if (!hasDynamic) {
+    throw new Error(`Dynamic tag enable failed: Tag not found for ${controlName}`);
+  }
+}
+function validateDynamicTagDisabled(container, controlName) {
+  const modelSettings = container.model?.attributes?.settings;
+  const controlValue = modelSettings?.[controlName];
+  const stillHasDynamic = controlValue && typeof controlValue === "object" && "__dynamic__" in controlValue;
+  if (stillHasDynamic) {
+    throw new Error(`Dynamic tag disable failed: Tag still exists for ${controlName}`);
+  }
+}
+
+// src/tools/dynamic-tool.ts
+function addDynamicTool(server) {
+  server.registerTool(
+    "dynamic",
+    {
+      description: "Manage dynamic-tags content for Elementor elements including getting dynamic settings, enabling and disabling dynamic tags.",
+      inputSchema: {
+        action: z2.enum(["get-settings", "enable", "disable"]).describe("The dynamic content operation to perform"),
+        elementId: z2.string().describe("The ID of the element to modify"),
+        controlName: z2.string().describe("The name of the control/setting to make dynamic"),
+        dynamicName: z2.string().optional().describe(
+          "The name of the dynamic tag to enable. Required for enable action. Output of get-settings action."
+        ),
+        settings: z2.object({}).catchall(z2.unknown()).optional().describe(
+          "The settings to apply to the dynamic tag. Used with enable action. Output of get-settings action."
+        ),
+        hasRunGetDynamicSettings: z2.boolean().optional().describe(
+          "Whether the get-settings action has already been run. Must be set to true when using enable action."
+        )
+      },
+      annotations: {
+        title: "Manage Dynamic Content"
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "get-settings":
+          return await handleGetDynamicSettings(params);
+        case "enable":
+          if (params.hasRunGetDynamicSettings !== true) {
+            throw new Error(
+              "get-dynamic-settings action has not been run. Run it first before using the enable action."
+            );
+          }
+          if (!params.elementId || !params.controlName || !params.dynamicName || !params.settings) {
+            throw new Error(
+              "elementId, controlName, dynamicName, and settings are required for dynamic enable"
+            );
+          }
+          return await handleDynamicEnable(params);
+        case "disable":
+          if (!params.elementId || !params.controlName) {
+            throw new Error("elementId and controlName are required for dynamic disable");
+          }
+          return await handleDynamicDisable(params);
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleGetDynamicSettings(params) {
+  if (!params.elementId || !params.controlName) {
+    throw new Error("elementId and controlName are required for get-settings");
+  }
+  const elementor = getElementor();
+  const container = elementor?.getContainer(params.elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${params.elementId} not found.`);
+  }
+  const controls = container.settings.controls;
+  const control = controls[params.controlName];
+  if (!control) {
+    throw new Error(`Control "${params.controlName}" not found on element ${params.elementId}.`);
+  }
+  if (!control.dynamic?.categories) {
+    throw new Error(`Control "${params.controlName}" does not support dynamic content.`);
+  }
+  const { categories } = control.dynamic;
+  const dynamicTags = elementor?.dynamicTags;
+  if (!dynamicTags?.getConfig) {
+    throw new Error("Dynamic tags API is not available.");
+  }
+  const tags = dynamicTags.getConfig("tags");
+  const relevantTags = Object.values(tags).filter(
+    (tag) => tag.categories.find((category) => categories.includes(category))
+  );
+  return {
+    content: [{ type: "text", text: JSON.stringify(relevantTags, null, 2) }]
+  };
+}
+async function handleDynamicEnable(params) {
+  if (!params.elementId || !params.controlName || !params.dynamicName) {
+    throw new Error("elementId, controlName, and dynamicName are required for dynamic enable");
+  }
+  if (params.hasRunGetDynamicSettings !== true) {
+    throw new Error("get-dynamic-settings action has not been run. Run it first before using the enable action.");
+  }
+  const elementor = getElementor();
+  const container = elementor?.getContainer(params.elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${params.elementId} not found.`);
+  }
+  const dynamicName = params.dynamicName.toLowerCase().replace(/\s+/g, "-").replace(/_/g, "-").replace(/[^a-z0-9-]/g, "");
+  const settings = params.settings || {};
+  settings.toJSON = () => settings;
+  const elementorCommon = getElementorCommon();
+  if (!elementorCommon?.helpers?.getUniqueId) {
+    throw new Error("Elementor Common API is not available.");
+  }
+  const uniqueId = elementorCommon.helpers.getUniqueId();
+  const dynamicTags = elementor?.dynamicTags;
+  if (!dynamicTags?.tagDataToTagText) {
+    throw new Error("Dynamic tags API is not available.");
+  }
+  const tagText = dynamicTags.tagDataToTagText(String(uniqueId), dynamicName, settings);
+  await get$e()?.run("document/dynamic/enable", {
+    container,
+    settings: { [params.controlName]: tagText }
+  });
+  validateDynamicTagEnabled(container, params.controlName);
+  return {
+    content: [
+      {
+        type: "text",
+        text: `Dynamic content enabled for element ${params.elementId}, control "${params.controlName}" with dynamic tag "${dynamicName}": ${tagText}`
+      }
+    ]
+  };
+}
+async function handleDynamicDisable(params) {
+  if (!params.elementId || !params.controlName) {
+    throw new Error("elementId and controlName are required for dynamic disable");
+  }
+  const container = getElementor()?.getContainer(params.elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${params.elementId} not found.`);
+  }
+  const getElementDynamicSetting = (elementContainer) => {
+    const modelSettings = elementContainer.model?.attributes?.settings || {};
+    const dynamicContent = {};
+    Object.keys(modelSettings).forEach((key) => {
+      const value = modelSettings[key];
+      let dynamicData = null;
+      if (value && typeof value === "object" && value.__dynamic__) {
+        dynamicData = value.__dynamic__;
+      }
+      if (dynamicData) {
+        dynamicContent[key] = dynamicData;
+      }
+    });
+    return {
+      settingsNames: Object.keys(
+        dynamicContent.attributes || {}
+      ),
+      dynamicContent
+    };
+  };
+  const availableDynamicSettingNames = getElementDynamicSetting(container).settingsNames;
+  if (!availableDynamicSettingNames.includes(params.controlName)) {
+    throw new Error(
+      `Setting "${params.controlName}" on element ${params.elementId} does not have dynamic content enabled. here is the list of dynamic settings available: ${JSON.stringify(
+        availableDynamicSettingNames,
+        null,
+        2
+      )}`
+    );
+  }
+  await get$e()?.run("document/dynamic/disable", {
+    container,
+    settings: {
+      [params.controlName]: ""
+    }
+  });
+  validateDynamicTagDisabled(container, params.controlName);
+  return {
+    content: [
+      {
+        type: "text",
+        text: `Dynamic content disabled for setting "${params.controlName}" on element ${params.elementId}.`
+      }
+    ]
+  };
+}
+
+// src/tools/page-tool.ts
+import { z as z3 } from "@elementor/schema";
+function addPageTool(server) {
+  server.registerTool(
+    "page",
+    {
+      description: `Manage page and document operations including undo/redo, saving, page settings, and page information. Use this tool when you need to: 
+		- Undo or redo changes (history-undo, history-redo, history-undo-all) - Use these when user asks to undo, revert, or redo recent changes
+		- Save page changes (save-draft, save-publish, save-update, save-discard)
+		- Get or update page settings like page title, description, keywords, styling (get-settings, update-settings)
+		- Open or preview pages (open, preview)
+		This tool handles document-level operations and change history.`,
+      inputSchema: {
+        action: z3.enum([
+          "save-draft",
+          "save-publish",
+          "save-update",
+          "save-discard",
+          "history-undo",
+          "history-redo",
+          "history-undo-all",
+          "get-settings",
+          "update-settings",
+          "open",
+          "preview"
+        ]).describe(
+          'The page operation to perform: history-undo (revert the last change - use when user says "undo"), history-redo (reapply last undone change - use when user says "redo"), history-undo-all (revert all changes), save-draft (save as draft), save-publish (publish page), save-update (update published page), save-discard (discard unsaved changes), get-settings (retrieve page settings), update-settings (modify page settings), open (open a different page), preview (preview the page)'
+        ),
+        pageId: z3.string().optional().describe("Page/document ID for open action"),
+        settings: z3.record(z3.unknown()).optional().describe(
+          'Settings object containing the specific page settings you want to update. REQUIRED for update-settings action. Only include settings you want to change, not all settings. Example: {"hide_title": "yes", "template": "elementor_canvas"}.'
+        )
+      },
+      annotations: {
+        title: "Manage Page"
+      },
+      _meta: {
+        "angie:required-resources": [
+          {
+            uri: RESOURCE_URI_PAGE_SETTINGS,
+            whenToUse: "When updating page settings (action=update-settings) to understand the page schema, available settings, their allowed values, and current page configuration"
+          }
+        ]
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "save-draft":
+          return await handleSavePageDraft();
+        case "save-publish":
+          return await handleSavePagePublish();
+        case "save-update":
+          return await handleSavePageUpdate();
+        case "save-discard":
+          return await handleSavePageDiscard();
+        case "history-undo":
+          return await handleHistoryUndo();
+        case "history-redo":
+          return await handleHistoryRedo();
+        case "history-undo-all":
+          return await handleHistoryUndoAll();
+        case "get-settings":
+          return await handleGetDocumentSettings();
+        case "update-settings":
+          return await handleUpdateDocumentSettings(params);
+        case "open":
+          return await handleOpenPage(params);
+        case "preview":
+          return await handlePreviewPage();
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleSavePageDraft() {
+  await get$e()?.run("document/save/draft");
+  return {
+    content: [{ type: "text", text: "Page saved as draft." }]
+  };
+}
+async function handleSavePagePublish() {
+  await get$e()?.run("document/save/publish");
+  return {
+    content: [{ type: "text", text: "Page published." }]
+  };
+}
+async function handleSavePageUpdate() {
+  await get$e()?.run("document/save/update");
+  return {
+    content: [{ type: "text", text: "Page updated." }]
+  };
+}
+async function handleSavePageDiscard() {
+  await get$e()?.run("document/save/discard");
+  return {
+    content: [{ type: "text", text: "Page changes discarded." }]
+  };
+}
+async function handleHistoryUndo() {
+  await get$e()?.run("document/history/undo");
+  return {
+    content: [{ type: "text", text: "Undo performed." }]
+  };
+}
+async function handleHistoryRedo() {
+  await get$e()?.run("document/history/redo");
+  return {
+    content: [{ type: "text", text: "Redo performed." }]
+  };
+}
+async function handleHistoryUndoAll() {
+  await get$e()?.run("document/history/undo-all", { document: getElementor()?.documents.getCurrent() });
+  return {
+    content: [{ type: "text", text: "All changes undone." }]
+  };
+}
+async function handleOpenPage(params) {
+  if (!params.pageId) {
+    throw new Error("pageId is required for open action");
+  }
+  await get$e()?.run("editor/documents/open", {
+    id: params.pageId
+  });
+  return {
+    content: [{ type: "text", text: `Page ${params.pageId} opened.` }]
+  };
+}
+async function handlePreviewPage() {
+  await get$e()?.run("editor/documents/preview");
+  return {
+    content: [{ type: "text", text: "Page preview opened." }]
+  };
+}
+async function handleGetDocumentSettings() {
+  const document = getElementor()?.documents?.getCurrent();
+  if (!document) {
+    throw new Error("No active document found.");
+  }
+  const settings = document.config?.settings || {};
+  return {
+    content: [
+      {
+        type: "text",
+        text: encodeToolJson({
+          documentId: document.id,
+          documentType: document.config?.type,
+          settings
+        })
+      }
+    ]
+  };
+}
+async function handleUpdateDocumentSettings(params) {
+  const currentDocument = getElementor()?.documents?.getCurrent();
+  if (!currentDocument) {
+    throw new Error("No active document found.");
+  }
+  if (!params.settings || typeof params.settings !== "object") {
+    throw new Error("settings object is required for update-settings action");
+  }
+  await get$e()?.run("document/elements/settings", {
+    container: currentDocument.container,
+    settings: params.settings,
+    options: {
+      external: true
+    }
+  });
+  const updatedDocument = getElementor()?.documents?.getCurrent();
+  if (!updatedDocument?.container) {
+    throw new Error("Document container not found after update");
+  }
+  validateDocumentSettingsUpdated(updatedDocument.container);
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify({
+          success: true,
+          message: `Document settings updated successfully. Settings: ${JSON.stringify(
+            params.settings,
+            null,
+            2
+          )}`,
+          saveChangesSuggestion: 'Suggest the following quick user replies: "Publish Changes", "Save Draft"',
+          nextStep: "Page settings updated in editor. User should save the page to persist changes."
+        })
+      }
+    ]
+  };
+}
+
+// src/tools/routes-tool.ts
+import { z as z4 } from "@elementor/schema";
+function addRoutesTool(server) {
+  const $e = get$e();
+  const routes = $e?.routes?.getAll?.() || [];
+  const components = $e?.components?.getAll?.() || [];
+  const availableToOpenComponents = components.filter(
+    (component) => $e?.components?.get(component)?.getCommands?.()?.open
+  );
+  const availableToCloseComponents = components.filter(
+    (component) => $e?.components?.get(component)?.getCommands?.()?.close
+  );
+  server.registerTool(
+    "routes",
+    {
+      description: `Manage Elementor editor routing and navigation. Use this tool to open a component, navigate to a route, go back from a route or close components. Always prefer this tool when user is on the Elementor editor. Available routes to navigate to or back from: ${routes.join(", ")}`,
+      inputSchema: {
+        action: z4.enum(["open", "navigate", "go-back", "close"]),
+        route: z4.string().optional().describe(
+          "The route to navigate to or back from it. Do not send this parameter if you only want to open a component."
+        ),
+        componentToOpen: z4.enum(availableToOpenComponents.length ? availableToOpenComponents : [""]).optional().describe("The component to open or navigate to."),
+        componentToClose: z4.enum(availableToCloseComponents.length ? availableToCloseComponents : [""]).optional().describe("The component to close.")
+      },
+      annotations: {
+        title: "Manage Routes"
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "open":
+          return await handleOpen(params);
+        case "navigate":
+          return await handleNavigate(params);
+        case "go-back":
+          return await handleGoBack(params);
+        case "close":
+          return await handleClose(params);
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleOpen(params) {
+  const $e = get$e();
+  const component = params.componentToOpen || params.route;
+  const openCommand = $e?.components?.get(component)?.getCommands?.()?.open?.registerConfig.command;
+  if (openCommand) {
+    await $e?.run(openCommand, {});
+  } else {
+    throw new Error("Could not open component");
+  }
+  return {
+    content: [{ type: "text", text: `Opened: ${component}` }]
+  };
+}
+async function handleNavigate(params) {
+  const $e = get$e();
+  const route = params.route;
+  const componentToOpen = params.componentToOpen;
+  const openCommand = $e?.components?.get(componentToOpen)?.getCommands?.()?.open?.registerConfig.command;
+  if (openCommand) {
+    await $e?.run(openCommand, {});
+  }
+  const routeComponent = $e?.routes?.getComponent?.(route);
+  if (routeComponent) {
+    $e?.routes?.saveState?.(routeComponent.getNamespace());
+  }
+  try {
+    $e?.routes?.to?.(route, {});
+  } catch {
+    const openCommandFallback = $e?.components?.get(route)?.getCommands?.()?.open?.registerConfig.command;
+    if (openCommandFallback) {
+      await $e?.run(openCommandFallback, {});
+    } else {
+      throw new Error("Could not navigate to route");
+    }
+  }
+  return {
+    content: [{ type: "text", text: `Navigated to: ${route}` }]
+  };
+}
+async function handleGoBack(params) {
+  const $e = get$e();
+  const route = params.route;
+  const component = $e?.routes?.getComponent?.(route);
+  if (component) {
+    $e?.routes?.back?.(component.getNamespace());
+  }
+  return {
+    content: [{ type: "text", text: `Go back to: ${route}` }]
+  };
+}
+async function handleClose(params) {
+  const $e = get$e();
+  const component = params.componentToClose;
+  const closeCommand = $e?.components?.get(component)?.getCommands?.()?.close?.registerConfig.command;
+  if (closeCommand) {
+    await $e?.run(closeCommand, {});
+  } else {
+    throw new Error("Could not close component");
+  }
+  return {
+    content: [{ type: "text", text: `Closed: ${component}` }]
+  };
+}
+
+// src/tools/styling-tool.ts
+import { z as z5 } from "@elementor/schema";
+import { SamplingMessageSchema } from "@modelcontextprotocol/sdk/types.js";
+function addStylingTool(server) {
+  server.registerTool(
+    "styling",
+    {
+      description: `This tool provides AI-powered custom CSS styling for Elementor elements. Use this when users want advanced styling that goes beyond Elementor capabilities and can't be targeted using the element settings.
+
+**When to use this tool:**
+- Visual effects: shadows, filters, pseudo-elements, advanced selectors
+- Complex animations with custom keyframes or CSS transitions
+- Styling that requires media queries or complex CSS rules
+- Click-triggered effects or other non-motion triggers
+- Custom hover effects that don't involve motion (color changes, opacity, etc.)
+
+**When NOT to use this tool:**
+- Basic styling achievable through Elementor settings (colors, typography, spacing, borders, simple hover effects) -> use the elementor__elements with "update-settings" action.
+
+**Do NOT use this tool if the user mentions motion effects with supported triggers:**
+- "on hover" with motion (movement, rotation, scaling) \u2192 use motion-effects tool
+- "on scroll" with motion effects \u2192 use motion-effects tool  
+- "mouse move" / "follow mouse" \u2192 use motion-effects tool
+- "entrance" / "fade in" / "slide in" animations \u2192 use motion-effects tool
+
+**Actions available:**
+- **custom-css**: Generate and apply AI-powered custom CSS to elements
+
+This tool generates CSS code using AI, provides preview functionality, and handles user approval workflow for applying custom styles.`,
+      inputSchema: {
+        action: z5.enum(["custom-css"]).describe(
+          "The styling operation to perform. Currently supports custom-css for AI-generated CSS styling."
+        ),
+        elementId: z5.string().describe(
+          "The ID of the Elementor element to apply custom styling to. This element will receive the generated CSS code."
+        ),
+        prompt: z5.string().describe(
+          "A detailed description of the desired styling. Include specific visual requirements, colors, effects, layout modifications, or any custom styling needs. The more detailed the prompt, the better the generated CSS will match your requirements."
+        )
+      },
+      annotations: {
+        title: "Apply Custom Styling"
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "custom-css":
+          return await handleCustomCss(params.elementId, params.prompt, server);
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleCustomCss(elementId, prompt, server) {
+  const container = getElementor()?.getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${elementId} not found.`);
+  }
+  const htmlMarkup = container.view?.el?.outerHTML || "";
+  const parseCSS = (css) => {
+    return css && css.replace(/`/g, "").replace(/^css\s*/i, "");
+  };
+  const samplingCssResult = await server.server.request(
+    {
+      method: "sampling/createMessage",
+      params: {
+        messages: [
+          {
+            role: "user",
+            content: {
+              type: "text",
+              text: prompt
+            }
+          }
+        ],
+        maxTokens: 1e3,
+        modelPreferences: {
+          hints: [
+            {
+              name: "elementor-css"
+            }
+          ]
+        },
+        metadata: {
+          element_id: elementId,
+          html_markup: htmlMarkup
+        }
+      }
+    },
+    SamplingMessageSchema
+  );
+  const content = samplingCssResult?.content;
+  const block = Array.isArray(content) ? content.find((b) => b.type === "text") : content;
+  const cssText = block?.type === "text" ? block.text : void 0;
+  if (!cssText) {
+    throw new Error("Failed to generate CSS: No text content received from API.");
+  }
+  const parsedCssString = parseCSS(cssText);
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify({
+          success: true,
+          message: "Custom CSS generated. The CSS needs to be applied through the editor.",
+          generatedCss: parsedCssString,
+          elementId
+        })
+      }
+    ]
+  };
+}
+
+// src/tools/ui-tool.ts
+import { z as z6 } from "@elementor/schema";
+function addUiTool(server) {
+  server.registerTool(
+    "ui",
+    {
+      description: "Manage Elementor editor UI operations. This tool provides control over editor interface actions including responsive preview modes and widget favorites. Use this when you need to: switch between device preview modes (desktop/tablet/mobile), manage favorite widgets, or paste previously copied content. Note: For undo/redo operations, use the page tool instead. The tool interacts directly with the Elementor editor UI and does not modify page content itself.",
+      inputSchema: {
+        action: z6.enum(["change-device-mode", "toggle-favorite", "ui-paste"]).describe(
+          "The UI operation to perform: change-device-mode (switch responsive preview), toggle-favorite (add/remove widget from favorites), ui-paste (paste clipboard content into an existing element)"
+        ),
+        deviceMode: z6.enum(["desktop", "tablet", "mobile"]).optional().describe("Required for change-device-mode. The device mode to switch to for responsive preview"),
+        widgetType: z6.string().optional().describe(
+          'Required for toggle-favorite. The widget type name (e.g., "heading", "button", "image") to add or remove from favorites'
+        ),
+        elementId: z6.string().optional().describe(
+          "Required for ui-paste. The ID of an existing container element where clipboard content should be pasted. Note: The element must exist and content must be in clipboard first"
+        )
+      },
+      annotations: {
+        title: "Manage UI"
+      }
+    },
+    async (params) => {
+      switch (params.action) {
+        case "change-device-mode":
+          return await handleChangeDeviceMode(params);
+        case "toggle-favorite":
+          return await handleToggleFavorite(params);
+        case "ui-paste":
+          return await handleUiPaste(params);
+        default:
+          throw new Error(`Unknown action: ${params.action}`);
+      }
+    }
+  );
+}
+async function handleChangeDeviceMode(params) {
+  if (!params.deviceMode) {
+    throw new Error("deviceMode is required for change-device-mode action");
+  }
+  get$e()?.run("panel/change-device-mode", {
+    device: params.deviceMode
+  });
+  return {
+    content: [{ type: "text", text: `Device mode changed to ${params.deviceMode}.` }]
+  };
+}
+async function handleToggleFavorite(params) {
+  if (!params.widgetType) {
+    throw new Error("widgetType is required for toggle-favorite action");
+  }
+  get$e()?.run("favorites/toggle", {
+    name: params.widgetType
+  });
+  return {
+    content: [{ type: "text", text: `Favorite status toggled for ${params.widgetType}.` }]
+  };
+}
+async function handleUiPaste(params) {
+  if (!params.elementId) {
+    throw new Error("elementId is required for ui-paste action");
+  }
+  const container = getElementor()?.getContainer(params.elementId);
+  if (!container) {
+    throw new Error(`Element with ID ${params.elementId} not found.`);
+  }
+  get$e()?.run("document/ui/paste", {
+    container
+  });
+  return {
+    content: [{ type: "text", text: `UI paste performed on element ${params.elementId}.` }]
+  };
+}
+
+// src/elementor-mcp-server.ts
+var SERVER_INSTRUCTIONS = `## Elementor Page Builder
+
+### Capabilities:
+**Page Management:**
+- Manage page settings, saving and routing pages
+- Control the editor UI, including switching between desktop, tablet, and mobile views
+
+**Global Styles:**
+- Work with global styles, helping manage shared design settings like colors and fonts across the site
+
+**AI-Powered Content Creation:**
+- Generate and edit text and insert it into the page
+- Generate images and place them on the canvas
+
+**Custom Styling & Code:**
+- Apply custom CSS to elements
+- Generate supported code snippets
+
+### Limitations:
+**Element Management (Not Supported):**
+- Cannot create or edit individual Elementor elements such as widgets or containers
+- Cannot build page layouts or create containers
+- Cannot modify widget-level settings
+- Cannot apply motion effects
+- Cannot reorder sections or perform detailed canvas-level edits
+- Cannot create fully designed or polished pages
+- Cannot fully resolve responsiveness issues
+- Support for these editor-level capabilities is planned for Editor V4
+
+**Theme Builder:**
+- Cannot create or manage Theme Builder templates, including headers, footers, single posts, archives, products, loop items, or 404 pages
+- Cannot set display conditions for templates
+- Cannot configure popup triggers and advanced rules
+
+**System Settings:**
+- Cannot change Elementor system-level settings
+- Cannot activate or work with Editor V4
+- Cannot manage form submissions
+- Cannot add custom fonts or icons
+- Cannot manage user roles
+- Cannot roll back Elementor versions
+- Cannot place the site in maintenance mode
+- Cannot export the website
+- Cannot apply full website templates
+
+**Code & Widgets:**
+- Cannot register PHP code or create new custom widgets, though Angie may provide guidance, code snippets, or plugin suggestions where helpful
+
+**Note**: While page names can include terms like "header" or "footer", these won't function as actual theme parts without Theme Builder access.
+
+**Important**: When users ask "What can Angie do?" or similar questions about Angie's general capabilities, use the \`what-can-angie-do\` tool from the knowledge MCP server instead of generating your own response.`;
+var VERSION = "2.0.0";
+async function createElementorServer() {
+  await waitForElementorEditor();
+  const server = new McpServer(
+    {
+      name: "elementor-server",
+      version: VERSION,
+      title: "Elementor"
+    },
+    {
+      instructions: SERVER_INSTRUCTIONS,
+      capabilities: {
+        resources: {
+          subscribe: true
+        }
+      }
+    }
+  );
+  addElementorResources(server);
+  addPageTool(server);
+  addUiTool(server);
+  addDynamicTool(server);
+  addRoutesTool(server);
+  addAiTool(server);
+  addStylingTool(server);
+  const sdk = getAngieSdk();
+  await sdk.waitForReady();
+  sdk.registerLocalServer({ server, version: VERSION, description: SERVER_INSTRUCTIONS, name: "Elementor" });
+  return server;
+}
+
+// src/init.ts
+function init() {
+  createElementorServer();
+}
+export {
+  RESOURCE_NAME_ELEMENT_SETTINGS,
+  RESOURCE_NAME_PAGE_OVERVIEW,
+  RESOURCE_NAME_PAGE_SETTINGS,
+  RESOURCE_NAME_WIDGET_CONFIG,
+  RESOURCE_URI_ELEMENT_SETTINGS_TEMPLATE,
+  RESOURCE_URI_PAGE_OVERVIEW,
+  RESOURCE_URI_PAGE_SETTINGS,
+  RESOURCE_URI_WIDGET_CONFIG_TEMPLATE,
+  createElementorServer,
+  init
+};
+//# sourceMappingURL=index.mjs.map