@elementor/editor-canvas 4.2.0-840 → 4.2.0-842

package/dist/index.js

@@ -342,7 +342,7 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp4 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -4324,6 +4324,7 @@ function getCompositionTargetContainer(documentContainer, documentType) {
 
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
+var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -4505,12 +4506,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" },
@@ -4638,7 +4652,12 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/tools/configure-element/prompt.ts
-var configureElementToolPrompt = `Configure an existing element on the page.
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
+var generatePrompt2 = () => {
+  const configureElementToolPrompt = (0, import_editor_mcp3.toolPrompts)("configure-element");
+  configureElementToolPrompt.description(`
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
@@ -4653,12 +4672,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".
@@ -4687,7 +4700,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.
@@ -4695,8 +4708,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: {
@@ -4712,7 +4738,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',
@@ -4729,11 +4755,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
-
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  return configureElementToolPrompt.prompt();
+};
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
 
 // src/mcp/tools/configure-element/schema.ts
 var import_schema3 = require("@elementor/schema");
@@ -4759,15 +4787,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" }],
@@ -4965,15 +5006,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);
@@ -5467,8 +5499,14 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp3.getMCPByDomain)("canvas", {
-      instructions: mcpDescription
+    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
+      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/dist/index.mjs

@@ -4318,6 +4318,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 +4500,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" },
@@ -4632,7 +4646,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 +4666,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 +4694,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 +4702,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 +4732,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 +4749,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
-
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  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 +4781,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 +5000,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 +5511,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.2.0-840",
+  "version": "4.2.0-842",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-840",
+    "@elementor/editor": "4.2.0-842",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-840",
-    "@elementor/editor-documents": "4.2.0-840",
-    "@elementor/editor-elements": "4.2.0-840",
-    "@elementor/editor-interactions": "4.2.0-840",
-    "@elementor/editor-mcp": "4.2.0-840",
-    "@elementor/editor-notifications": "4.2.0-840",
-    "@elementor/editor-props": "4.2.0-840",
-    "@elementor/editor-responsive": "4.2.0-840",
-    "@elementor/editor-styles": "4.2.0-840",
-    "@elementor/editor-styles-repository": "4.2.0-840",
-    "@elementor/editor-ui": "4.2.0-840",
-    "@elementor/editor-v1-adapters": "4.2.0-840",
-    "@elementor/schema": "4.2.0-840",
-    "@elementor/twing": "4.2.0-840",
+    "@elementor/editor-controls": "4.2.0-842",
+    "@elementor/editor-documents": "4.2.0-842",
+    "@elementor/editor-elements": "4.2.0-842",
+    "@elementor/editor-interactions": "4.2.0-842",
+    "@elementor/editor-mcp": "4.2.0-842",
+    "@elementor/editor-notifications": "4.2.0-842",
+    "@elementor/editor-props": "4.2.0-842",
+    "@elementor/editor-responsive": "4.2.0-842",
+    "@elementor/editor-styles": "4.2.0-842",
+    "@elementor/editor-styles-repository": "4.2.0-842",
+    "@elementor/editor-ui": "4.2.0-842",
+    "@elementor/editor-v1-adapters": "4.2.0-842",
+    "@elementor/schema": "4.2.0-842",
+    "@elementor/twing": "4.2.0-842",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-840",
-    "@elementor/wp-media": "4.2.0-840",
+    "@elementor/utils": "4.2.0-842",
+    "@elementor/wp-media": "4.2.0-842",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

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' },

package/src/mcp/tools/configure-element/prompt.ts

@@ -1,6 +1,14 @@
+import { toolPrompts } from '@elementor/editor-mcp';
+
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
-export const configureElementToolPrompt = `Configure an existing element on the page.
+export const CONFIGURE_ELEMENT_GUIDE_URI = 'elementor://canvas/tools/configure-element-guide';
+
+export const generatePrompt = () => {
+	const configureElementToolPrompt = toolPrompts( 'configure-element' );
+
+	configureElementToolPrompt.description( `
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${ WIDGET_SCHEMA_URI }]
@@ -15,12 +23,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".
@@ -49,7 +51,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.
@@ -57,8 +59,26 @@ 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.
+` );
+
+	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.'
+	);
 
-# Example
+	configureElementToolPrompt.parameter(
+		'stylePropertiesToChange',
+		'An object containing the style properties to change, with their new values. OPTIONAL.'
+	);
+
+	configureElementToolPrompt.example( `
 \`\`\`json
 {
   propertiesToChange: {
@@ -74,7 +94,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',
@@ -91,8 +111,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
+` );
 
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+	configureElementToolPrompt.instruction(
+		'The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects.'
+	);
+
+	return configureElementToolPrompt.prompt();
+};
+
+export const CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt();

package/src/mcp/tools/configure-element/tool.ts

@@ -4,20 +4,34 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { validateInput } from '../../utils/validate-input';
-import { configureElementToolPrompt } from './prompt';
+import { CONFIGURE_ELEMENT_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
 export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
-	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: URL ) => ( {
+			contents: [ { uri: uri.href, mimeType: 'text/plain', text: generatePrompt() } ],
+		} )
+	);
 
 	addTool( {
 		name: 'configure-element',
-		description: configureElementToolPrompt,
+		description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
 		schema,
 		outputSchema,
 		requiredResources: [
 			{ description: 'Widgets schema', uri: WIDGET_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' } ],