@elementor/editor-canvas 3.33.0-271 → 3.33.0-272

package/dist/index.mjs

@@ -1,6 +1,7 @@
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { init as initInteractionsRepository } from "@elementor/editor-interactions";
+import { getMCPByDomain } from "@elementor/editor-mcp";
 
 // src/components/classes-rename.tsx
 import { useEffect } from "react";
@@ -1111,11 +1112,11 @@ function getVal2(val) {
 var transformOriginTransformer = createTransformer((value) => {
   const x = getVal2(value.x);
   const y = getVal2(value.y);
-  const z = getVal2(value.z);
-  if (x === DEFAULT_XY && y === DEFAULT_XY && z === DEFAULT_Z) {
+  const z3 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z3 === DEFAULT_Z) {
     return null;
   }
-  return `${x} ${y} ${z}`;
+  return `${x} ${y} ${z3}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -1457,6 +1458,740 @@ function initLegacyViews() {
   });
 }
 
+// src/mcp/resources/widgets-schema-resource.ts
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { ResourceTemplate } from "@elementor/editor-mcp";
+import {
+  Schema
+} from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
+var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
+var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
+var initWidgetsSchemaResource = (reg) => {
+  const { mcpServer } = reg;
+  mcpServer.resource(
+    "styles-schema",
+    new ResourceTemplate(STYLE_SCHEMA_URI, {
+      list: () => {
+        const categories = [...Object.keys(getStylesSchema2()), "custom_css"];
+        return {
+          resources: categories.map((category) => ({
+            uri: `elementor://styles/schema/${category}`,
+            name: "Style schema for " + category
+          }))
+        };
+      }
+    }),
+    {
+      description: "Common styles schema for the specified category"
+    },
+    async (uri, variables) => {
+      const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
+      if (category === "custom_css") {
+        return {
+          contents: [
+            {
+              uri: uri.toString(),
+              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted."
+            }
+          ]
+        };
+      }
+      const stylesSchema = getStylesSchema2()[category];
+      if (!stylesSchema) {
+        throw new Error(`No styles schema found for category: ${category}`);
+      }
+      const cleanedupPropSchema = cleanupPropType(stylesSchema);
+      const asJson = Schema.propTypeToJsonSchema(cleanedupPropSchema);
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            text: JSON.stringify(asJson)
+          }
+        ]
+      };
+    }
+  );
+  mcpServer.resource(
+    "widget-schema-by-type",
+    new ResourceTemplate(WIDGET_SCHEMA_URI, {
+      list: () => {
+        const cache = getWidgetsCache2() || {};
+        const availableWidgets = Object.keys(cache || {}).filter(
+          (widgetType) => cache[widgetType]?.atomic_props_schema
+        );
+        return {
+          resources: availableWidgets.map((widgetType) => ({
+            uri: `elementor://widgets/schema/${widgetType}`,
+            name: "Widget schema for " + widgetType
+          }))
+        };
+      }
+    }),
+    {
+      description: "PropType schema for the specified widget type"
+    },
+    async (uri, variables) => {
+      const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
+      const propSchema = getWidgetsCache2()?.[widgetType]?.atomic_props_schema;
+      if (!propSchema) {
+        throw new Error(`No prop schema found for element type: ${widgetType}`);
+      }
+      const cleanedupPropSchema = cleanupPropSchema(propSchema);
+      const asJson = Object.fromEntries(
+        Object.entries(cleanedupPropSchema).map(([key, propType]) => [
+          key,
+          Schema.propTypeToJsonSchema(propType)
+        ])
+      );
+      delete asJson.classes;
+      delete asJson._cssid;
+      delete asJson.attributes;
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            text: JSON.stringify(asJson)
+          }
+        ]
+      };
+    }
+  );
+};
+function cleanupPropSchema(propSchema) {
+  const result = {};
+  Object.keys(propSchema).forEach((propName) => {
+    result[propName] = cleanupPropType(propSchema[propName]);
+  });
+  return result;
+}
+function cleanupPropType(propType) {
+  const result = {};
+  Object.keys(propType).forEach((property) => {
+    switch (property) {
+      case "key":
+      case "kind":
+        result[property] = propType[property];
+        break;
+      case "meta":
+      case "settings":
+        {
+          if (Object.keys(propType[property] || {}).length > 0) {
+            result[property] = propType[property];
+          }
+        }
+        break;
+    }
+  });
+  if (result.kind === "plain") {
+    Object.defineProperty(result, "kind", { value: "string" });
+  } else if (result.kind === "array") {
+    result.item_prop_type = cleanupPropType(propType.item_prop_type);
+  } else if (result.kind === "object") {
+    const shape = propType.shape;
+    const cleanedShape = cleanupPropSchema(shape);
+    result.shape = cleanedShape;
+  } else if (result.kind === "union") {
+    const propTypes = propType.prop_types;
+    const cleanedPropTypes = {};
+    Object.keys(propTypes).forEach((key) => {
+      cleanedPropTypes[key] = cleanupPropType(propTypes[key]);
+    });
+    result.prop_types = cleanedPropTypes;
+  }
+  return result;
+}
+
+// src/mcp/tools/build-composition/tool.ts
+import {
+  createElement as createElement5,
+  deleteElement,
+  generateElementId,
+  getContainer,
+  getWidgetsCache as getWidgetsCache4
+} from "@elementor/editor-elements";
+
+// src/mcp/utils/do-update-element-property.ts
+import {
+  createElementStyle,
+  getElementStyles,
+  getWidgetsCache as getWidgetsCache3,
+  updateElementSettings,
+  updateElementStyle
+} from "@elementor/editor-elements";
+import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
+function resolvePropValue(value, forceKey) {
+  return Schema2.adjustLlmPropValueSchema(value, forceKey);
+}
+var doUpdateElementProperty = (params) => {
+  const { elementId, propertyName, propertyValue, elementType } = params;
+  if (propertyName === "_styles") {
+    const elementStyles = getElementStyles(elementId) || {};
+    const propertyMapValue = propertyValue;
+    const styleSchema = getStylesSchema3();
+    const transformedStyleValues = Object.fromEntries(
+      Object.entries(propertyMapValue).map(([key, val]) => {
+        if (key === "custom_css") {
+          return [key, val];
+        }
+        const { key: propKey, kind } = styleSchema?.[key] || {};
+        if (!propKey && kind !== "union") {
+          throw new Error(`_styles property ${key} is not supported.`);
+        }
+        return [key, resolvePropValue(val, propKey)];
+      })
+    );
+    let customCss;
+    Object.keys(propertyMapValue).forEach((stylePropName) => {
+      const propertyRawSchema = styleSchema[stylePropName];
+      if (stylePropName === "custom_css") {
+        customCss = {
+          raw: btoa(propertyMapValue[stylePropName])
+        };
+        return;
+      }
+      const isSupported = !!propertyRawSchema;
+      if (!isSupported) {
+        throw new Error(`_styles property ${stylePropName} is not supported.`);
+      }
+      if (propertyRawSchema.kind === "plain") {
+        if (typeof propertyMapValue[stylePropName] !== "object") {
+          const propUtil = getPropSchemaFromCache(propertyRawSchema.key);
+          if (propUtil) {
+            const plainValue = propUtil.create(propertyMapValue[stylePropName]);
+            propertyMapValue[stylePropName] = plainValue;
+          }
+        }
+      }
+    });
+    const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
+    if (!localStyle) {
+      createElementStyle({
+        elementId,
+        custom_css: customCss,
+        classesProp: "classes",
+        label: "local",
+        meta: {
+          breakpoint: "desktop",
+          state: null
+        },
+        props: {
+          ...transformedStyleValues
+        }
+      });
+    } else {
+      updateElementStyle({
+        elementId,
+        styleId: localStyle.id,
+        meta: {
+          breakpoint: "desktop",
+          state: null
+        },
+        props: {
+          ...transformedStyleValues
+        }
+      });
+    }
+    return;
+  }
+  const elementPropSchema = getWidgetsCache3()?.[elementType]?.atomic_props_schema;
+  if (!elementPropSchema) {
+    throw new Error(`No prop schema found for element type: ${elementType}`);
+  }
+  if (!elementPropSchema[propertyName]) {
+    const propertyNames = Object.keys(elementPropSchema);
+    throw new Error(
+      `Property "${propertyName}" does not exist on element type "${elementType}". Available properties are: ${propertyNames.join(
+        ", "
+      )}`
+    );
+  }
+  const value = resolvePropValue(propertyValue);
+  updateElementSettings({
+    id: elementId,
+    props: {
+      [propertyName]: value
+    },
+    withHistory: false
+  });
+};
+
+// src/mcp/tools/build-composition/prompt.ts
+import { toolPrompts } from "@elementor/editor-mcp";
+var CUSTOM_CSS_URI = STYLE_SCHEMA_URI.replace("{category}", "custom_css");
+var generatePrompt = () => {
+  const buildCompositionsToolPrompt = toolPrompts("build-compositions");
+  buildCompositionsToolPrompt.description(`
+Build entire elementor widget comositions representing complex structures of nested elements.
+
+# When to use this tool
+Always prefer this tool when the user requires to build a composition of elements, such as cards, heros, or inspired from other pages or HTML compositions.
+Prefer this tool over any other tool for building HTML structure, unless you are specified to use a different tool.
+
+# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+1. [${WIDGET_SCHEMA_URI}]
+   Required to understand which widgets are available, and what are their configuration schemas.
+   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
+2. [${CUSTOM_CSS_URI}]
+   Required to understand the styles schema for the widgets. All widgets share the same styles schema.
+   USE ONLY THE "custom_css" CATEGORY FROM THE STYLES SCHEMA FOR STYLING THE ELEMENTS with this tool.
+3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
+
+# Instructions
+1. Understand the user requirements carefully.
+2. Build a valid XML structure using only the allowed custom tags provided. For example, if you
+   use the "e-button" element, it would be represented as <e-button></e-button> in the XML structure.
+3. Plan the configuration for each element according to the user requirements, using the configuration schema provided for each custom tag.
+   Every widget type has it's own configuration schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
+   PropValues must follow the exact PropType schema provided in the resource.
+4. For every element, provide a "configuration-id" attribute. For example:
+   \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
+   In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
+   In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
+   For easy execution, USE ONLY "custom_css" category from the styles schema resource to apply styles.
+5. Ensure the XML structure is valid and parsable.
+6. Do not add any attribute nodes, classes, id's, and no text nodes allowed, for inline styles prefer USE the [${CUSTOM_CSS_URI}] resource for custom_css.
+7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
+8. Make sure that non-container elements do NOT have any nested elements.
+9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
+   In the case of doubt, prefer adding more styles to make the composition visually appealing.
+
+# Additional Guidelines
+- Most users expect the structure to be well designed and visually appealing.
+- Use layout properties, ensure "white space" design approach is followed, and make sure the composition is visually balanced.
+- Use appropriate spacing, alignment, and sizing to create a harmonious layout.
+- Consider the visual hierarchy of elements to guide the user's attention effectively.
+- You are encouraged to use colors, typography, and other style properties to enhance the visual appeal, as long as they are part of the configuration schema for the elements used.
+- Always aim for a clean and professional look that aligns with modern design principles.
+- When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
+- Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
+
+# CONSTRAINTS
+When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
+If a "$$type" is missing, update the invalid object, if the XML has parsing errors, fix it, etc. and RETRY.
+VALIDATE the XML structure before delivering it as the final result.
+VALIDATE the JSON structure used in the "configuration" attributes for each element before delivering the final result. The configuration must MATCH the PropValue schemas.
+NO LINKS ALLOWED. Never apply links to elements, even if they appear in the PropType schema.
+elementConfig values must align with the widget's PropType schema, available at the resource [${WIDGET_SCHEMA_URI}].
+stylesConfig values must align with the common styles PropType schema, available at the resource [${STYLE_SCHEMA_URI}].
+
+# Parameters
+All parameters are MANDATORY.
+- xmlStructure
+- elementConfig
+- stylesConfig
+
+If unsure about the configuration of a specific property, read the schema resources carefully.
+
+
+  `);
+  buildCompositionsToolPrompt.example(`
+A Heading and a button inside a flexbox
+{
+  xmlStructure: "<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading1"></e-heading><e-button configuration-id="button1"></e-button></e-flexbox>"
+  elementConfig: {
+    "flex1": {
+      "tag": {
+        "$$type": "string",
+        "value": "section"
+      },
+  },
+  styleConfig: {
+    "heading1": {
+      "custom_css": "font-size: 24px; color: #333;"
+    }
+  },
+}
+`);
+  buildCompositionsToolPrompt.parameter(
+    "xmlStructure",
+    `**MANDATORY** A valid XML structure representing the composition to be built, using custom elementor tags, styling and configuration PropValues.`
+  );
+  buildCompositionsToolPrompt.parameter(
+    "elementConfig",
+    `**MANDATORY** A record mapping configuration IDs to their corresponding configuration objects, defining the PropValues for each element created.`
+  );
+  buildCompositionsToolPrompt.parameter(
+    "styleConfig",
+    `**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
+  );
+  buildCompositionsToolPrompt.instruction(
+    `You will be provided the XML structure with element IDs. These IDs represent the actual elementor widgets created on the page/post.
+You should use these IDs as reference for further configuration, styling or changing elements later on.`
+  );
+  buildCompositionsToolPrompt.instruction(
+    `If you have global styles/classes available in the project, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+  );
+  return buildCompositionsToolPrompt.prompt();
+};
+
+// src/mcp/tools/build-composition/schema.ts
+import { z } from "@elementor/schema";
+var inputSchema = {
+  xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
+  elementConfig: z.record(
+    z.string().describe("The configuration id"),
+    z.record(z.string().describe("property name"), z.any().describe("The PropValue for the property"))
+  ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
+  stylesConfig: z.record(
+    z.string().describe("The configuration id"),
+    z.record(
+      z.string().describe("_styles property name"),
+      z.any().describe("The PropValue for the style property. MANDATORY")
+    )
+  ).describe("A record mapping element IDs to their styles configuration objects.").default({})
+};
+var outputSchema = {
+  errors: z.string().describe("Error message if the composition building failed").optional(),
+  xmlStructure: z.string().describe("The built XML structure as a string").optional(),
+  llmInstructions: z.string().describe("Instructions used to further actions for you").optional()
+};
+
+// src/mcp/tools/build-composition/tool.ts
+var initBuildCompositionsTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "build-compositions",
+    description: generatePrompt(),
+    schema: inputSchema,
+    outputSchema,
+    handler: async (params) => {
+      let xml = null;
+      const { xmlStructure, elementConfig, stylesConfig } = params;
+      const errors = [];
+      const softErrors = [];
+      const widgetsCache = getWidgetsCache4() || {};
+      const documentContainer = getContainer("document");
+      const rootContainer = createElement5({
+        containerId: documentContainer.id,
+        model: {
+          elType: "container",
+          id: generateElementId()
+        },
+        options: { useHistory: false }
+      });
+      try {
+        const parser = new DOMParser();
+        xml = parser.parseFromString(xmlStructure, "application/xml");
+        const errorNode = xml.querySelector("parsererror");
+        if (errorNode) {
+          throw new Error("Failed to parse XML structure: " + errorNode.textContent);
+        }
+        const children = Array.from(xml.children);
+        const iterate = (node, containerElement) => {
+          const elementTag = node.tagName;
+          if (!widgetsCache[elementTag]) {
+            errors.push(new Error(`Unknown widget type: ${elementTag}`));
+          }
+          const isContainer = elementTag === "e-flexbox" || elementTag === "e-div-block";
+          const newElement = isContainer ? createElement5({
+            containerId: containerElement.id,
+            model: {
+              elType: elementTag,
+              id: generateElementId()
+            },
+            options: { useHistory: false }
+          }) : createElement5({
+            containerId: containerElement.id,
+            model: {
+              elType: "widget",
+              widgetType: elementTag,
+              id: generateElementId()
+            },
+            options: { useHistory: false }
+          });
+          node.setAttribute("id", newElement.id);
+          const configId = node.getAttribute("configuration-id") || "";
+          try {
+            const configObject = elementConfig[configId] || {};
+            const styleObject = stylesConfig[configId] || {};
+            configObject._styles = styleObject;
+            for (const [propertyName, propertyValue] of Object.entries(configObject)) {
+              const widgetSchema = widgetsCache[elementTag];
+              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles") {
+                softErrors.push(
+                  new Error(
+                    `Property "${propertyName}" does not exist on element type "${elementTag}".`
+                  )
+                );
+                continue;
+              }
+              try {
+                doUpdateElementProperty({
+                  elementId: newElement.id,
+                  propertyName,
+                  propertyValue,
+                  elementType: elementTag
+                });
+              } catch (error) {
+                softErrors.push(error);
+              }
+            }
+            if (isContainer) {
+              for (const child of node.children) {
+                iterate(child, newElement);
+              }
+            } else {
+              node.innerHTML = "";
+              node.removeAttribute("configuration");
+            }
+          } finally {
+          }
+        };
+        for (const childNode of children) {
+          iterate(childNode, rootContainer);
+          try {
+          } catch (error) {
+            errors.push(error);
+          }
+        }
+      } catch (error) {
+        errors.push(error);
+      }
+      if (errors.length) {
+        deleteElement({
+          elementId: rootContainer.id,
+          options: { useHistory: false }
+        });
+      }
+      if (errors.length > 0) {
+        const errorText = `Failed to build composition with the following errors:
+
+
+${errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n")}
+"Missing $$type" errors indicate that the configuration objects are invalid. Try again and apply **ALL** object entries with correct $$type.
+Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check again the PropType schemas`;
+        throw new Error(errorText);
+      }
+      if (!xml) {
+        throw new Error("XML structure is null after parsing.");
+      }
+      return {
+        xmlStructure: new XMLSerializer().serializeToString(xml),
+        llmInstructions: (softErrors.length ? `The composition was built successfully, but there were some issues with the provided configurations:
+
+${softErrors.map((e) => `- ${e.message}`).join("\n")}
+
+Please use confiugure-element tool to fix these issues. Now that you have information about these issues, use the configure-element tool to fix them!` : "") + `
+Next Steps:
+- Use "apply-global-class" tool as there may be global styles ready to be applied to elements.
+- Use "configure-element" tool to further configure elements as needed, including styles.
+`
+      };
+    }
+  });
+};
+
+// src/mcp/tools/configure-element/prompt.ts
+var configureElementToolPrompt = `Configure an existing element on the page.
+
+# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+1. [${WIDGET_SCHEMA_URI}]
+   Required to understand which widgets are available, and what are their configuration schemas.
+   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
+2. [${STYLE_SCHEMA_URI}]
+   Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
+   Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+
+Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
+All widgets share a common _style property for styling, which uses the common styles schema.
+Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
+
+Unless specifically noted, attempt to use the _style property "custom_css" for any styling, read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
+
+# Parameters
+- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
+- elementId: The ID of the element to configure. MANDATORY
+- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
+
+# When to use this tool
+When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
+This tool handles elements of type "widget".
+This tool handles styling elements, using the _styles property in the configuration.
+
+The element's schema must be known before using this tool.
+
+Attached resource link describing how PropType schema should be parsed as PropValue for this tool.
+
+Read carefully the PropType Schema of the element and it's styles, then apply correct PropValue according to the schema.
+
+PropValue structure:
+{
+    "$$type": string, // MANDATORY as defined in the PropType schema under the "key" property
+    value: unknown // The value according to the PropType schema for kinds of "array", use array with PropValues items inside. For "object", read the shape property of the PropType schema. For "plain", use strings.
+}
+
+<IMPORTANT>
+ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring, and the common-styles schema for styling. If you are not sure, retreive the schema from the resources mentioned above.
+</IMPORTANT>
+
+You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
+Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
+Nested properties, such as for the _styles, should include a "_styles" property with object containing the definitions to change.
+
+Make sure you have the "widget-schema-by-type" resource available to retreive the PropType schema for the element type you are configuring.
+
+# How to configure elements
+We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
+For _styles, use the style schema provided, as it also uses the PropType format.
+For all non-primitive types, provide the key property as defined in the schema as $$type in the generated objecct, as it is MANDATORY for parsing.
+
+Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Example
+\`\`\`json
+{
+  propertiesToChange: {
+    title: {
+      $$type: 'string',
+      value: 'New Title Text'
+    },
+    border: {
+      $$type: 'boolean',
+      value: false
+    },
+    _styles: {
+      'line-height': {
+        $$type: 'size',
+        value: {
+          size: {
+            $$type: 'number',
+            value: 20
+          },
+          unit: {
+            $$type: 'string',
+            value: 'px'
+          }
+        }
+      }
+    }
+  }
+};
+\`\`\`
+
+<IMPORTANT>
+The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
+</IMPORTANT>
+`;
+
+// src/mcp/tools/configure-element/schema.ts
+import { z as z2 } from "@elementor/schema";
+var inputSchema2 = {
+  propertiesToChange: z2.record(
+    z2.string().describe(
+      "The property name. If nested property, provide the root property name, and the object delta only."
+    ),
+    z2.any().describe("The property's value")
+  ).describe("An object record containing property names and their new values to be set on the element").optional(),
+  elementType: z2.string().describe("The type of the element to retreive the schema"),
+  elementId: z2.string().describe("The unique id of the element to configure")
+};
+var outputSchema2 = {
+  success: z2.boolean().describe(
+    "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
+  )
+};
+
+// src/mcp/tools/configure-element/tool.ts
+var initConfigureElementTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "configure-element",
+    description: configureElementToolPrompt,
+    schema: inputSchema2,
+    outputSchema: outputSchema2,
+    handler: ({ elementId, propertiesToChange, elementType }) => {
+      if (!propertiesToChange) {
+        throw new Error(
+          "propertiesToChange is required to configure an element. Now that you have this information, ensure you have the schema and try again."
+        );
+      }
+      const toUpdate = Object.entries(propertiesToChange);
+      for (const [propertyName, propertyValue] of toUpdate) {
+        if (!propertyName && !elementId && !elementType) {
+          throw new Error(
+            "propertyName, elementId, elementType are required to configure an element. If you want to retreive the schema, use the get-element-configuration-schema tool."
+          );
+        }
+        try {
+          doUpdateElementProperty({
+            elementId,
+            elementType,
+            propertyName,
+            propertyValue
+          });
+        } catch (error) {
+          const errorMessage = createUpdateErrorMessage({
+            propertyName,
+            elementId,
+            elementType,
+            error
+          });
+          throw new Error(errorMessage);
+        }
+      }
+      return {
+        success: true
+      };
+    }
+  });
+};
+function createUpdateErrorMessage(opts) {
+  const { propertyName, elementId, elementType, error } = opts;
+  return `Failed to update property "${propertyName}" on element "${elementId}": ${error.message}.
+Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace(
+    "{widgetType}",
+    elementType
+  )}] for type "${elementType}" to ensure the property exists and the value matches the expected PropType.
+Now that you have this information, ensure you have the schema and try again.`;
+}
+
+// src/mcp/canvas-mcp.ts
+var initCanvasMcp = (reg) => {
+  const { setMCPDescription } = reg;
+  setMCPDescription(
+    'Everything related to creative design, layout, styling and building the pages, specifically element of type "widget"'
+  );
+  initWidgetsSchemaResource(reg);
+  initBuildCompositionsTool(reg);
+  initConfigureElementTool(reg);
+};
+
+// src/mcp/mcp-description.ts
+var mcpDescription = `Canvas MCP - Working with widgets and styles: how to use the PropType schemas and generate PropValue structures
+
+# Elementor's PropValue configuration system
+
+Every widget in Elementor has a set of properties that can be configured. These properties are defined using a strict schema, which specifies the type and structure of each property's value.
+All values are wrapped in a special structure called a "PropValue", which includes data and additional information about the type of the value.
+
+To correctly configure a widget's properties, you must follow the PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
+Every widget has it's own PropType schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
+ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
+The style schema is grouped by categories, such as "typography", "background", "border", etc.
+
+All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
+Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
+All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
+
+When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
+
+Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
+
+# Note about null values
+If a PropValue's value is null, omit the entire PropValue object.
+
+Example of "image" PropValue structure:
+
+PropValue structure:
+{$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
+
+Example of 
+`;
+
 // src/prevent-link-in-link-commands.ts
 import {
   getAnchoredAncestorId,
@@ -1553,17 +2288,17 @@ import {
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 import {
-  createElementStyle,
+  createElementStyle as createElementStyle2,
   deleteElementStyle,
-  getElementStyles,
-  updateElementStyle
+  getElementStyles as getElementStyles2,
+  updateElementStyle as updateElementStyle2
 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
-import { getElementLabel, getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { getElementLabel, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __2 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -1588,7 +2323,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache2();
+  const widgetsCache = getWidgetsCache5();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -1614,7 +2349,7 @@ var undoablePasteElementStyle = () => undoable(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = getElementStyles(container.id);
+        const originalStyles = getElementStyles2(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -1623,7 +2358,7 @@ var undoablePasteElementStyle = () => undoable(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            updateElementStyle({
+            updateElementStyle2({
               elementId,
               styleId,
               meta,
@@ -1634,7 +2369,7 @@ var undoablePasteElementStyle = () => undoable(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = createElementStyle({
+          revertData.styleId = createElementStyle2({
             elementId,
             classesProp,
             label: ELEMENTS_STYLES_RESERVED_LABEL,
@@ -1661,7 +2396,7 @@ var undoablePasteElementStyle = () => undoable(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        createElementStyle({
+        createElementStyle2({
           elementId: container.id,
           classesProp,
           label: ELEMENTS_STYLES_RESERVED_LABEL,
@@ -1717,7 +2452,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-import { createElementStyle as createElementStyle2, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles2 } from "@elementor/editor-elements";
+import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles3 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL as ELEMENTS_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
 import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
@@ -1726,7 +2461,7 @@ var undoableResetElementStyle = () => undoable2(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = getElementStyles2(elementId);
+        const containerStyles = getElementStyles3(elementId);
         Object.keys(containerStyles ?? {}).forEach(
           (styleId) => deleteElementStyle2(elementId, styleId)
         );
@@ -1744,7 +2479,7 @@ var undoableResetElementStyle = () => undoable2(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          createElementStyle2({
+          createElementStyle3({
             elementId,
             classesProp,
             styleId,
@@ -1813,6 +2548,11 @@ function init() {
     id: "classes-rename",
     component: ClassesRename
   });
+  initCanvasMcp(
+    getMCPByDomain("canvas", {
+      instructions: mcpDescription
+    })
+  );
 }
 
 // src/sync/drag-element-from-panel.ts