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

package/package.json

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

package/src/init.tsx

@@ -1,5 +1,6 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { init as initInteractionsRepository } from '@elementor/editor-interactions';
+import { getMCPByDomain } from '@elementor/editor-mcp';
 
 import { ClassesRename } from './components/classes-rename';
 import { ElementsOverlays } from './components/elements-overlays';
@@ -8,6 +9,8 @@ import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initCanvasMcp } from './mcp/canvas-mcp';
+import { mcpDescription } from './mcp/mcp-description';
 import { initLinkInLinkPrevention } from './prevent-link-in-link-commands';
 import { initStyleCommands } from './style-commands/init-style-commands';
 
@@ -42,4 +45,10 @@ export function init() {
 		id: 'classes-rename',
 		component: ClassesRename,
 	} );
+
+	initCanvasMcp(
+		getMCPByDomain( 'canvas', {
+			instructions: mcpDescription,
+		} )
+	);
 }

package/src/mcp/canvas-mcp.ts

@@ -0,0 +1,15 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+
+import { initWidgetsSchemaResource } from './resources/widgets-schema-resource';
+import { initBuildCompositionsTool } from './tools/build-composition/tool';
+import { initConfigureElementTool } from './tools/configure-element/tool';
+
+export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
+	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 );
+};

package/src/mcp/mcp-description.ts

@@ -0,0 +1,33 @@
+import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from './resources/widgets-schema-resource';
+
+export const 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 
+`;

package/src/mcp/resources/widgets-schema-resource.ts

@@ -0,0 +1,154 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { type MCPRegistryEntry, ResourceTemplate } from '@elementor/editor-mcp';
+import {
+	type ArrayPropType,
+	type ObjectPropType,
+	type PropType,
+	Schema,
+	type TransformablePropType,
+	type UnionPropType,
+} from '@elementor/editor-props';
+import { getStylesSchema } from '@elementor/editor-styles';
+
+export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
+export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
+
+export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
+	const { mcpServer } = reg;
+
+	mcpServer.resource(
+		'styles-schema',
+		new ResourceTemplate( STYLE_SCHEMA_URI, {
+			list: () => {
+				const categories = [ ...Object.keys( getStylesSchema() ), '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 = getStylesSchema()[ category ];
+			if ( ! stylesSchema ) {
+				throw new Error( `No styles schema found for category: ${ category }` );
+			}
+			const cleanedupPropSchema = cleanupPropType( stylesSchema );
+			const asJson = Schema.propTypeToJsonSchema( cleanedupPropSchema as PropType );
+			return {
+				contents: [
+					{
+						uri: uri.toString(),
+						text: JSON.stringify( asJson ),
+					},
+				],
+			};
+		}
+	);
+
+	mcpServer.resource(
+		'widget-schema-by-type',
+		new ResourceTemplate( WIDGET_SCHEMA_URI, {
+			list: () => {
+				const cache = getWidgetsCache() || {};
+				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 = getWidgetsCache()?.[ 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: Record< string, PropType > ): Record< string, PropType > {
+	const result: Record< string, Partial< PropType > > = {};
+	Object.keys( propSchema ).forEach( ( propName ) => {
+		result[ propName ] = cleanupPropType( propSchema[ propName ] );
+	} );
+	return result as Record< string, PropType >;
+}
+function cleanupPropType( propType: PropType & { key?: string } ): Partial< PropType > {
+	const result: Partial< PropType > = {};
+	Object.keys( propType ).forEach( ( property ) => {
+		switch ( property ) {
+			case 'key':
+			case 'kind':
+				( result as Record< string, unknown > )[ property ] = propType[ property ];
+				break;
+			case 'meta':
+			case 'settings':
+				{
+					if ( Object.keys( propType[ property ] || {} ).length > 0 ) {
+						( result as Record< string, unknown > )[ 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 as ArrayPropType ).item_prop_type ) as PropType;
+	} else if ( result.kind === 'object' ) {
+		const shape = ( propType as ObjectPropType ).shape as Record< string, PropType >;
+		const cleanedShape = cleanupPropSchema( shape );
+		result.shape = cleanedShape;
+	} else if ( result.kind === 'union' ) {
+		const propTypes = ( propType as UnionPropType ).prop_types;
+		const cleanedPropTypes: Record< string, Partial< PropType > > = {};
+		Object.keys( propTypes ).forEach( ( key ) => {
+			cleanedPropTypes[ key ] = cleanupPropType( propTypes[ key ] );
+		} );
+		result.prop_types = cleanedPropTypes as Record< string, TransformablePropType >;
+	}
+	return result;
+}

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

@@ -0,0 +1,119 @@
+import { toolPrompts } from '@elementor/editor-mcp';
+
+import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+
+const CUSTOM_CSS_URI = STYLE_SCHEMA_URI.replace( '{category}', 'custom_css' );
+
+export const 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();
+};

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

@@ -0,0 +1,27 @@
+import { z } from '@elementor/schema';
+
+export const 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( {} ),
+};
+
+export const 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(),
+};

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

@@ -0,0 +1,158 @@
+import {
+	createElement,
+	deleteElement,
+	generateElementId,
+	getContainer,
+	getWidgetsCache,
+	type V1Element,
+} from '@elementor/editor-elements';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropValue } from '@elementor/editor-props';
+
+import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { generatePrompt } from './prompt';
+import { inputSchema as schema, outputSchema } from './schema';
+
+export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: 'build-compositions',
+		description: generatePrompt(),
+		schema,
+		outputSchema,
+		handler: async ( params ) => {
+			let xml: Document | null = null;
+			const { xmlStructure, elementConfig, stylesConfig } = params;
+			const errors: Error[] = [];
+			const softErrors: Error[] = [];
+			const widgetsCache = getWidgetsCache() || {};
+			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			const rootContainer = createElement( {
+				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: Element, containerElement: V1Element ) => {
+					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
+						? createElement( {
+								containerId: containerElement.id,
+								model: {
+									elType: elementTag,
+									id: generateElementId(),
+								},
+								options: { useHistory: false },
+						  } )
+						: createElement( {
+								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 ) ) {
+							// validate property existance
+							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: propertyValue as unknown as PropValue,
+									elementType: elementTag,
+								} );
+							} catch ( error ) {
+								softErrors.push( error as 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 as Error );
+					}
+				}
+			} catch ( error ) {
+				errors.push( error as 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:\n\n
+${ 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.
+`,
+			};
+		},
+	} );
+};