@elementor/editor-canvas 4.2.0-beta2 → 4.3.0-1000

package/src/mcp/resources/dynamic-tags-resource.ts

@@ -1,29 +1,24 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
-import { type PropType, Schema } from '@elementor/editor-props';
-
-import {
-	type AtomicDynamicTag,
-	getAtomicDynamicTags,
-	OMITTED_DYNAMIC_SETTING_KEYS,
-} from '../utils/resolve-dynamic-tag';
+import { type HttpResponse, httpService } from '@elementor/http-client';
 
 export const DYNAMIC_TAGS_URI = 'elementor://dynamic-tags';
 
-const settingsSchema = ( propsSchema: AtomicDynamicTag[ 'props_schema' ] ): Record< string, unknown > => {
-	return Object.fromEntries(
-		Object.entries( propsSchema ?? {} )
-			.filter( ( [ key ] ) => ! ( OMITTED_DYNAMIC_SETTING_KEYS as readonly string[] ).includes( key ) )
-			.map( ( [ key, propType ] ) => [ key, Schema.propTypeToJsonSchema( propType as PropType ) ] )
-	);
+const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
+
+type DynamicTagEntry = {
+	name: string;
+	label: string;
+	categories: string[];
+	settings: Record< string, unknown >;
 };
 
-const buildDynamicTagsList = () => {
-	return Object.values( getAtomicDynamicTags() ).map( ( tag ) => ( {
-		name: tag.name,
-		label: tag.label,
-		categories: tag.categories,
-		settings: settingsSchema( tag.props_schema ),
-	} ) );
+const fetchDynamicTags = async (): Promise< DynamicTagEntry[] > => {
+	const { data } = await httpService().post< HttpResponse< DynamicTagEntry[] > >( MCP_PROXY_URL, {
+		tool: 'list-dynamic-tags',
+		input: {},
+	} );
+
+	return data.data ?? [];
 };
 
 export const initDynamicTagsResource = ( reg: MCPRegistryEntry ) => {
@@ -39,14 +34,18 @@ export const initDynamicTagsResource = ( reg: MCPRegistryEntry ) => {
 				'name appears in that property\'s allowed list, and populate "settings" per the tag entry here.',
 			mimeType: 'application/json',
 		},
-		async ( uri: URL ) => ( {
-			contents: [
-				{
-					uri: uri.href,
-					mimeType: 'application/json',
-					text: JSON.stringify( buildDynamicTagsList() ),
-				},
-			],
-		} )
+		async ( uri: URL ) => {
+			const tags = await fetchDynamicTags();
+
+			return {
+				contents: [
+					{
+						uri: uri.href,
+						mimeType: 'application/json',
+						text: JSON.stringify( tags ),
+					},
+				],
+			};
+		}
 	);
 };

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

@@ -1,109 +1,51 @@
-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 { hasV3Controls, isWidgetAvailableForLLM } from '../utils/element-data-util';
-import { buildLlmGuidance, enrichPropertiesWithBaseSettingsHints } from './build-llm-guidance';
-
-const V3_LAYOUT_CONTROL_TYPES = new Set( [ 'section', 'tab', 'tabs' ] );
-
-type V3ControlMetadataEntry = {
-	default?: unknown;
-	type?: string;
-	options?: unknown;
-};
-
-function extractV3ControlsMetadata( controls: unknown ): Record< string, V3ControlMetadataEntry > {
-	if ( ! hasV3Controls( controls ) ) {
-		return {};
-	}
-	const result: Record< string, V3ControlMetadataEntry > = {};
-	for ( const [ controlKey, raw ] of Object.entries( controls as Record< string, unknown > ) ) {
-		if ( ! raw || typeof raw !== 'object' ) {
-			continue;
-		}
-		const control = raw as Record< string, unknown >;
-		const controlType = typeof control.type === 'string' ? control.type : undefined;
-		if ( controlType && V3_LAYOUT_CONTROL_TYPES.has( controlType ) ) {
-			continue;
-		}
-		const entry: V3ControlMetadataEntry = {};
-		if ( Object.prototype.hasOwnProperty.call( control, 'default' ) ) {
-			entry.default = control.default;
-		}
-		if ( controlType ) {
-			entry.type = controlType;
-		}
-		if ( Object.prototype.hasOwnProperty.call( control, 'options' ) && control.options !== undefined ) {
-			const options = control.options;
-			if ( options && typeof options === 'object' && ! Array.isArray( options ) ) {
-				entry.options = Object.keys( options as Record< string, unknown > );
-			} else {
-				entry.options = options;
-			}
-		}
-		result[ controlKey ] = entry;
-	}
-	return result;
-}
+import { type HttpResponse, httpService } from '@elementor/http-client';
 
 export const CANVAS_SERVER_NAME = 'editor-canvas';
 
 export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
 export const WIDGET_SCHEMA_FULL_URI = `${ CANVAS_SERVER_NAME }_${ WIDGET_SCHEMA_URI }`;
 export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
-export const BEST_PRACTICES_URI = 'elementor://styles/best-practices';
+export const BEST_PRACTICES_URI = 'elementor://style/best-practices';
 export const BEST_PRACTICES_FULL_URI = `${ CANVAS_SERVER_NAME }_${ BEST_PRACTICES_URI }`;
 
-export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
-	const { resource } = reg;
+const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
 
-	resource(
-		'styles-best-practices',
-		BEST_PRACTICES_URI,
-		{
-			description: 'Styling best practices',
-		},
-		async () => {
-			return {
-				contents: [
-					{
-						uri: BEST_PRACTICES_URI,
-						text: `# Styling best practices
-Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
-This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
+type WidgetSummary = {
+	type: string;
+	version: 'v3' | 'v4';
+	description?: string;
+};
 
-Styling is provided as raw CSS. The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
+const listWidgetTypes = async (): Promise< string[] > => {
+	const { data } = await httpService().post< HttpResponse< WidgetSummary[] > >( MCP_PROXY_URL, {
+		tool: 'list-widgets',
+		input: {},
+	} );
 
-** CRITICAL - VARIABLES **
-When using global variables, ensure that the variables are defined in the ${ 'elementor://global-variables' } resource.
-Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
+	return ( data.data ?? [] ).map( ( widget ) => widget.type );
+};
 
-`,
-					},
-				],
-			};
-		}
-	);
+const fetchWidgetSchema = async ( widgetType: string ): Promise< Record< string, unknown > > => {
+	const { data } = await httpService().post< HttpResponse< Record< string, unknown > > >( MCP_PROXY_URL, {
+		tool: 'get-widget-schema',
+		input: { widget_type: widgetType },
+	} );
+
+	return data.data ?? {};
+};
+
+export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
+	const { resource } = reg;
 
 	resource(
 		'widget-schema-by-type',
 		new ResourceTemplate( WIDGET_SCHEMA_URI, {
-			list: () => {
-				const cache = getWidgetsCache() || {};
-				const availableWidgets = Object.keys( cache ).filter( ( widgetType ) =>
-					isWidgetAvailableForLLM( cache[ widgetType ] )
-				);
+			list: async () => {
+				const widgetTypes = await listWidgetTypes();
 
 				return {
-					resources: availableWidgets.map( ( widgetType ) => ( {
+					resources: widgetTypes.map( ( widgetType ) => ( {
 						uri: `elementor://widgets/schema/${ widgetType }`,
 						name: 'Widget schema for ' + widgetType,
 					} ) ),
@@ -116,107 +58,22 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 		async ( uri, variables ) => {
 			const widgetType =
 				typeof variables.widgetType === 'string' ? variables.widgetType : variables.widgetType?.[ 0 ];
-			const widgetData = getWidgetsCache()?.[ widgetType ];
-			if ( ! widgetData ) {
-				throw new Error( `No prop schema found for element type: ${ widgetType }` );
-			}
-			const propSchema = widgetData.atomic_props_schema;
-			if ( ! propSchema ) {
-				if ( ! hasV3Controls( widgetData.controls ) ) {
-					throw new Error( `No prop schema found for element type: ${ widgetType }` );
-				}
-				const controlMetadata = extractV3ControlsMetadata( widgetData.controls );
-				return {
-					contents: [
-						{
-							uri: uri.toString(),
-							mimeType: 'application/json',
-							text: JSON.stringify( {
-								widget_version: 'v3',
-								message:
-									'This widget exists in the editor but has no atomic props schema (V4). Use control_metadata as non-authoritative hints from legacy controls.',
-								fields_note: 'All settings are optional; there is no JSON schema for this widget type.',
-								properties: controlMetadata,
-							} ),
-						},
-					],
-				};
-			}
-			const baseSettingsKeys = Object.keys( widgetData?.base_settings ?? {} );
-
-			const asJson = enrichPropertiesWithBaseSettingsHints(
-				Object.fromEntries(
-					Object.entries( propSchema )
-						.filter( ( [ key, propType ] ) => Schema.isPropKeyConfigurable( key, propType as PropType ) )
-						.map( ( [ key, propType ] ) => [ key, Schema.propTypeToJsonSchema( propType ) ] )
-				),
-				baseSettingsKeys
-			);
 
-			const description =
-				typeof widgetData?.meta?.description === 'string' ? widgetData.meta.description : undefined;
+			if ( ! widgetType ) {
+				throw new Error( 'No widget type provided.' );
+			}
 
-			const allWidgets = getWidgetsCache() || {};
-			const llmGuidance = buildLlmGuidance( widgetData, widgetType, allWidgets );
+			const schema = await fetchWidgetSchema( widgetType );
 
 			return {
 				contents: [
 					{
 						uri: uri.toString(),
 						mimeType: 'application/json',
-						text: JSON.stringify( {
-							type: 'object',
-							properties: asJson,
-							description,
-							llm_guidance: llmGuidance,
-						} ),
+						text: JSON.stringify( schema ),
 					},
 				],
 			};
 		}
 	);
 };
-
-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/tool.ts

@@ -1,244 +1,133 @@
-import { getCurrentDocument } from '@elementor/editor-documents';
-import {
-	createElement,
-	deleteElement,
-	getContainer,
-	getWidgetsCache,
-	type V1Element,
-	type V1ElementData,
-} from '@elementor/editor-elements';
+import { getCurrentDocument, reloadCurrentDocument } from '@elementor/editor-documents';
+import { getContainer, selectElement } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
-import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
-
-import { CompositionBuilder } from '../../../composition-builder/composition-builder';
-import { trackCanvasEvent } from '../../../utils/tracking';
-import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
-import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
-import { BEST_PRACTICES_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
-import { convertStyleBlocksToAtomic } from '../../utils/convert-css-to-atomic';
-import { isWidgetAvailableForLLM } from '../../utils/element-data-util';
-import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
-import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
-import { inputSchema as schema, outputSchema } from './schema';
-import { adaptLeafRootParams } from './xml-leaf-wrapper';
-
-export type ElementAddedEvent = {
-	element: V1ElementData;
-	executedBy: 'mcp_tool' | 'user';
+import { AxiosError, type HttpResponse, httpService } from '@elementor/http-client';
+import { z } from '@elementor/schema';
+
+const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
+
+type BuildCompositionResponse = {
+	success: boolean;
+	post_id: number;
+	root_element_ids: string[];
+	preview_url: string;
+	version: string;
+	resolved_xml: string;
+	llm_instructions: string;
+	warnings?: string[];
 };
 
-export const ELEMENT_ADDED_EVENT = 'elementor/canvas/element-added';
-
-export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool, resource } = reg;
+export const initBuildCompositionTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = 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',
+	addTool( {
+		name: 'build-composition',
+		description:
+			'Build a V4 element composition on the Elementor canvas via the server-side MCP ability. ' +
+			'Pass the raw XML tags directly as xmlStructure — do NOT wrap the value in <![CDATA[ ... ]]>, ' +
+			'code fences, or quotes. The document is saved as a draft. Reload the editor after calling ' +
+			'this tool to see the result.',
+		schema: {
+			xmlStructure: z
+				.string()
+				.describe(
+					'Valid XML structure with custom Elementor widget tags. Every element MUST have a unique ' +
+						'configuration-id attribute (e.g. <e-heading configuration-id="hero-title"></e-heading>). ' +
+						'No attributes, classes, IDs, or text nodes in XML. Pass raw XML — do not wrap in CDATA.'
+				),
+			elementConfig: z
+				.record(
+					z.string().describe( 'configuration-id' ),
+					z.record( z.string().describe( 'property name' ), z.any().describe( 'PropValue' ) )
+				)
+				.optional()
+				.describe( 'Map configuration-id → widget PropValues ($$type + value).' ),
+			style: z
+				.record(
+					z.string().describe( 'configuration-id' ),
+					z.record( z.string().describe( 'CSS property name' ), z.string().describe( 'CSS value' ) )
+				)
+				.optional()
+				.describe(
+					'Map configuration-id → raw CSS declarations (property → value strings; no selectors). ' +
+						'Server converts to native styles; unconvertible declarations become the element custom CSS.'
+				),
+			parentId: z
+				.string()
+				.optional()
+				.describe( "ID of the parent container. Omit or pass 'document' to insert at document root." ),
+			dryRun: z
+				.boolean()
+				.optional()
+				.describe( 'If true, validate and return the resolved tree without persisting.' ),
+		},
+		outputSchema: {
+			rootElementIds: z.array( z.string() ),
+			previewUrl: z.string(),
+			version: z.string(),
+			resolvedXml: z.string(),
+			llmInstructions: z.string(),
+			warnings: z.array( z.string() ).optional(),
 		},
-		async ( uri: URL ) => ( {
-			contents: [ { uri: uri.href, mimeType: 'text/plain', text: generatePrompt() } ],
-		} )
-	);
+		handler: async ( { xmlStructure, elementConfig, style, parentId, dryRun } ) => {
+			const document = getCurrentDocument();
 
-	addTool( {
-		name: 'build-compositions',
-		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: 'Global Classes', uri: 'elementor://global-classes' },
-			{ description: 'Global Variables', uri: 'elementor://global-variables' },
-			{ description: 'Styles best practices', uri: BEST_PRACTICES_URI },
-			{ description: 'Available widgets for this tool', uri: AVAILABLE_WIDGETS_URI_V4 },
-			{ description: 'Dynamic tags catalog', uri: DYNAMIC_TAGS_URI },
-		],
-		outputSchema,
-		handler: async ( rawParams ) => {
-			assertCompositionXmlUsesV4WidgetsOnly( rawParams.xmlStructure );
-			const { stylesConfig: convertedStyles, customCSS } = await convertCompositionStyles( rawParams.style );
-			const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams( {
-				...rawParams,
-				stylesConfig: convertedStyles,
-				widgetsCache: getWidgetsCache() ?? {},
-			} );
+			if ( ! document?.id ) {
+				throw new Error( 'No active document found.' );
+			}
 
-			let generatedXML: string = '';
-			const errors: Error[] = [];
-			const rootContainers: V1Element[] = [];
-			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
-			const currentDocument = getCurrentDocument();
-			const targetContainer = getCompositionTargetContainer( documentContainer, currentDocument?.type.value );
 			try {
-				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
-					createElement,
-					deleteElement,
-					getWidgetsCache,
+				const { data } = await httpService().post< HttpResponse< BuildCompositionResponse > >( MCP_PROXY_URL, {
+					tool: 'build-composition',
+					input: {
+						post_id: document.id,
+						xml_structure: xmlStructure,
+						element_config: elementConfig ?? {},
+						style: style ?? {},
+						parent_id: parentId ?? 'document',
+						dry_run: dryRun ?? false,
+					},
 				} );
-				compositionBuilder.setElementConfig( elementConfig );
-				compositionBuilder.setStylesConfig( stylesConfig );
-				compositionBuilder.setCustomCSS( customCSS );
-
-				const {
-					configErrors,
-					formErrors,
-					rootContainers: generatedRootContainers,
-				} = await compositionBuilder.build( targetContainer );
-
-				rootContainers.push( ...generatedRootContainers );
-				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
-				rootContainers.forEach( ( container ) => {
-					const elementData = container.model?.toJSON();
+				if ( ! dryRun ) {
+					await reloadCurrentDocument();
 
-					if ( elementData ) {
-						onElementAdded( elementData as V1ElementData );
+					const [ firstRootId ] = data.data.root_element_ids;
+					if ( firstRootId ) {
+						selectElement( firstRootId );
+						getContainer( firstRootId )?.view?.el?.scrollIntoView( {
+							behavior: 'smooth',
+							block: 'center',
+						} );
 					}
-				} );
-
-				Object.values( stylesConfig ).forEach( ( styleValue ) => {
-					dispatchMcpStylesAppliedEvent( { styleValue } );
-				} );
-
-				if ( configErrors.length ) {
-					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
 				}
 
-				if ( formErrors.length ) {
-					errors.push( ...formErrors.map( ( msg ) => new Error( msg ) ) );
-				}
+				return {
+					rootElementIds: data.data.root_element_ids,
+					previewUrl: data.data.preview_url,
+					version: data.data.version,
+					resolvedXml: data.data.resolved_xml,
+					llmInstructions: data.data.llm_instructions,
+					warnings: data.data.warnings,
+				};
 			} catch ( error ) {
-				errors.push( error as Error );
-			}
-
-			if ( errors.length ) {
-				rootContainers.forEach( ( rootContainer ) => {
-					deleteElement( {
-						container: rootContainer,
-						options: { useHistory: false },
-					} );
-				} );
-
-				const errorMessages = errors
-					.map( ( e ) => {
-						if ( typeof e === 'string' ) {
-							return e;
-						}
-						if ( e instanceof Error ) {
-							return e.message || String( e );
-						}
-
-						if ( typeof e === 'object' && e !== null ) {
-							return JSON.stringify( e );
-						}
-						return String( e );
-					} )
-					.filter(
-						( msg ) => msg && msg.trim() !== '' && msg !== '{}' && msg !== 'null' && msg !== 'undefined'
-					);
-
-				if ( errorMessages.length === 0 ) {
-					throw new Error(
-						'Failed to build composition: Unknown error occurred. No error details available.'
-					);
-				}
-
-				const errorText = `Failed to build composition with the following errors:\n\n${ errorMessages.join(
-					'\n\n'
-				) }`;
-				throw new Error( errorText );
+				throw new Error( getErrorMessage( error ) );
 			}
-			return {
-				xmlStructure: generatedXML,
-				errors: errors?.length
-					? errors.map( ( e ) => ( typeof e === 'string' ? e : e.message ) ).join( '\n\n' )
-					: undefined,
-				llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
-
-**CRITICAL NEXT STEPS** (Follow in order):
-1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
-   - Check the created element IDs in the returned XML
-   - Apply semantic classes (heading-primary, button-cta, etc.) to appropriate elements
-
-2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
-
-Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-`,
-			};
 		},
 	} );
 };
 
-async function convertCompositionStyles( style: Record< string, Record< string, string > > ) {
-	const stylesConfig: Record< string, Record< string, unknown > > = {};
-	const customCSS: Record< string, string > = {};
-
-	if ( ! style || Object.keys( style ).length === 0 ) {
-		return { stylesConfig, customCSS };
-	}
-
-	const results = await convertStyleBlocksToAtomic( style );
-
-	for ( const [ configId, { props, customCss } ] of Object.entries( results ) ) {
-		stylesConfig[ configId ] = props;
-		if ( customCss ) {
-			customCSS[ configId ] = customCss;
+function getErrorMessage( error: unknown ): string {
+	if ( error instanceof AxiosError ) {
+		const data = error.response?.data as { message?: string; code?: string } | undefined;
+		if ( data?.message ) {
+			return data.code ? `${ data.code }: ${ data.message }` : data.message;
 		}
 	}
 
-	return { stylesConfig, customCSS };
-}
-
-function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
-	const doc = new DOMParser().parseFromString( xmlStructure, 'application/xml' );
-	if ( doc.querySelector( 'parsererror' ) ) {
-		throw new Error( 'Failed to parse XML string: ' + doc );
+	if ( error instanceof Error ) {
+		return error.message;
 	}
-	const widgetsCache = getWidgetsCache() ?? {};
-	for ( const node of doc.querySelectorAll( '*' ) ) {
-		const type = node.tagName;
-		const widgetData = widgetsCache[ type ];
 
-		if ( ! widgetData ) {
-			continue;
-		}
-		if ( widgetData.elType !== 'widget' ) {
-			continue;
-		}
-		if ( ! isWidgetAvailableForLLM( widgetData ) || ! widgetData.atomic_props_schema ) {
-			throw new Error( `This tool does not support element type: ${ type }` );
-		}
-	}
-}
-
-function onElementAdded( element: V1ElementData ) {
-	const elType = element.elType ?? '';
-	const widgetType = element.widgetType ?? '';
-	const elementName = elType === 'widget' ? widgetType : elType;
-
-	trackCanvasEvent( {
-		eventName: 'add_element',
-		executed_by: 'mcp_tool',
-		element_name: elementName,
-		element_type: elType,
-		widget_type: widgetType,
-	} );
-
-	const event: ElementAddedEvent = {
-		element,
-		executedBy: 'mcp_tool',
-	};
-
-	window.dispatchEvent( new CustomEvent( ELEMENT_ADDED_EVENT, { detail: event } ) );
-
-	if ( element.elements?.length ) {
-		element.elements?.forEach( ( childElement ) => {
-			onElementAdded( childElement );
-		} );
-	}
+	return 'build-composition failed with an unknown error.';
 }