@elementor/editor-canvas 4.1.0-838 → 4.1.0-beta2

package/dist/index.mjs

@@ -64,6 +64,9 @@ function isWidgetAvailableForLLM(config) {
   if (config.meta?.llm_support === false) {
     return false;
   }
+  if (config.title === "Component") {
+    return false;
+  }
   if (config.atomic_props_schema) {
     return true;
   }
@@ -3853,7 +3856,7 @@ function getElementDisplayName(container) {
 import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
-  deleteElement,
+  deleteElement as deleteElement2,
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
 } from "@elementor/editor-elements";
@@ -3861,6 +3864,7 @@ import {
 // src/composition-builder/composition-builder.ts
 import {
   createElement as createElement7,
+  deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
   getWidgetsCache as getWidgetsCache8
@@ -3876,6 +3880,7 @@ import {
 } from "@elementor/editor-elements";
 import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
+import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
   return Schema2.adjustLlmPropValueSchema(value, {
@@ -3977,6 +3982,15 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
+  const { valid, jsonSchema } = Schema2.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  if (!valid) {
+    throw new Error(
+      `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
+        propertyValue
+      )}
+Expected Schema: ${jsonSchema}`
+    );
+  }
   updateElementSettings({
     id: elementId,
     props: {
@@ -3984,6 +3998,7 @@ var doUpdateElementProperty = (params) => {
     },
     withHistory: false
   });
+  runCommandSync2("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/utils/validate-input.ts
@@ -4079,6 +4094,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   api = {
     createElement: createElement7,
+    deleteElement,
     getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
     getContainer: getContainer4,
@@ -4129,7 +4145,8 @@ var CompositionBuilder = class _CompositionBuilder {
       elements: children,
       editor_settings: {
         title: node.getAttribute("configuration-id") ?? void 0
-      }
+      },
+      elType: "widget"
     };
     if (isWidget) {
       return { ...base, elType: "widget", widgetType: elementTag };
@@ -4161,12 +4178,6 @@ var CompositionBuilder = class _CompositionBuilder {
     }
     return errors;
   }
-  findSchemaForNode(node) {
-    const widgetsCache = this.api.getWidgetsCache() || {};
-    const widgetType = node.tagName;
-    const widgetData = widgetsCache[widgetType]?.atomic_props_schema;
-    return widgetData || null;
-  }
   matchNodeByConfigId(configId) {
     const node = this.xml.querySelector(`[configuration-id="${configId}"]`);
     if (!node) {
@@ -4288,13 +4299,24 @@ ${childTypeErrors.join("\n")}`);
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
-      const newElement = this.api.createElement({
-        container: rootContainer,
-        model: modelTree,
-        options: { useHistory: false }
-      });
-      this.rootContainers.push(newElement);
-      await this.awaitViewRender(newElement);
+      try {
+        const newElement = this.api.createElement({
+          container: rootContainer,
+          model: modelTree,
+          options: { useHistory: false }
+        });
+        this.rootContainers.push(newElement);
+        await this.awaitViewRender(newElement);
+      } catch (e) {
+        const attemptToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
+        if (attemptToRestoreInvalidContainer) {
+          this.api.deleteElement({
+            container: attemptToRestoreInvalidContainer,
+            options: { useHistory: false }
+          });
+        }
+        throw e;
+      }
     }
     const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
@@ -4318,6 +4340,7 @@ function getCompositionTargetContainer(documentContainer, documentType) {
 
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
+var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = toolPrompts("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -4499,12 +4522,25 @@ var outputSchema = {
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "build-compositions-guide",
+    BUILD_COMPOSITIONS_GUIDE_URI,
+    {
+      title: "Build Compositions Guide",
+      description: "Detailed guide for using the build-compositions tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
+    })
+  );
   addTool({
     name: "build-compositions",
-    description: generatePrompt(),
+    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
     schema: inputSchema,
     requiredResources: [
+      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Global Classes", uri: "elementor://global-classes" },
@@ -4528,35 +4564,44 @@ var initBuildCompositionsTool = (reg) => {
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
+          deleteElement: deleteElement2,
           getWidgetsCache: getWidgetsCache9
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
+        const {
+          invalidStyles,
+          configErrors,
+          rootContainers: generatedRootContainers
+        } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
-          const customCss = {
-            value: rawCssRules.join(";\n")
-          };
-          doUpdateElementProperty({
-            elementId,
-            propertyName: "_styles",
-            propertyValue: {
-              _styles: {
-                custom_css: customCss
-              }
-            },
-            elementType: "widget"
+        if (configErrors.length) {
+          errors.push(...configErrors.map((msg) => new Error(msg)));
+        } else {
+          Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
+            const customCss = {
+              value: rawCssRules.join(";\n")
+            };
+            doUpdateElementProperty({
+              elementId,
+              propertyName: "_styles",
+              propertyValue: {
+                _styles: {
+                  custom_css: customCss
+                }
+              },
+              elementType: "widget"
+            });
           });
-        });
+        }
       } catch (error) {
         errors.push(error);
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          deleteElement({
+          deleteElement2({
             container: rootContainer,
             options: { useHistory: false }
           });
@@ -4632,7 +4677,12 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 import { getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
 
 // src/mcp/tools/configure-element/prompt.ts
-var configureElementToolPrompt = `Configure an existing element on the page.
+import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
+var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
+var generatePrompt2 = () => {
+  const configureElementToolPrompt = toolPrompts2("configure-element");
+  configureElementToolPrompt.description(`
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
@@ -4647,12 +4697,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-# Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
-- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
-- 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".
@@ -4681,7 +4725,7 @@ You can use multiple property changes at once by providing multiple entries in t
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have to "styles-schema" resources available to retrieve the common styles schema.
+Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # 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.
@@ -4689,8 +4733,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, 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
+`);
+  configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
+  configureElementToolPrompt.parameter(
+    "elementType",
+    "The type of the element to configure (i.e. e-heading, e-button). MANDATORY."
+  );
+  configureElementToolPrompt.parameter(
+    "propertiesToChange",
+    "An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object."
+  );
+  configureElementToolPrompt.parameter(
+    "stylePropertiesToChange",
+    "An object containing the style properties to change, with their new values. OPTIONAL."
+  );
+  configureElementToolPrompt.example(`
 \`\`\`json
 {
   propertiesToChange: {
@@ -4706,7 +4763,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   },
   stylePropertiesToChange: {
     'line-height': {
-      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      $$type: 'size',
       value: {
         size: {
           $$type: 'number',
@@ -4723,11 +4780,20 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  configureElementToolPrompt.instruction(`
+V4 only: If MCP fails, give manual steps using V4 UI.
 
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+V4 Editor structure:
+Panel tabs: General (\u2192 Settings section: ID, Tag, Link), Style, Interactions.
+NO Advanced tab. Never mention Advanced tab.
+`);
+  return configureElementToolPrompt.prompt();
+};
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
 
 // src/mcp/tools/configure-element/schema.ts
 import { z as z2 } from "@elementor/schema";
@@ -4753,15 +4819,28 @@ var outputSchema2 = {
 
 // src/mcp/tools/configure-element/tool.ts
 var initConfigureElementTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "configure-element-guide",
+    CONFIGURE_ELEMENT_GUIDE_URI,
+    {
+      title: "Configure Element Guide",
+      description: "Detailed guide for using the configure-element tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+    })
+  );
   addTool({
     name: "configure-element",
-    description: configureElementToolPrompt,
+    description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
     schema: inputSchema2,
     outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI }
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
     ],
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }],
@@ -4959,15 +5038,6 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-  );
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5479,7 +5549,13 @@ function init() {
   });
   initCanvasMcp(
     getMCPByDomain("canvas", {
-      instructions: mcpDescription
+      instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+      docs: mcpDescription
     })
   );
   initTabsModelExtensions();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-838",
+  "version": "4.1.0-beta2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-838",
+    "@elementor/editor": "4.1.0-beta2",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-838",
-    "@elementor/editor-documents": "4.1.0-838",
-    "@elementor/editor-elements": "4.1.0-838",
-    "@elementor/editor-interactions": "4.1.0-838",
-    "@elementor/editor-mcp": "4.1.0-838",
-    "@elementor/editor-notifications": "4.1.0-838",
-    "@elementor/editor-props": "4.1.0-838",
-    "@elementor/editor-responsive": "4.1.0-838",
-    "@elementor/editor-styles": "4.1.0-838",
-    "@elementor/editor-styles-repository": "4.1.0-838",
-    "@elementor/editor-ui": "4.1.0-838",
-    "@elementor/editor-v1-adapters": "4.1.0-838",
-    "@elementor/schema": "4.1.0-838",
-    "@elementor/twing": "4.1.0-838",
+    "@elementor/editor-controls": "4.1.0-beta2",
+    "@elementor/editor-documents": "4.1.0-beta2",
+    "@elementor/editor-elements": "4.1.0-beta2",
+    "@elementor/editor-interactions": "4.1.0-beta2",
+    "@elementor/editor-mcp": "4.1.0-beta2",
+    "@elementor/editor-notifications": "4.1.0-beta2",
+    "@elementor/editor-props": "4.1.0-beta2",
+    "@elementor/editor-responsive": "4.1.0-beta2",
+    "@elementor/editor-styles": "4.1.0-beta2",
+    "@elementor/editor-styles-repository": "4.1.0-beta2",
+    "@elementor/editor-ui": "4.1.0-beta2",
+    "@elementor/editor-v1-adapters": "4.1.0-beta2",
+    "@elementor/schema": "4.1.0-beta2",
+    "@elementor/twing": "4.1.0-beta2",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-838",
-    "@elementor/wp-media": "4.1.0-838",
+    "@elementor/utils": "4.1.0-beta2",
+    "@elementor/wp-media": "4.1.0-beta2",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/composition-builder/composition-builder.ts

@@ -1,11 +1,13 @@
 import {
 	createElement,
 	type CreateElementParams,
+	deleteElement,
 	generateElementId,
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
 	type V1ElementConfig,
+	type V1ElementModelProps,
 } from '@elementor/editor-elements';
 import { type z } from '@elementor/schema';
 
@@ -17,6 +19,7 @@ type AnyConfig = Record< string, Record< string, AnyValue > >;
 
 type API = {
 	createElement: typeof createElement;
+	deleteElement: typeof deleteElement;
 	getWidgetsCache: typeof getWidgetsCache;
 	generateElementId: typeof generateElementId;
 	getContainer: typeof getContainer;
@@ -38,6 +41,7 @@ export class CompositionBuilder {
 	private rootContainers: V1Element[] = [];
 	private api: API = {
 		createElement,
+		deleteElement,
 		getWidgetsCache,
 		generateElementId,
 		getContainer,
@@ -94,15 +98,26 @@ export class CompositionBuilder {
 
 		node.setAttribute( 'id', id );
 
-		const base = {
+		const base: V1ElementModelProps = {
 			id,
 			skipDefaultChildren: true,
-			elements: children,
+			elements: children as V1ElementModelProps[ 'elements' ],
 			editor_settings: {
 				title: node.getAttribute( 'configuration-id' ) ?? undefined,
 			},
+			elType: 'widget',
 		};
 
+		// TODO: Restore this code once components are working in compositions
+		// if ( elementTag === 'e-component' ) {
+		// 	// apply component id before applying values
+		// 	const elementConfig = this.elementConfig[ String( node.getAttribute( 'configuration-id' ) ) ];
+		// 	if ( elementConfig ) {
+		// 		base.settings = base.settings || {};
+		// 		base.settings.component_instance = elementConfig.component_instance;
+		// 	}
+		// }
+
 		if ( isWidget ) {
 			return { ...base, elType: 'widget' as const, widgetType: elementTag };
 		}
@@ -142,13 +157,6 @@ export class CompositionBuilder {
 		return errors;
 	}
 
-	private findSchemaForNode( node: Element ) {
-		const widgetsCache = this.api.getWidgetsCache() || {};
-		const widgetType = node.tagName;
-		const widgetData = widgetsCache[ widgetType ]?.atomic_props_schema;
-		return widgetData || null;
-	}
-
 	private matchNodeByConfigId( configId: string ) {
 		const node = this.xml.querySelector( `[configuration-id="${ configId }"]` );
 		if ( ! node ) {
@@ -282,15 +290,24 @@ export class CompositionBuilder {
 		for ( const childNode of children ) {
 			const modelTree = this.buildModelTree( childNode, widgetsCache );
 
-			const newElement = this.api.createElement( {
-				container: rootContainer,
-				model: modelTree as CreateElementParams[ 'model' ],
-				options: { useHistory: false },
-			} );
-
-			this.rootContainers.push( newElement );
-
-			await this.awaitViewRender( newElement );
+			try {
+				const newElement = this.api.createElement( {
+					container: rootContainer,
+					model: modelTree as CreateElementParams[ 'model' ],
+					options: { useHistory: false },
+				} );
+				this.rootContainers.push( newElement );
+				await this.awaitViewRender( newElement );
+			} catch ( e: unknown ) {
+				const attemptToRestoreInvalidContainer = this.api.getContainer( modelTree.id as string );
+				if ( attemptToRestoreInvalidContainer ) {
+					this.api.deleteElement( {
+						container: attemptToRestoreInvalidContainer,
+						options: { useHistory: false },
+					} );
+				}
+				throw e;
+			}
 		}
 
 		const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();

package/src/init.tsx

@@ -53,7 +53,13 @@ export function init() {
 
 	initCanvasMcp(
 		getMCPByDomain( 'canvas', {
-			instructions: mcpDescription,
+			instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+			docs: mcpDescription,
 		} )
 	);
 

package/src/mcp/canvas-mcp.ts

@@ -12,15 +12,6 @@ import { initConfigureElementTool } from './tools/configure-element/tool';
 import { initGetElementConfigTool } from './tools/get-element-config/tool';
 
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
-	const { setMCPDescription } = reg;
-	setMCPDescription(
-		`Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-	);
 	initWidgetsSchemaResource( reg );
 	initAvailableWidgetsResource( reg );
 	initDocumentStructureResource( reg );

package/src/mcp/tools/build-composition/prompt.ts

@@ -2,6 +2,8 @@ import { toolPrompts } from '@elementor/editor-mcp';
 
 import { AVAILABLE_WIDGETS_URI } from '../../resources/available-widgets-resource';
 
+export const BUILD_COMPOSITIONS_GUIDE_URI = 'elementor://canvas/tools/build-compositions-guide';
+
 export const generatePrompt = () => {
 	const buildCompositionsToolPrompt = toolPrompts( 'build-compositions' );
 

package/src/mcp/tools/build-composition/tool.ts

@@ -13,17 +13,31 @@ import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-reso
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
-import { generatePrompt } from './prompt';
+import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
+	const { addTool, resource } = reg;
+
+	resource(
+		'build-compositions-guide',
+		BUILD_COMPOSITIONS_GUIDE_URI,
+		{
+			title: 'Build Compositions Guide',
+			description: 'Detailed guide for using the build-compositions tool',
+			mimeType: 'text/plain',
+		},
+		async ( uri: URL ) => ( {
+			contents: [ { uri: uri.href, mimeType: 'text/plain', text: generatePrompt() } ],
+		} )
+	);
 
 	addTool( {
 		name: 'build-compositions',
-		description: generatePrompt(),
+		description: 'Build V4 element compositions on the Elementor canvas. Read the guide resource before use.',
 		schema,
 		requiredResources: [
+			{ description: 'Build compositions guide', uri: BUILD_COMPOSITIONS_GUIDE_URI },
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
 			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
 			{ description: 'Global Classes', uri: 'elementor://global-classes' },
@@ -47,33 +61,41 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
+					deleteElement,
 					getWidgetsCache,
 				} );
 				compositionBuilder.setElementConfig( elementConfig );
 				compositionBuilder.setStylesConfig( stylesConfig );
 				compositionBuilder.setCustomCSS( customCSS );
 
-				const { invalidStyles, rootContainers: generatedRootContainers } =
-					await compositionBuilder.build( targetContainer );
+				const {
+					invalidStyles,
+					configErrors,
+					rootContainers: generatedRootContainers,
+				} = await compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
-				Object.entries( invalidStyles ).forEach( ( [ elementId, rawCssRules ] ) => {
-					const customCss = {
-						value: rawCssRules.join( ';\n' ),
-					};
-					doUpdateElementProperty( {
-						elementId,
-						propertyName: '_styles',
-						propertyValue: {
-							_styles: {
-								custom_css: customCss,
+				if ( configErrors.length ) {
+					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
+				} else {
+					Object.entries( invalidStyles ).forEach( ( [ elementId, rawCssRules ] ) => {
+						const customCss = {
+							value: rawCssRules.join( ';\n' ),
+						};
+						doUpdateElementProperty( {
+							elementId,
+							propertyName: '_styles',
+							propertyValue: {
+								_styles: {
+									custom_css: customCss,
+								},
 							},
-						},
-						elementType: 'widget',
+							elementType: 'widget',
+						} );
 					} );
-				} );
+				}
 			} catch ( error ) {
 				errors.push( error as Error );
 			}