@slicemachine/manager 0.24.4-alpha.xru-poc-ai.1 → 0.24.4-alpha.xru-slice-generation-ai-poc.1

package/src/managers/slices/SlicesManager.ts

@@ -1,4 +1,6 @@
+import fs from "node:fs";
 import * as t from "io-ts";
+import OpenAI from "openai";
 import * as prismicCustomTypesClient from "@prismicio/custom-types-client";
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 import { SliceComparator } from "@prismicio/types-internal/lib/customtypes/diff";
@@ -20,6 +22,8 @@ import {
 	SliceRenameHookData,
 	SliceUpdateHook,
 } from "@slicemachine/plugin-kit";
+import path from "node:path";
+import { ChatCompletionMessageParam } from "openai/resources";
 
 import { DecodeError } from "../../lib/DecodeError";
 import { assertPluginsInitialized } from "../../lib/assertPluginsInitialized";
@@ -212,15 +216,21 @@ type SliceMachineManagerConvertLegacySliceToSharedSliceReturnType = {
 };
 
 type SliceMachineManagerGenerateSliceArgs = {
-	userPrompt: string;
 	libraryID: string;
 	slice: SharedSlice;
-	imageFile?: Buffer;
+	imageFile: Uint8Array;
 };
 
 type SliceMachineManagerGenerateSliceReturnType = {
 	slice?: SharedSlice;
-	errors: (DecodeError | HookError)[];
+};
+
+type SliceMachineManagerGenerateSlicesFromUrlArgs = {
+	websiteUrl: string;
+};
+
+type SliceMachineManagerGenerateSlicesFromUrlReturnType = {
+	slices: SharedSlice[];
 };
 
 export class SlicesManager extends BaseManager {
@@ -341,6 +351,11 @@ export class SlicesManager extends BaseManager {
 	): Promise<OnlyHookErrors<CallHookReturnType<SliceCreateHook>>> {
 		assertPluginsInitialized(this.sliceMachinePluginRunner);
 
+		console.log(
+			`component code to create NOW for ${args.model.name}:`,
+			JSON.stringify(args),
+		);
+
 		const hookResult = await this.sliceMachinePluginRunner.callHook(
 			"slice:create",
 			args,
@@ -1132,720 +1147,1644 @@ export class SlicesManager extends BaseManager {
 	): Promise<SliceMachineManagerGenerateSliceReturnType> {
 		assertPluginsInitialized(this.sliceMachinePluginRunner);
 
-		const AWS_REGION = "us-east-1";
-		const AWS_ACCESS_KEY_ID = process.env.AWS_ACCESS_KEY_ID;
-		const AWS_SECRET_ACCESS_KEY = process.env.AWS_SECRET_ACCESS_KEY;
+		const INPUT_TOKEN_PRICE = 0.000003;
+		const OUTPUT_TOKEN_PRICE = 0.000015;
+
+		let totalTokens = {
+			modelGeneration: {
+				input: 0,
+				output: 0,
+				total: 0,
+				price: 0,
+			},
+			mocksGeneration: {
+				input: 0,
+				output: 0,
+				total: 0,
+				price: 0,
+			},
+			codeGeneration: {
+				input: 0,
+				output: 0,
+				total: 0,
+				price: 0,
+			},
+		};
 
+		// Validate AWS credentials
+		const AWS_REGION = "us-east-1";
+		const { AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY } = process.env;
 		if (!AWS_ACCESS_KEY_ID || !AWS_SECRET_ACCESS_KEY) {
 			throw new Error("AWS credentials are not set.");
 		}
 
-		// Initialize AWS Bedrock client
-		const bedrockClient = new BedrockRuntimeClient({
-			region: AWS_REGION,
-			credentials: {
-				accessKeyId: AWS_ACCESS_KEY_ID,
-				secretAccessKey: AWS_SECRET_ACCESS_KEY,
-			},
-		});
-
 		/**
-		 * Generates the JSON schema for the SharedSlice TypeScript type.
+		 * TypeScript schema for the Shared Slice definition.
 		 */
-		const getSharedSliceSchema = (): string => {
-			return `
-
-			/**
-			 * Represents a Prismic Slice.
-			 * @property {string} type - Should always be "SharedSlice".
-			 * @property {string} id - Unique identifier for the slice in snake_case.
-			 * @property {string} name - Human-readable name in PascalCase.
-			 * @property {string} description - Brief explanation of the slice's purpose.
-			 * @property {SliceVariation[]} variations - Array of variations for the slice.
-			 */
-			type PrismicSlice = {
-			  type: "SharedSlice";
-			  id: string;
-			  name: string;
-			  description: string;
-			  variations: SliceVariation[];
-			};
-			
-			/**
-			 * Represents a variation of a Prismic Slice.
-			 * @property {string} id - Unique identifier for the variation in snake_case.
-			 * @property {string} name - Human-readable name in PascalCase.
-			 * @property {string} description - Brief explanation of the variation's purpose.
-			 * @property {string} docURL - Legacy property, required with an empty string.
-			 * @property {string} version - Legacy property, required with the name property value.
-			 * @property {Record<string, PrismicField>} [primary] - Primary fields defining the main content of the slice.
-			 */
-			type SliceVariation = {
-			  id: string;
-			  name: string;
-			  description: string;
-			  primary: Record<string, PrismicField>;
-			  docURL: string;
-			  version: string;
-			};
-			
-			/**
-			 * Union type representing all possible Prismic fields.
-			 */
-			type PrismicField =
-			  | UIDField
-			  | BooleanField
-			  | ColorField
-			  | DateField
-			  | TimestampField
-			  | NumberField
-			  | KeyTextField
-			  | SelectField
-			  | StructuredTextField
-			  | ImageField
-			  | LinkField
-			  | GeoPointField
-			  | EmbedField
-			  | GroupField;
-			
-			/**
-			 * Represents a UID Field in Prismic.
-			 * @property {"UID"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {string} [config.placeholder] - Placeholder text.
-			 * @property {string} [config.customregex] - Custom regex for validation.
-			 * @property {string} [config.errorMessage] - Error message for invalid input.
-			 */
-			type UIDField = {
-			  type: "UID";
-			  config: {
-				label: string;
-				placeholder?: string;
-				customregex?: string;
-				errorMessage?: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Boolean Field in Prismic.
-			 * @property {"Boolean"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {boolean} [config.default_value] - Default value (true or false).
-			 */
-			type BooleanField = {
-			  type: "Boolean";
-			  config: {
-				label: string;
-				default_value?: boolean;
-			  };
-			};
-			
-			/**
-			 * Represents a Color Field in Prismic.
-			 * @property {"Color"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 */
-			type ColorField = {
-			  type: "Color";
-			  config: {
-				label: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Date Field in Prismic.
-			 * @property {"Date"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 */
-			type DateField = {
-			  type: "Date";
-			  config: {
-				label: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Timestamp Field in Prismic.
-			 * @property {"Timestamp"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 */
-			type TimestampField = {
-			  type: "Timestamp";
-			  config: {
-				label: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Number Field in Prismic.
-			 * @property {"Number"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {string} [config.placeholder] - Placeholder text.
-			 * @property {number} [config.min] - Minimum allowable value.
-			 * @property {number} [config.max] - Maximum allowable value.
-			 */
-			type NumberField = {
-			  type: "Number";
-			  config: {
-				label: string;
-				placeholder?: string;
-				min?: number;
-				max?: number;
-			  };
-			};
-			
-			/**
-			 * Represents a Key Text Field in Prismic.
-			 * @property {"Text"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {string} [config.placeholder] - Placeholder text.
-			 */
-			type KeyTextField = {
-			  type: "Text";
-			  config: {
-				label: string;
-				placeholder?: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Select Field in Prismic.
-			 * @property {"Select"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {string[]} config.options - Array of options for the select dropdown.
-			 */
-			type SelectField = {
-			  type: "Select";
-			  config: {
-				label: string;
-				options: string[];
-			  };
-			};
-			
-			/**
-			 * Represents a Structured Text Field in Prismic.
-			 * @property {"StructuredText"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {string} [config.placeholder] - Placeholder text.
-			 * @property {string} [config.single] - A comma-separated list of formatting options that does not allow line breaks. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
-			 * @property {string} [config.multi] - A comma-separated list of formatting options, with paragraph breaks allowed. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
-			 * @property {boolean} [config.allowTargetBlank] - Allows links to open in a new tab.
-			 * @property {string[]} [config.labels] - An array of strings to define labels for custom formatting.
-			 * @property {ImageConstraint} [config.imageConstraint] - Constraints for images within the rich text field.
-			 */
-			type StructuredTextField = {
-			  type: "StructuredText";
-			  config: {
-				label: string;
-				placeholder?: string;
-				single?: string;
-				multi?: string;
-				allowTargetBlank?: boolean;
-				labels?: string[];
-				imageConstraint?: ImageConstraint;
-			  };
-			};
-			
-			/**
-			 * Represents constraints for images within a rich text field.
-			 * @property {number} [width] - Width constraint in pixels.
-			 * @property {number
-			 * @property {number} [height] - Height constraint in pixels.
-			 */
-			type ImageConstraint = {
-			  width?: number;
-			  height?: number;
-			};
-			
-			/**
-			 * Represents an Image Field in Prismic.
-			 * @property {"Image"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {Object} [config.constraint] - Constraints for the image dimensions.
-			 * @property {number} [config.constraint.width] - Width constraint.
-			 * @property {number} [config.constraint.height] - Height constraint.
-			 * @property {Thumbnail[]} [config.thumbnails] - Array of thumbnail configurations.
-			 */
-			type ImageField = {
-			  type: "Image";
-			  config: {
-				label: string;
-				constraint?: {
-				  width?: number;
-				  height?: number;
-				};
-				thumbnails?: Thumbnail[];
-			  };
-			};
-			
-			/**
-			 * Represents a Thumbnail configuration for an Image field.
-			 * @property {string} name - Name of the thumbnail.
-			 * @property {number} [width] - Width of the thumbnail in pixels.
-			 * @property {number} [height] - Height of the thumbnail in pixels.
-			 */
-			type Thumbnail = {
-			  name: string;
-			  width?: number;
-			  height?: number;
-			};
-			
-			/**
-			 * Represents a Link Field in Prismic.
-			 * @property {"Link"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {"web" | "document" | "media"} config.select - Defines the type of link allowed.
-			 * @property {string[]} [config.customtypes] - Defines which Prismic document types are allowed if select is "document".
-			 */
-			type LinkField = {
-			  type: "Link";
-			  config: {
-				label: string;
-				select: "web" | "document" | "media";
-				customtypes?: string[];
-				allowText: boolean;
-			  };
-			};
-			
-			/**
-			 * Represents an Embed Field in Prismic.
-			 * @property {"Embed"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 */
-			type EmbedField = {
-			  type: "Embed";
-			  config: {
-				label: string;
-			  };
-			};
-			
-			/**
-			 * Represents a GeoPoint Field in Prismic.
-			 * @property {"GeoPoint"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 */
-			type GeoPointField = {
-			  type: "GeoPoint";
-			  config: {
-				label: string;
-			  };
-			};
-			
-			/**
-			 * Represents a Group Field (Repeatable Fields) in Prismic.
-			 * @property {"Group"} type - Field type.
-			 * @property {Object} config - Configuration object.
-			 * @property {string} config.label - Label displayed in the editor.
-			 * @property {Record<string, PrismicField>} config.fields - Defines the fields inside the group.
-			 */
-			type GroupField = {
-			  type: "Group";
-			  config: {
-				label: string;
-				fields: Record<string, PrismicField>;
-			  };
-			};
-`;
+		const SHARED_SLICE_SCHEMA = `
+/**
+ * Represents a Prismic Slice.
+ * @property {string} type - Should always be "SharedSlice".
+ * @property {string} id - Unique identifier for the slice in snake_case.
+ * @property {string} name - Human-readable name in PascalCase.
+ * @property {string} description - Brief explanation of the slice's purpose.
+ * @property {SliceVariation[]} variations - Array of variations for the slice.
+ */
+type PrismicSlice = {
+  type: "SharedSlice";
+  id: string;
+  name: string;
+  description: string;
+  variations: SliceVariation[];
+};
+
+/**
+ * Represents a variation of a Prismic Slice.
+ */
+type SliceVariation = {
+  id: string;
+  name: string;
+  description: string;
+  primary: Record<string, PrismicField>;
+  docURL: string;
+  version: string;
+};
+
+/**
+ * Union type representing all possible Prismic fields.
+ */
+type PrismicField =
+  | UIDField
+  | BooleanField
+  | ColorField
+  | DateField
+  | TimestampField
+  | NumberField
+  | KeyTextField
+  | SelectField
+  | StructuredTextField
+  | ImageField
+  | LinkField
+  | GeoPointField
+  | EmbedField
+  | GroupField;
+
+/* Definitions for each field type follow... */
+
+/**
+ * Represents a UID Field in Prismic.
+ * @property {"UID"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {string} [config.customregex] - Custom regex for validation.
+ * @property {string} [config.errorMessage] - Error message for invalid input.
+ */
+type UIDField = {
+	type: "UID";
+	config: {
+		label: string;
+		placeholder?: string;
+		customregex?: string;
+		errorMessage?: string;
+	};
+};
+
+/**
+ * Represents a Boolean Field in Prismic.
+ * @property {"Boolean"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {boolean} [config.default_value] - Default value (true or false).
+ */
+type BooleanField = {
+	type: "Boolean";
+	config: {
+		label: string;
+		default_value?: boolean;
+	};
+};
+
+/**
+ * Represents a Color Field in Prismic.
+ * @property {"Color"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type ColorField = {
+	type: "Color";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Date Field in Prismic.
+ * @property {"Date"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type DateField = {
+	type: "Date";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Timestamp Field in Prismic.
+ * @property {"Timestamp"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type TimestampField = {
+	type: "Timestamp";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Number Field in Prismic.
+ * @property {"Number"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {number} [config.min] - Minimum allowable value.
+ * @property {number} [config.max] - Maximum allowable value.
+ */
+type NumberField = {
+	type: "Number";
+	config: {
+		label: string;
+		placeholder?: string;
+		min?: number;
+		max?: number;
+	};
+};
+
+/**
+ * Represents a Key Text Field in Prismic.
+ * @property {"Text"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ */
+type KeyTextField = {
+	type: "Text";
+	config: {
+		label: string;
+		placeholder?: string;
+	};
+};
+
+/**
+ * Represents a Select Field in Prismic.
+ * @property {"Select"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string[]} config.options - Array of options for the select dropdown.
+ */
+type SelectField = {
+	type: "Select";
+	config: {
+		label: string;
+		options: string[];
+	};
+};
+
+/**
+ * Represents a Structured Text Field in Prismic.
+ * @property {"StructuredText"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {string} [config.single] - A comma-separated list of formatting options that does not allow line breaks. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+ * @property {string} [config.multi] - A comma-separated list of formatting options, with paragraph breaks allowed. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+ * @property {boolean} [config.allowTargetBlank] - Allows links to open in a new tab.
+ * @property {string[]} [config.labels] - An array of strings to define labels for custom formatting.
+ * @property {ImageConstraint} [config.imageConstraint] - Constraints for images within the rich text field.
+ */
+type StructuredTextField = {
+	type: "StructuredText";
+	config: {
+		label: string;
+		placeholder?: string;
+		single?: string;
+		multi?: string;
+		allowTargetBlank?: boolean;
+		labels?: string[];
+		imageConstraint?: ImageConstraint;
+	};
+};
+
+/**
+ * Represents constraints for images within a rich text field.
+ * @property {number} [width] - Width constraint in pixels.
+ * @property {number
+ * @property {number} [height] - Height constraint in pixels.
+ */
+type ImageConstraint = {
+	width?: number;
+	height?: number;
+};
+
+/**
+ * Represents an Image Field in Prismic.
+ * @property {"Image"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {Object} [config.constraint] - Constraints for the image dimensions.
+ * @property {number} [config.constraint.width] - Width constraint.
+ * @property {number} [config.constraint.height] - Height constraint.
+ * @property {Thumbnail[]} [config.thumbnails] - Array of thumbnail configurations.
+ */
+type ImageField = {
+	type: "Image";
+	config: {
+		label: string;
+		constraint?: {
+			width?: number;
+			height?: number;
 		};
+		thumbnails?: Thumbnail[];
+	};
+};
+
+/**
+ * Represents a Thumbnail configuration for an Image field.
+ * @property {string} name - Name of the thumbnail.
+ * @property {number} [width] - Width of the thumbnail in pixels.
+ * @property {number} [height] - Height of the thumbnail in pixels.
+ */
+type Thumbnail = {
+	name: string;
+	width?: number;
+	height?: number;
+};
+
+/**
+ * Represents a Link Field in Prismic.
+ * @property {"Link"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+* @property {boolean} config.allowText - Enable the text field for the link.
+ */
+type LinkField = {
+	type: "Link";
+	config: {
+		label: string;
+		allowText: boolean;
+	};
+};
+
+/**
+ * Represents an Embed Field in Prismic.
+ * @property {"Embed"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type EmbedField = {
+	type: "Embed";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a GeoPoint Field in Prismic.
+ * @property {"GeoPoint"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type GeoPointField = {
+	type: "GeoPoint";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Group Field (Repeatable Fields) in Prismic.
+ * @property {"Group"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {Record<string, PrismicField>} config.fields - Defines the fields inside the group.
+ */
+type GroupField = {
+	type: "Group";
+	config: {
+		label: string;
+		fields: Record<string, PrismicField>;
+	};
+};
+`;
 
 		/**
-		 * Builds the system prompt message using the generated TypeScript schema.
+		 * Calls the AI to generate the slice model.
 		 */
-		const buildSystemMessage = (
-			schema: string,
+		async function generateSliceModel(
+			client: BedrockRuntimeClient,
 			existingSlice: SharedSlice,
-		): string => {
-			return `
-You are a world-class expert in creating Prismic Custom Type models for slices.
-Your task is to generate a valid Prismic JSON model based solely on the provided description and the TypeScript schema below.
-The JSON model must adhere strictly to these rules:
-1. Include all necessary fields as described.
-2. Use the "primary" object for all main content fields.
-3. Do NOT use an "items" field. If a field represents a collection, it must be defined inside a Group field within the "primary" object.
-4. Ensure that each field has appropriate placeholders, labels, and configurations.
-5. If the existing slices contain fields, ensure to understand the user prompt to update the existing slice instead of creating something from scratch.
-6. If you detect the user wants to add a variation, always ensure the new variation is not exactly the same as another existing one
-7. Always return the full valid slice, as given in existing it should be returned in a valid format.
-8. If you detect the user prompt is about creating a totally different slice, do it and discard what was given in the existing slice, BUT only if you detect if nothing related.
-9. NEVER generate a Link / Button text field, ONLY the Link / Button field itself is enough. So ONE field just for the Link / Button. ENABLE "allowText" when doing that.
-10. AND THE MOST ULTRA IMPORTANT THING! Output ONLY a valid JSON object without any additional commentary or formatting! ONLY JSON, I need to parse it after with JSON.parse!
-
-### TypeScript Schema for reference:
-${schema}
-
-### Existing slice
-${JSON.stringify(existingSlice)}
-`.trim();
-		};
+			imageFile: Uint8Array,
+		): Promise<SharedSlice> {
+			const systemPrompt = `
+				You are an expert in Prismic content modeling. Using the image provided, generate a valid Prismic JSON model for the slice described below. Follow these rules precisely:
+				- Use the TypeScript schema provided as your reference.
+				- Place all main content fields under the "primary" object.
+				- Do not create any collections or groups for single-image content (background images should be a single image field).
+				- Ensure that each field has appropriate placeholders, labels, and configurations.
+				- Never generate a Link / Button text field, only the Link / Button field itself is enough. Just enable "allowText" when doing that.
+				- Do not forget any field visible from the image provide in the user prompt.
+				- Ensure to differentiate Prismic fields from just an image with visual inside the image. When that's the case, just add a Prismic image field.
+				- Do not include any decorative fields.
+				- Do not include any extra commentary or formatting.
+	
+				!IMPORTANT!: 
+					- Only return a valid JSON object representing the full slice model, nothing else before. JSON.parse on your response should not throw an error.
+					- All your response should fit in a single return response.
+
+				Reference Schema:
+				${SHARED_SLICE_SCHEMA}
+				
+				Existing Slice:
+				${JSON.stringify(existingSlice)}
+			`.trim();
+			const command = new ConverseCommand({
+				modelId: "us.anthropic.claude-3-5-sonnet-20241022-v2:0",
+				system: [{ text: systemPrompt }],
+				messages: [
+					{
+						role: "user",
+						content: [
+							{
+								image: { format: "png", source: { bytes: imageFile } },
+							},
+						],
+					},
+				],
+			});
+
+			const response = await client.send(command);
+			console.log("Generated model response:", JSON.stringify(response));
+
+			if (
+				!response.usage ||
+				!response.usage.inputTokens ||
+				!response.usage.outputTokens ||
+				!response.usage.totalTokens
+			) {
+				throw new Error("No usage data was returned.");
+			}
+			totalTokens.modelGeneration = {
+				input: response.usage.inputTokens,
+				output: response.usage.outputTokens,
+				total: response.usage.totalTokens,
+				price:
+					response.usage.inputTokens * INPUT_TOKEN_PRICE +
+					response.usage.outputTokens * OUTPUT_TOKEN_PRICE,
+			};
+
+			const resultText = response.output?.message?.content?.[0]?.text?.trim();
+			if (!resultText) {
+				throw new Error("No valid slice model was generated.");
+			}
+
+			try {
+				const generatedModel = JSON.parse(resultText);
+				const updatedSlice: SharedSlice = {
+					...args.slice,
+					variations: generatedModel.variations,
+				};
+
+				return updatedSlice;
+			} catch (error) {
+				throw new Error("Failed to parse AI response for model: " + error);
+			}
+		}
 
 		/**
-		 * Sends the prompt to AWS Bedrock and returns the generated Prismic JSON
-		 * model.
+		 * Calls the AI endpoint to generate mocks.
 		 */
-		const generatePrismicModel = async (
-			userPrompt: string,
-		): Promise<string> => {
-			const schema = getSharedSliceSchema();
-
-			const systemMessage = buildSystemMessage(schema, args.slice);
+		async function generateSliceMocks(
+			client: BedrockRuntimeClient,
+			imageFile: Uint8Array,
+			existingMocks: SharedSliceContent[],
+		): Promise<SharedSliceContent[]> {
+			// Build a prompt focused solely on updating the mocks.
+			const systemPrompt = `
+				You are a seasoned frontend engineer with deep expertise in Prismic slices.
+				Your task is to update the provided mocks template based solely on the visible content in the image.
+				Follow these guidelines strictly:
+					- Do not modify the overall structure of the mocks template.
+					- Strictly only update text content.
+					- Do not touch images.
+					- If you see a repetition with a group, you must create the same number of group items that are visible on the image.
+
+				!IMPORTANT!: 
+					- Only return a valid JSON object for mocks, nothing else before. JSON.parse on your response should not throw an error.
+					- All your response should fit in a single return response.
+				
+				Existing Mocks Template:
+				${JSON.stringify(existingMocks, null, 2)}
+			`.trim();
 
 			const command = new ConverseCommand({
-				modelId: "anthropic.claude-3-5-sonnet-20240620-v1:0",
-				system: [
+				modelId: "us.anthropic.claude-3-5-sonnet-20241022-v2:0",
+				system: [{ text: systemPrompt }],
+				messages: [
 					{
-						text:
-							systemMessage +
-							(args.imageFile
-								? `
-								### Additional important rules
-					A. SUPER IMPORTANT, you have to check and read the image and generate the model according to what is visible.
-					B. You MUST understand that background image are just a simple image field. Don't try to do anything fancy with it, just a simple image field. 
-					C. Even if the background image looks like two image, be smart and detect if it's actually just one simple background that don't need a GROUP!
-					D. NEVER EVER ADD decorative elements as detailled fields
-					`
-								: ``),
+						role: "user",
+						content: [
+							{ image: { format: "png", source: { bytes: imageFile } } },
+						],
 					},
 				],
+			});
+
+			const response = await client.send(command);
+			console.log("Generated mocks response:", JSON.stringify(response));
+
+			if (
+				!response.usage ||
+				!response.usage.inputTokens ||
+				!response.usage.outputTokens ||
+				!response.usage.totalTokens
+			) {
+				throw new Error("No usage data was returned.");
+			}
+			totalTokens.mocksGeneration = {
+				input: response.usage.inputTokens,
+				output: response.usage.outputTokens,
+				total: response.usage.totalTokens,
+				price:
+					response.usage.inputTokens * INPUT_TOKEN_PRICE +
+					response.usage.outputTokens * OUTPUT_TOKEN_PRICE,
+			};
+
+			const resultText = response.output?.message?.content?.[0]?.text?.trim();
+			if (!resultText) {
+				throw new Error("No valid mocks were generated.");
+			}
+
+			try {
+				const updatedMocks = JSON.parse(resultText);
+
+				return updatedMocks;
+			} catch (error) {
+				throw new Error("Failed to parse AI response for mocks: " + error);
+			}
+		}
+
+		/**
+		 * Calls the AI endpoint to generate the slice React component.
+		 */
+		async function generateSliceComponentCode(
+			client: BedrockRuntimeClient,
+			imageFile: Uint8Array,
+			existingMocks: any,
+		): Promise<string> {
+			// Build a prompt focused solely on generating the React component code.
+			const systemPrompt = `
+				You are a seasoned frontend engineer with deep expertise in Prismic slices.
+				Your task is to generate a fully isolated React component code for a slice based on the provided image input.
+				Follow these guidelines strictly:
+					- Be self-contained.
+					- Your goal is to make the code visually looks as close as possible to the image from the user input.
+					- Ensure that the color used for the background is the same as the image provide in the user prompt! It's better no background color than a wrong one.
+					- For links, you must use PrismicNextLink and you must just pass the field, PrismicNextLink will handle the display of the link text, don't do it manually.
+					- Respect the padding and margin visible in the image provide in the user prompt.
+					- Respect the fonts size, color, type visible in the image provide in the user prompt.
+					- Respect the colors visible in the image provide in the user prompt.
+					- Respect the position of elements visible in the image provide in the user prompt.
+					- Respect the size of each elements visible in the image provide in the user prompt.
+					- Respect the overall proportions of the slice from the image provide in the user prompt.
+					- Ensure to strictly respect what is defined on the mocks for each fields ID, do not invent or use something not in the mocks.
+					- Ensure to use all fields provided in the mocks.
+					- Use inline <style> (do not use <style jsx>).
+					- Follow the structure provided in the code example below.
+
+				!IMPORTANT!: 
+					- Only return a valid JSON object with two keys: "mocks" and "componentCode", nothing else before. JSON.parse on your response should not throw an error.
+					- All your response should fit in a single return response.
+				
+				## Example of a Fully Isolated Slice Component:
+				-----------------------------------------------------------
+				import { type Content } from "@prismicio/client";
+				import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+				import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
+				
+				export type HeroProps = SliceComponentProps<Content.HeroSlice>;
+				
+				const Hero = ({ slice }: HeroProps): JSX.Element => {
+					return (
+						<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+						className="hero"
+						>
+						<div className="hero__content">
+							<div className="hero__image-wrapper">
+								<PrismicNextImage field={slice.primary.image} className="hero__image" />
+							</div>
+							<div className="hero__text">
+								<PrismicRichText field={slice.primary.title} />
+								<PrismicRichText field={slice.primary.description} />
+								<PrismicNextLink field={slice.primary.link} />
+							</div>
+						</div>
+						<style>
+							{\`
+								.hero { display: flex; flex-direction: row; padding: 20px; }
+								.hero__content { width: 100%; }
+								.hero__image-wrapper { flex: 1; }
+								.hero__text { flex: 1; padding-left: 20px; }
+							\`}
+						</style>
+						</section>
+					);
+				};
+				
+				export default Hero;
+				-----------------------------------------------------------
+				Existing Mocks Template:
+				${JSON.stringify(existingMocks, null, 2)}
+			`.trim();
+
+			const command = new ConverseCommand({
+				modelId: "us.anthropic.claude-3-5-sonnet-20241022-v2:0",
+				system: [{ text: systemPrompt }],
 				messages: [
-					args.imageFile
-						? {
-								role: "user",
-								content: [
-									{
-										image: {
-											format: "png",
-											source: { bytes: args.imageFile } as any,
-										},
-									},
-								],
-						  }
-						: {
-								role: "user",
-								content: [
-									{
-										text: `Generate a valid Prismic JSON model based on the following description:\n\n${userPrompt}`,
-									},
-								],
-						  },
+					{
+						role: "user",
+						content: [
+							{ image: { format: "png", source: { bytes: imageFile } } },
+						],
+					},
 				],
 			});
 
+			const response = await client.send(command);
+			console.log(
+				"Generated component code response:",
+				JSON.stringify(response),
+			);
+
+			if (
+				!response.usage ||
+				!response.usage.inputTokens ||
+				!response.usage.outputTokens ||
+				!response.usage.totalTokens
+			) {
+				throw new Error("No usage data was returned.");
+			}
+			totalTokens.codeGeneration = {
+				input: response.usage.inputTokens,
+				output: response.usage.outputTokens,
+				total: response.usage.totalTokens,
+				price:
+					response.usage.inputTokens * INPUT_TOKEN_PRICE +
+					response.usage.outputTokens * OUTPUT_TOKEN_PRICE,
+			};
+
+			const resultText = response.output?.message?.content?.[0]?.text?.trim();
+			if (!resultText) {
+				throw new Error("No valid slice component code was generated.");
+			}
+
 			try {
-				console.log("Before sending command");
-				const response = await bedrockClient.send(command);
-				console.log("After response", JSON.stringify(response));
-
-				const result = response.output?.message?.content?.[0]?.text?.trim();
-				console.log("After sending command");
-				if (!result) {
-					throw new Error("No valid response received.");
+				const parsed = JSON.parse(resultText);
+				if (!parsed.componentCode) {
+					throw new Error("Missing key 'componentCode' in AI response.");
 				}
-
-				return result;
+				return parsed.componentCode;
 			} catch (error) {
-				console.error("Error generating Prismic model:", error);
-				throw error;
+				throw new Error(
+					"Failed to parse AI response for component code: " + error,
+				);
 			}
-		};
+		}
+
+		// Initialize AWS Bedrock client.
+		const bedrockClient = new BedrockRuntimeClient({
+			region: AWS_REGION,
+			credentials: {
+				accessKeyId: AWS_ACCESS_KEY_ID,
+				secretAccessKey: AWS_SECRET_ACCESS_KEY,
+			},
+		});
+
+		try {
+			// ----- Q1 scope -----
+
+			// STEP 1: Generate the slice model using the image.
+			console.log("STEP 1: Generate the slice model using the image.");
+			const updatedSlice = await generateSliceModel(
+				bedrockClient,
+				args.slice,
+				args.imageFile,
+			);
+
+			// STEP 2: Persist the updated slice model.
+			console.log("STEP 2: Persist the updated slice model.");
+			await this.updateSlice({
+				libraryID: args.libraryID,
+				model: updatedSlice,
+			});
+
+			// STEP 3: Update the slice screenshot.
+			console.log("STEP 3: Update the slice screenshot.");
+			await this.updateSliceScreenshot({
+				libraryID: args.libraryID,
+				sliceID: updatedSlice.id,
+				variationID: updatedSlice.variations[0].id,
+				data: Buffer.from(args.imageFile),
+			});
+
+			// ----- Q1 scope -----
+
+			// STEP 4: Generate updated mocks.
+			console.log("STEP 4: Generate updated mocks.");
+			const existingMocks = mockSlice({ model: updatedSlice });
+			const updatedMocks = await generateSliceMocks(
+				bedrockClient,
+				args.imageFile,
+				existingMocks,
+			);
+
+			// STEP 5: Generate the isolated slice component code.
+			console.log("STEP 5: Generate updated component code.");
+			const componentCode = await generateSliceComponentCode(
+				bedrockClient,
+				args.imageFile,
+				existingMocks,
+			);
+
+			// STEP 6: Update the slice code.
+			console.log("STEP 6: Update the slice code.");
+			await this.createSlice({
+				libraryID: args.libraryID,
+				model: updatedSlice,
+				componentContents: componentCode,
+			});
 
-		const prismicModel = await generatePrismicModel(args.userPrompt);
+			// STEP 7: Persist the generated mocks.
+			console.log("STEP 7: Persist the generated mocks.");
+			await this.updateSliceMocks({
+				libraryID: args.libraryID,
+				sliceID: args.slice.id,
+				mocks: updatedMocks,
+			});
+
+			// Usage
+			console.log("Tokens used:", totalTokens);
+			const totalPrice = Object.values(totalTokens).reduce(
+				(acc, { price }) => acc + price,
+				0,
+			);
+			console.log("Total price:", totalPrice);
+
+			return { slice: updatedSlice };
+		} catch (error) {
+			console.error("Failed to generate slice:", error);
+			throw new Error("Failed to generate slice: " + error);
+		}
+	}
 
-		console.log("After saving slice", prismicModel);
+	async generateSlicesFromUrl(
+		args: SliceMachineManagerGenerateSlicesFromUrlArgs,
+	): Promise<SliceMachineManagerGenerateSlicesFromUrlReturnType> {
+		assertPluginsInitialized(this.sliceMachinePluginRunner);
+
+		const { OPENAI_API_KEY } = process.env;
+		if (!OPENAI_API_KEY) {
+			throw new Error("OPENAI_API_KEY is not set.");
+		}
+		const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+
+		const sliceMachineConfig = await this.project.getSliceMachineConfig();
+		const libraryIDs = sliceMachineConfig.libraries || [];
+		const DEFAULT_LIBRARY_ID = libraryIDs[0];
 
-		const newSlice = {
-			...args.slice,
-			variations: JSON.parse(prismicModel).variations,
+		const KNOWNED_WEBSITE_URLS: { [url: string]: string } = {
+			"https://www.criteo.com/": "./resources/criteo/homepage",
+			"https://www.brevo.com/landing/email-marketing-service/":
+				"./resources/brevo/mail",
 		};
 
-		const response = await this.updateSlice({
-			libraryID: args.libraryID,
-			model: newSlice,
-		});
+		async function readImagesFromFolder(
+			folderPath: string,
+		): Promise<Uint8Array[]> {
+			console.log(process.cwd());
 
-		if (response.errors.length) {
-			return {
-				errors: response.errors,
-			};
+			const files = await fs.promises.readdir(folderPath);
+			const images = await Promise.all(
+				files.map(async (file) => {
+					const buffer = await fs.promises.readFile(
+						path.join(folderPath, file),
+					);
+					return new Uint8Array(buffer);
+				}),
+			);
+
+			return images;
 		}
 
-		try {
-			if (args.imageFile) {
-				await this.updateSliceScreenshot({
-					libraryID: args.libraryID,
-					sliceID: newSlice.id,
-					variationID: newSlice.variations[0].id,
-					data: args.imageFile,
-				});
+		async function readCodeFromFolder(folderPath: string): Promise<string[]> {
+			const files = await fs.promises.readdir(folderPath);
+			const codes = await Promise.all(
+				files.map(async (file) => {
+					const buffer = await fs.promises.readFile(
+						path.join(folderPath, file),
+						"utf-8",
+					);
+					return buffer.toString();
+				}),
+			);
+
+			return codes;
+		}
+
+		async function getGlobalStyle(filePath: string): Promise<string> {
+			const buffer = await fs.promises
+				.readFile(filePath)
+				.catch(() => Buffer.from(""));
+
+			return buffer.toString();
+		}
+
+		/**
+		 * TypeScript schema for the Shared Slice definition.
+		 */
+		const SHARED_SLICE_SCHEMA = `
+/**
+ * Represents a Prismic Slice.
+ * @property {string} type - Should always be "SharedSlice".
+ * @property {string} id - Unique identifier for the slice in snake_case.
+ * @property {string} name - Human-readable name in PascalCase.
+ * @property {string} description - Brief explanation of the slice's purpose.
+ * @property {SliceVariation[]} variations - Array of variations for the slice.
+ */
+type PrismicSlice = {
+  type: "SharedSlice";
+  id: string;
+  name: string;
+  description: string;
+  variations: SliceVariation[];
+};
+
+/**
+ * Represents a variation of a Prismic Slice.
+ * TIPS: Never use "items" property, you can see it doesn't exist here!
+ */
+type SliceVariation = {
+  id: string;
+  name: string;
+  description: string;
+  primary: Record<string, PrismicField>;
+  docURL: string;
+  version: string;
+};
+
+/**
+ * Union type representing all possible Prismic fields.
+ */
+type PrismicField =
+  | UIDField
+  | BooleanField
+  | ColorField
+  | DateField
+  | TimestampField
+  | NumberField
+  | TextField
+  | SelectField
+  | StructuredTextField
+  | ImageField
+  | LinkField
+  | GeoPointField
+  | EmbedField
+  | GroupField;
+
+/* Definitions for each field type follow... */
+
+/**
+ * Represents a UID Field in Prismic.
+ * @property {"UID"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {string} [config.customregex] - Custom regex for validation.
+ * @property {string} [config.errorMessage] - Error message for invalid input.
+ */
+type UIDField = {
+	type: "UID";
+	config: {
+		label: string;
+		placeholder?: string;
+		customregex?: string;
+		errorMessage?: string;
+	};
+};
+
+/**
+ * Represents a Boolean Field in Prismic.
+ * @property {"Boolean"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {boolean} [config.default_value] - Default value (true or false).
+ */
+type BooleanField = {
+	type: "Boolean";
+	config: {
+		label: string;
+		default_value?: boolean;
+	};
+};
+
+/**
+ * Represents a Color Field in Prismic.
+ * @property {"Color"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type ColorField = {
+	type: "Color";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Date Field in Prismic.
+ * @property {"Date"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type DateField = {
+	type: "Date";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Timestamp Field in Prismic.
+ * @property {"Timestamp"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type TimestampField = {
+	type: "Timestamp";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Number Field in Prismic.
+ * @property {"Number"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {number} [config.min] - Minimum allowable value.
+ * @property {number} [config.max] - Maximum allowable value.
+ */
+type NumberField = {
+	type: "Number";
+	config: {
+		label: string;
+		placeholder?: string;
+		min?: number;
+		max?: number;
+	};
+};
+
+/**
+ * Represents a Text Field in Prismic.
+ * @property {"Text"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ */
+type TextField = {
+	type: "Text";
+	config: {
+		label: string;
+		placeholder?: string;
+	};
+};
+
+/**
+ * Represents a Select Field in Prismic.
+ * @property {"Select"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string[]} config.options - Array of options for the select dropdown.
+ */
+type SelectField = {
+	type: "Select";
+	config: {
+		label: string;
+		options: string[];
+	};
+};
+
+/**
+ * Represents a Structured Text Field in Prismic.
+ * @property {"StructuredText"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {string} [config.placeholder] - Placeholder text.
+ * @property {string} [config.single] - A comma-separated list of formatting options that does not allow line breaks. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+ * @property {string} [config.multi] - A comma-separated list of formatting options, with paragraph breaks allowed. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+ * @property {boolean} [config.allowTargetBlank] - Allows links to open in a new tab.
+ * @property {string[]} [config.labels] - An array of strings to define labels for custom formatting.
+ * @property {ImageConstraint} [config.imageConstraint] - Constraints for images within the rich text field.
+ */
+type StructuredTextField = {
+	type: "StructuredText";
+	config: {
+		label: string;
+		placeholder?: string;
+		single?: string;
+		multi?: string;
+		allowTargetBlank?: boolean;
+		labels?: string[];
+		imageConstraint?: ImageConstraint;
+	};
+};
 
-				const extMocks = mockSlice({ model: newSlice });
-				console.log("extMocks", extMocks);
+/**
+ * Represents constraints for images within a rich text field.
+ * @property {number} [width] - Width constraint in pixels.
+ * @property {number
+ * @property {number} [height] - Height constraint in pixels.
+ */
+type ImageConstraint = {
+	width?: number;
+	height?: number;
+};
+
+/**
+ * Represents an Image Field in Prismic.
+ * @property {"Image"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {Object} [config.constraint] - Constraints for the image dimensions.
+ * @property {number} [config.constraint.width] - Width constraint.
+ * @property {number} [config.constraint.height] - Height constraint.
+ * @property {Thumbnail[]} [config.thumbnails] - Array of thumbnail configurations.
+ */
+type ImageField = {
+	type: "Image";
+	config: {
+		label: string;
+		constraint?: {
+			width?: number;
+			height?: number;
+		};
+		thumbnails?: Thumbnail[];
+	};
+};
+
+/**
+ * Represents a Thumbnail configuration for an Image field.
+ * @property {string} name - Name of the thumbnail.
+ * @property {number} [width] - Width of the thumbnail in pixels.
+ * @property {number} [height] - Height of the thumbnail in pixels.
+ */
+type Thumbnail = {
+	name: string;
+	width?: number;
+	height?: number;
+};
+
+/**
+ * Represents a Link Field in Prismic.
+ * @property {"Link"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+* @property {boolean} config.allowText - Enable the text field for the link.
+ */
+type LinkField = {
+	type: "Link";
+	config: {
+		label: string;
+		allowText: boolean;
+	};
+};
+
+/**
+ * Represents an Embed Field in Prismic.
+ * @property {"Embed"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type EmbedField = {
+	type: "Embed";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a GeoPoint Field in Prismic.
+ * @property {"GeoPoint"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ */
+type GeoPointField = {
+	type: "GeoPoint";
+	config: {
+		label: string;
+	};
+};
+
+/**
+ * Represents a Group Field (Repeatable Fields) in Prismic.
+ * It CAN NEVER BE PUT INSIDE ANOTHER FIELD.
+ * @property {"Group"} type - Field type.
+ * @property {Object} config - Configuration object.
+ * @property {string} config.label - Label displayed in the editor.
+ * @property {Record<string, PrismicField>} config.fields - Defines the fields inside the group.
+ */
+type GroupField = {
+	type: "Group";
+	config: {
+		label: string;
+		fields: Record<string, PrismicField>;
+	};
+};
+`;
+
+		/**
+		 * Default slice model for the SharedSlice.
+		 */
+		const DEFAULT_SLICE_MODEL: SharedSlice = {
+			id: "<ID_TO_CHANGE>",
+			type: "SharedSlice",
+			name: "<NAME_TO_CHANGE>",
+			description: "<DESCRIPTION_TO_CHANGE>",
+			variations: [
+				{
+					id: "<VARIATION_ID_TO_CHANGE>",
+					name: "<NAME_TO_CHANGE>",
+					docURL: "...",
+					version: "initial",
+					description: "<DESCRIPTION_TO_CHANGE>",
+					imageUrl: "",
+				},
+			],
+		};
 
-				const command = new ConverseCommand({
-					modelId: "anthropic.claude-3-5-sonnet-20240620-v1:0",
-					system: [
+		/**
+		 * Calls the AI to generate the slice model.
+		 */
+		async function generateSliceModel(
+			imageFile: Uint8Array,
+			codeFile: string,
+		): Promise<SharedSlice> {
+			const systemPrompt = `
+				You are an expert in Prismic content modeling. Using the image and the code provided, generate a valid Prismic JSON model for the slice described below. Follow these rules precisely:
+				- Use the TypeScript schema provided as your reference.
+				- Place all main content fields under the "primary" object.
+				- Do not create any collections or groups for single-image content (background images should be a single image field).
+				- Ensure that each field has appropriate placeholders, labels, and configurations.
+				- Never generate a Link / Button text field, only the Link / Button field itself is enough. Just enable "allowText" when doing that.
+				- Do not forget any field visible from the image provide in the user prompt.
+				- Ensure to differentiate Prismic fields from just an image with visual inside the image. When that's the case, just add a Prismic image field.
+				- Use the code to know exactly what is a real field and not an image. If in the code it's an image, then the field should also be an image, do a 1-1 mapping thanks to the code.
+				- Do not include any decorative fields. When an element is purely visual, decorative, don't include it att all in the slice model.
+				- Do not include any extra commentary or formatting.
+				- When you see a repetition of an image, a text, a link, etc, NEVER create one field per repeated item, you HAVE to use a group for that.
+				- When you see multiple fields repeated, you MUST use a group for that.
+				- NEVER put a group inside another group field, this is not allowed. In the final JSON a group CANNOT be within another group field. YOU CANNOT NEST GROUP FIELDS! Not for any reason you are allowed to do that! Even for navigation, in header or footer you cannot nest group fields.
+				- The "items" field must not be used under any circumstances. All repeatable fields should be defined using a Group field inside the primary object. If a field represents a collection of items, it must be part of a Group field, and items must never appear in the JSON output.
+				- Don't forget to replace the temporary text in the "Existing Slice to update", like <ID_TO_CHANGE>, <NAME_TO_CHANGE>, <DESCRIPTION_TO_CHANGE>, <VARIATION_ID_TO_CHANGE>, etc.
+				- Field placeholder should be super short, do not put the content from the image inside the placeholder.
+				- Field label and id should define the field's purpose, not its content.
+				- Slice name and id should define the slice's purpose, not its content.
+				- Slice description should be a brief explanation of the slice's purpose not its content.
+			
+				!IMPORTANT!: 
+					- Only return a valid JSON object representing the full slice model, nothing else before. JSON.parse on your response should not throw an error.
+					- All your response should fit in a single return response.
+					- Never stop the response until you totally finish the full JSON response you wanted.
+
+				Reference Schema:
+				${SHARED_SLICE_SCHEMA}
+				
+				Existing Slice to update:
+				${JSON.stringify(DEFAULT_SLICE_MODEL)}
+			`.trim();
+
+			const messages: Array<ChatCompletionMessageParam> = [
+				{ role: "system", content: systemPrompt },
+				{
+					role: "user",
+					content: [
 						{
-							text: `
-# Task 1
-You are a world-class expert in creating Prismic Mocks for slices.
-Your task is to generate a valid Prismic JSON mocks based solely on the provided existing mocks.
-The goal is for you to take the image from the user input, detect the text and fill ensure the existing mock data is aligned with what is visible.
-Don't handle images.
-Only handle text.
-If you see a repetition with a group, you must create the same number of group items that are visible on the image.
-KEEP THE EXACT SAME STRUCTURE FOR THE MOCKS DATA, ONLY FILL IN THE TEXT FIELDS!
-AND ULTRA IMPORTANT! Output ONLY a valid JSON object without any additional commentary or formatting! ONLY JSON with the same existing mock format, I need to parse it after with JSON.parse!
-
-### Existing mocks
-${JSON.stringify(extMocks)}
-
-THAT was your FIRST task!
-# Task 2
-
-Now you also have a second task, generating the slice code!
-Generate fully isolated slice mock that don't require any package. The code is in React.
-You have to ensure the mocks data will be the input of your code.
-Use the example of a slice fully isolated from bellow to help you know how to code a slice. But use the mocks data as input and the slice name etc.
-NEVER USE <style jsx> in the final code, just <style> is enough! It's important to not use <style jsx>!
-Ensure that the color used for the background is the same as the image provide in the user prompt! It's better no background color than a wrong one.
-Your goal is to make the code visually looks as close as possible to the image from the user input.
-AND ULTRA IMPORTANT! Output ONLY a valid React code without any additional commentary or formatting! Give me the code so I can just copy paste it into a React component file.
-
-### Tips
-For links just use PrismicNextLink just pass the field, PrismicNextLink will handle the display of the link text.
-DO NOT TRY TO MANUALLY GO INSIDE THE LINK TO WRITE THE TEXT IT"S DONE AUTOMATICALLY.
-
-### Example of a slice fully isolated 
-import { type Content } from "@prismicio/client";
-import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
-import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
-
-export type HeroProps = SliceComponentProps<Content.HeroSlice>;
-
-const Hero = ({ slice }: HeroProps): JSX.Element => {
-  return (
-    <section
-      data-slice-type={slice.slice_type}
-      data-slice-variation={slice.variation}
-      className="es-bounded es-fullpage-hero"
-    >
-      <div
-        className="es-fullpage-hero__content"
-      >
-        <div>
-            <PrismicNextImage
-              field={slice.primary.image}
-              className="es-fullpage-hero__image"
-            />
-        </div>
-
-        <div className="es-fullpage-hero__content-right">
-          <div className="es-fullpage-hero__content__intro">
-              <p className="es-fullpage-hero__content__intro__eyebrow">
-                {slice.primary.eyebrowHeadline}
-              </p>
-            
-              <div className="es-fullpage-hero__content__intro__headline">
-                <PrismicRichText field={slice.primary.title} />
-              </div>
-
-           
-              <div className="es-fullpage-hero__content__intro__description">
-                <PrismicRichText field={slice.primary.description} />
-              </div>
-         
-            <PrismicNextLink
-              className="es-call-to-action__link"
-              field={slice.primary.callToActionLink}
-            />
-          </div>
-        </div>
-      </div>
-      <style>
-        {\`
-          .es-bounded {
-              margin: 0px;
-              min-width: 0px;
-              position: relative;
-          }
-          
-          .es-fullpage-hero {
-              font-family: system-ui, sans-serif;
-              background-color: #fff;
-              color: #333;
-          }
-          
-          .es-fullpage-hero__image {
-              max-width: 100%;
-              height: auto;
-              align-self: center;
+							type: "image_url",
+							image_url: {
+								url:
+									"data:image/png;base64," +
+									Buffer.from(imageFile).toString("base64"),
+							},
+						},
+						{ type: "text", text: codeFile },
+					],
+				},
+			];
+			const response: OpenAI.Chat.Completions.ChatCompletion & {
+				_request_id?: string | null;
+			} = await openai.chat.completions.create({
+				model: "gpt-4o",
+				messages,
+				response_format: {
+					type: "json_object",
+				},
+			});
+
+			console.log("Generated model response:", JSON.stringify(response));
+
+			const resultText = response.choices[0]?.message?.content?.trim();
+			if (!resultText) {
+				throw new Error("No valid slice model was generated.");
+			}
+
+			try {
+				const generatedModel = JSON.parse(resultText);
+
+				return generatedModel;
+			} catch (error) {
+				throw new Error("Failed to parse AI response for model: " + error);
+			}
 		}
-          
-          .es-fullpage-hero__content {
-              display: flex;
-              flex-direction: column;
-              gap: 2rem;
-          }
-          
-          .es-fullpage-hero__content-right {
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              padding: 1.5rem;
-          }
-          
-          @media (min-width: 1080px) {
-              .es-fullpage-hero__content {
-                  flex-direction: row;
-              }
-              
-              .es-fullpage-hero__content > div {
-                  width: 50%;
-              }
-          }
-          
-          .es-fullpage-hero__content__intro {
-              display: grid;
-              gap: 1rem;
-          }
-          
-          .es-fullpage-hero__content__intro__eyebrow {
-              color: #47C1AF;
-              font-size: 1.15rem;
-              font-weight: 500;
-              margin: 0;
-          }
-          
-          .es-fullpage-hero__content__intro__headline {
-              font-size: 1.625rem;
-              font-weight: 700;
-          }
-          
-          .es-fullpage-hero__content__intro__headline * {
-              margin: 0;
-          }
-          
-          @media (min-width: 640px) {
-              .es-fullpage-hero__content__intro__headline {
-                  font-size: 2rem;
-              }
-          }
-          
-          @media (min-width: 1024px) {
-              .es-fullpage-hero__content__intro__headline {
-                  font-size: 2.5rem;
-              }
-          }
-          
-          @media (min-width: 1200px) {
-              .es-fullpage-hero__content__intro__headline {
-                  font-size: 2.75rem;
-              }
-          }
-          
-          .es-fullpage-hero__content__intro__description {
-              font-size: 1.15rem;
-              max-width: 38rem;
-          }
-          
-          .es-fullpage-hero__content__intro__description > p {
-              margin: 0;
-          }
-          
-          @media (min-width: 1200px) {
-              .es-fullpage-hero__content__intro__description {
-                  font-size: 1.4rem;
-              }
-          }
-
-          .es-call-to-action__link {
-              justify-self: flex-start;
-              border-radius: 0.25rem;
-              font-size: 0.875rem;
-              line-height: 1.3;
-              padding: 1rem 2.625rem;
-              transition: background-color 100ms linear;
-              background-color: #16745f;
-              color: #fff;
-          }
-          
-          .es-call-to-action__link:hover {
-              background-color: #0d5e4c;
-          }
-      \`}
-      </style>
-    </section>
-  );
-};
-
-export default Hero;
-
-
-# Final output of task 1 and 2
-Return the task 1 and 2 output in a an object:
-{
-  task1: <JSON of task 1 for the mocks>,
-  task2: <plain string of the slice code for task 2>
-}
-THIS IS THE MOST IMPORTANT THING, YOU NEED A VALID JSON, with task1 and task2 property. And the correct format for each of the two property.
-						`,
+
+		/**
+		 * Calls the AI endpoint to generate mocks.
+		 */
+		async function generateSliceMocks(
+			imageFile: Uint8Array,
+			existingMocks: SharedSliceContent[],
+		): Promise<SharedSliceContent[]> {
+			// Build a prompt focused solely on updating the mocks.
+			const systemPrompt = `
+				You are a seasoned frontend engineer with deep expertise in Prismic slices.
+				Your task is to update the provided mocks template based solely on the visible content in the image.
+				Follow these guidelines strictly:
+					- Do not modify the overall structure of the mocks template.
+					- Strictly only update text content.
+					- Do not touch images.
+					- If you see a repetition with a group, you must create the same number of group items that are visible on the image.
+					- Absolutely do not touch what is not necessary to be changed, like link "key" property, or the StructureText "direction", spans", etc or the structure, this is really important that you just do a replace of the text.
+					- For structure text content you must alway keep the same structure and properties, even if empty, ONLY replace text content.
+					- Only and strictly update the text content of the fields, nothing else. You should only and strictly update the text that is visible in the image.
+					- Never touch the image fields, nothing should be changed for image fields.
+
+				!IMPORTANT!:
+					- Only return a valid JSON object for mocks, nothing else before. JSON.parse on your response should not throw an error.
+					- All your response should fit in a single return response.
+					- Never stop the response until you totally finish the full JSON response you wanted.
+
+				Existing Mocks Template:
+				${JSON.stringify(existingMocks)}
+			`.trim();
+
+			const messages: Array<ChatCompletionMessageParam> = [
+				{ role: "system", content: systemPrompt },
+				{
+					role: "user",
+					content: [
+						{
+							type: "image_url",
+							image_url: {
+								url:
+									"data:image/png;base64," +
+									Buffer.from(imageFile).toString("base64"),
+							},
 						},
 					],
-					messages: [
+				},
+			];
+			const response: OpenAI.Chat.Completions.ChatCompletion & {
+				_request_id?: string | null;
+			} = await openai.chat.completions.create({
+				model: "gpt-4o",
+				messages,
+				response_format: {
+					type: "json_object",
+				},
+			});
+
+			console.log("Generated mocks response:", JSON.stringify(response));
+
+			const resultText = response.choices[0]?.message?.content?.trim();
+			if (!resultText) {
+				throw new Error("No valid mocks were generated.");
+			}
+
+			try {
+				const updatedMock: SharedSliceContent = JSON.parse(resultText);
+
+				return [updatedMock];
+			} catch (error) {
+				throw new Error("Failed to parse AI response for mocks: " + error);
+			}
+		}
+
+		/**
+		 * Calls the AI endpoint to generate the slice React component.
+		 */
+		async function generateSliceComponentCode(
+			imageFile: Uint8Array,
+			codeFile: string,
+			updatedSlice: SharedSlice,
+		): Promise<string> {
+			const systemPrompt = `
+				You are a seasoned frontend engineer with deep expertise in Prismic slices.
+				Your task is to generate a fully isolated React component code for a slice based on the provided image and code input.
+				The goal is to create the React (HTML) structure of the slice, NO STYLING! Concentrate 100% on the perfect structure of each component.
+
+				Follow these guidelines strictly:
+					- Be self-contained.
+					- For links, you must use PrismicNextLink and you must just pass the field, PrismicNextLink will handle the display of the link text, don't do it manually.
+					- PrismicNextLink should never be open, just passing the field is enough like in the code example below. You can use className or inline style directly on the PrismicNextLink component.
+					- Ensure to strictly respect what is defined on the model for each fields ID, do not invent or use something not in the model.
+					- Ensure to use all fields provided in the model.
+					- Follow the structure provided in the code example below.
+					- Use the provided code to help yourself to create the structure.
+					- As you can see in the example of the code you MUST never access the data with "<field>.value".
+					- You need to really inspire yourself from the code example bellow in order to understand how to access field, write field etc. Do not try to invent something that you didn't see.
+					- You cannot add a style prop to "PrismicRichText" component, it's not allowed.
+					- It's important to respect the same imports as done in the code example bellow, import exactly from the same package.
+					- Never do wrong W3C HTML structure, always respect a correct HTML structure, for example you cannot put a PrismicRichText component inside a <h1>, or a <p>, etc.
+					- Ensure to map the field type to the correct Prismic component, for example, a StructuredText field should be mapped to PrismicRichText, an image field should be mapped to PrismicNextImage, a Text field should just be map to a classic <p> component
+				
+				!IMPORTANT!:
+					- Return a valid JSON object containing only one key: "componentCode". No additional keys, text, or formatting are allowed before, after, or within the JSON object.
+					- Return a valid JSON, meaning you should NEVER start with a sentence, directly the JSON so that I can JSON.parse your response.
+					- All strings must be enclosed in double quotes ("). Do not use single quotes or template literals.
+					- Within the string value for "componentCode", every embedded double quote must be escaped as \". Similarly, every backslash must be escaped as \\.
+					- Ensure that the string value does not contain any raw control characters (such as literal newline, tab, or carriage return characters). Instead, use their escape sequences.
+					- Before finalizing the output, validate that JSON.parse(output) works without throwing an error. No unescaped characters should cause the parser to crash.
+					- The output must not include any markdown formatting, code block fences, or extra text. It should be a single, clean JSON object.
+
+				## Example of a Fully Isolated Slice Component:
+				-----------------------------------------------------------
+				import { FC } from "react";
+				import { Content } from "@prismicio/client";
+				import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
+				import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
+
+				export type PascalNameToReplaceProps =
+					SliceComponentProps<Content.PascalNameToReplaceSlice>;
+
+				const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
+					return (
+						<section
+							data-slice-type={slice.slice_type}
+							data-slice-variation={slice.variation}
+							className="es-bounded es-alternate-grid"
+						>
+							<PrismicNextLink
+								className="es-alternate-grid__button"
+								field={slice.primary.buttonLink}
+							/>
+							<div className="es-alternate-grid__content">
+								<PrismicNextImage
+									field={slice.primary.image}
+									className="es-alternate-grid__image"
+								/>
+								<div className="es-alternate-grid__primary-content">
+									<div className="es-alternate-grid__primary-content__intro">
+										<p className="es-alternate-grid__primary-content__intro__eyebrow">
+											{slice.primary.eyebrowHeadline}
+										</p>
+										<div className="es-alternate-grid__primary-content__intro__headline">
+											<PrismicRichText field={slice.primary.title} />
+										</div>
+										<div className="es-alternate-grid__primary-content__intro__description">
+											<PrismicRichText field={slice.primary.description} />
+										</div>
+									</div>
+
+									<div className="es-alternate-grid__primary-content__stats">
+										{slice.primary.stats.map((stat, i) => (
+											<div key={\`stat-$\{i + 1\}\`} className="es-alternate-grid__stat">
+												<div className="es-alternate-grid__stat__heading">
+													<PrismicRichText field={stat.title} />
+												</div>
+												<div className="es-alternate-grid__stat__description">
+													<PrismicRichText field={stat.description} />
+												</div>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						</section>
+					);
+				};
+
+				export default PascalNameToReplace;
+				-----------------------------------------------------------
+
+				Model of the slice:
+				${JSON.stringify(updatedSlice)}
+			`.trim();
+
+			const messages: Array<ChatCompletionMessageParam> = [
+				{ role: "system", content: systemPrompt },
+				{
+					role: "user",
+					content: [
 						{
-							role: "user",
-							content: [
-								{
-									image: {
-										format: "png",
-										source: { bytes: args.imageFile } as any,
-									},
-								},
-							],
+							type: "image_url",
+							image_url: {
+								url:
+									"data:image/png;base64," +
+									Buffer.from(imageFile).toString("base64"),
+							},
 						},
+						{ type: "text", text: codeFile },
 					],
-				});
+				},
+			];
+			const response: OpenAI.Chat.Completions.ChatCompletion & {
+				_request_id?: string | null;
+			} = await openai.chat.completions.create({
+				model: "gpt-4o",
+				messages,
+				response_format: {
+					type: "json_object",
+				},
+			});
 
-				console.log("Before sending mock command");
-				const response = await bedrockClient.send(command);
-				console.log("After response", JSON.stringify(response));
+			console.log(
+				"Generated component code response:",
+				JSON.stringify(response),
+			);
 
-				const result = response.output?.message?.content?.[0]?.text?.trim();
-				console.log("After sending mock command");
+			const resultText = response.choices[0]?.message?.content?.trim();
+			if (!resultText) {
+				throw new Error("No valid slice component code was generated.");
+			}
 
-				if (result) {
-					await this.updateSliceMocks({
-						libraryID: args.libraryID,
-						sliceID: newSlice.id,
-						mocks: JSON.parse(result).task1,
-					});
+			try {
+				const parsed = JSON.parse(resultText);
+				if (!parsed.componentCode) {
+					throw new Error("Missing key 'componentCode' in AI response.");
+				}
+				return parsed.componentCode;
+			} catch (error) {
+				throw new Error(
+					"Failed to parse AI response for component code: " + error,
+				);
+			}
+		}
 
-					await this.sliceMachinePluginRunner.callHook("slice:update-code", {
-						libraryID: args.libraryID,
-						model: newSlice,
-						componentContents: JSON.parse(result).task2,
-					});
+		async function generateSliceComponentCodeAppearance(
+			imageFile: Uint8Array,
+			codeFile: string,
+			globalStyle: string,
+			componentCode: string,
+		): Promise<string> {
+			const systemPrompt = `
+				You are a seasoned frontend engineer with deep expertise in Prismic slices.
+				Your task is to apply the branding (appearance) based on the provided image and code input.
+				The branding is SUPER important, and the slice you create should PERFECTLY match the branding (appearance) of the provided slice image and code.
+
+				Follow these guidelines strictly:
+					- Don't change anything related to the structure of the code, ONLY apply styling, PURELY styling is your ONLY task.
+					- Be self-contained, no dependency should be use to do the styling, do inline style.
+					- Your goal is to make the code visually looks as close as possible to the image from the user input.
+					- Ensure that the color used for the background is the same as the image provide in the user prompt! It's better no background color than a wrong one.
+					- Strictly respect the padding and margin visible in the image provide in the user prompt.
+					- Strictly respect the fonts size, color, type visible in the image provide in the user prompt.
+					- Strictly respect the colors visible in the image provide in the user prompt.
+					- Strictly respect the position of elements visible in the image provide in the user prompt.
+					- Strictly respect the size of each elements visible in the image provide in the user prompt.
+					- Strictly respect the overall proportions of the slice from the image provide in the user prompt.
+					- Ensure image are always displayed with the same aspect ratio as the image provide in the user prompt, put constraints on the image with / height to make sure it's the same.
+					- Handle animations, but never make them too long, it should be fast enough to be nice to read.
+					- Use inline <style> (do not use <style jsx>).
+					- Items repetitions should be styled in the same way as the image provided, the direction of the flex should be the same so that the items are vertical or horizontal as in the image.
+
+				!IMPORTANT!:
+					- DO NOT CHANGE anything else than the style BUT return everything as before for the rest, like from the import to the last export line, everything should stay the same BUT you add the styling on top.
+					- Return a valid JSON object containing only one key: "componentCode". No additional keys, text, or formatting are allowed before, after, or within the JSON object.
+					- Return a valid JSON, meaning you should NEVER start with a sentence, directly the JSON so that I can JSON.parse your response.
+					- All strings must be enclosed in double quotes ("). Do not use single quotes or template literals.
+					- Within the string value for "componentCode", every embedded double quote must be escaped as \". Similarly, every backslash must be escaped as \\.
+					- Ensure that the string value does not contain any raw control characters (such as literal newline, tab, or carriage return characters). Instead, use their escape sequences.
+					- Before finalizing the output, validate that JSON.parse(output) works without throwing an error. No unescaped characters should cause the parser to crash.
+					- The output must not include any markdown formatting, code block fences, or extra text. It should be a single, clean JSON object.
+
+				Existing code to apply branding on it:
+				${componentCode}
+			`.trim();
+
+			// INFO: globalStyle is way too big as of today to be included in the prompt.
+			// As the user is providing a slice image and code you miss the global style to help you build the best slice that match the branding, so here is the global style:
+			// ${globalStyle}
+
+			const messages: Array<ChatCompletionMessageParam> = [
+				{ role: "system", content: systemPrompt },
+				{
+					role: "user",
+					content: [
+						{
+							type: "image_url",
+							image_url: {
+								url:
+									"data:image/png;base64," +
+									Buffer.from(imageFile).toString("base64"),
+							},
+						},
+						{ type: "text", text: codeFile },
+					],
+				},
+			];
+			const response: OpenAI.Chat.Completions.ChatCompletion & {
+				_request_id?: string | null;
+			} = await openai.chat.completions.create({
+				model: "gpt-4o",
+				messages,
+				response_format: {
+					type: "json_object",
+				},
+			});
+
+			console.log(
+				"Generated component code appearance response:",
+				JSON.stringify(response),
+			);
+
+			const resultText = response.choices[0]?.message?.content?.trim();
+			if (!resultText) {
+				throw new Error("No valid slice component code was generated.");
+			}
+
+			try {
+				const parsed = JSON.parse(resultText);
+				if (!parsed.componentCode) {
+					throw new Error("Missing key 'componentCode' in AI response.");
 				}
+				return parsed.componentCode;
+			} catch (error) {
+				throw new Error(
+					"Failed to parse AI response for component code appearance: " + error,
+				);
 			}
-		} catch (e) {
-			console.log("Error", e);
 		}
 
-		return {
-			errors: [],
-			slice: newSlice,
-		};
+		try {
+			let slices: {
+				sliceImage: Uint8Array;
+				codeFile: string;
+			}[] = [];
+
+			const folderPath = KNOWNED_WEBSITE_URLS[args.websiteUrl];
+
+			console.log("STEP 1: Get the slices images from the folder.");
+			const sliceImages = await readImagesFromFolder(`${folderPath}/images`);
+
+			console.log("STEP 2: Get the slices codes from the folder.");
+			const sliceCodes = await readCodeFromFolder(`${folderPath}/code`);
+
+			slices = sliceImages.map((sliceImage, index) => ({
+				sliceImage,
+				codeFile: sliceCodes[index],
+			}));
+
+			// Loop in parallel over each slice image and html code and generate the slice model, mocks and code.
+			const updatedSlices = await Promise.all(
+				slices.map(async ({ sliceImage, codeFile }, index) => {
+					// ----- Q1 scope -----
+
+					console.log(
+						"STEP 3: Generate the slice model using the image for slice:",
+						index,
+					);
+					const updatedSlice = await generateSliceModel(sliceImage, codeFile);
+
+					console.log(
+						"STEP 4: Persist the updated slice model for:",
+						`${index} - ${updatedSlice.name}`,
+					);
+					await this.updateSlice({
+						libraryID: DEFAULT_LIBRARY_ID,
+						model: updatedSlice,
+					});
+
+					console.log(
+						"STEP 5: Update the slice screenshot for:",
+						`${index} - ${updatedSlice.name}`,
+					);
+					await this.updateSliceScreenshot({
+						libraryID: DEFAULT_LIBRARY_ID,
+						sliceID: updatedSlice.id,
+						variationID: updatedSlice.variations[0].id,
+						data: Buffer.from(sliceImage),
+					});
+
+					// ----- END Q1 scope -----
+
+					let updatedMock: SharedSliceContent[];
+					try {
+						console.log(
+							"STEP 6: Generate updated mocks for:",
+							`${index} - ${updatedSlice.name}`,
+						);
+						const existingMocks = mockSlice({ model: updatedSlice });
+						updatedMock = await generateSliceMocks(sliceImage, existingMocks);
+					} catch (error) {
+						console.error(
+							`Failed to generate mocks for ${index} - ${updatedSlice.name}:`,
+							error,
+						);
+						updatedMock = mockSlice({ model: updatedSlice });
+					}
+
+					let componentCode: string | undefined;
+					try {
+						console.log(
+							"STEP 7: Generate the isolated slice component code for:",
+							`${index} - ${updatedSlice.name}`,
+						);
+						const globalStyle = await getGlobalStyle(
+							`${folderPath}/globalStyle.css`,
+						);
+						const initialCode = await generateSliceComponentCode(
+							sliceImage,
+							codeFile,
+							updatedSlice,
+						);
+
+						console.log(
+							"STEP 8: Generate the branding on the code:",
+							`${index} - ${updatedSlice.name}`,
+						);
+						componentCode = await generateSliceComponentCodeAppearance(
+							sliceImage,
+							codeFile,
+							globalStyle,
+							initialCode,
+						);
+					} catch (error) {
+						console.error(
+							`Failed to generate code for ${index} - ${updatedSlice.name}:`,
+							error,
+						);
+					}
+
+					return { updatedSlice, componentCode, updatedMock };
+				}),
+			);
+
+			// Ensure to wait to have all slices code and mocks before writing on the disk
+			await Promise.all(
+				updatedSlices.map(
+					async ({ updatedSlice, componentCode, updatedMock }, index) => {
+						console.log(
+							"STEP 9: Update the slice code for:",
+							`${index} - ${updatedSlice.name}`,
+						);
+						if (componentCode) {
+							await this.createSlice({
+								libraryID: DEFAULT_LIBRARY_ID,
+								model: updatedSlice,
+								componentContents: componentCode,
+							});
+						} else {
+							await this.createSlice({
+								libraryID: DEFAULT_LIBRARY_ID,
+								model: updatedSlice,
+							});
+						}
+
+						console.log(
+							"STEP 10: Persist the generated mocks for:",
+							`${index} - ${updatedSlice.name}`,
+						);
+						await this.updateSliceMocks({
+							libraryID: DEFAULT_LIBRARY_ID,
+							sliceID: updatedSlice.id,
+							mocks: updatedMock,
+						});
+					},
+				),
+			);
+
+			console.log("STEP 11: THE END");
+
+			return {
+				slices: updatedSlices.map(({ updatedSlice }) => updatedSlice),
+			};
+		} catch (error) {
+			console.error("Failed to generate slice:", error);
+			throw new Error("Failed to generate slice: " + error);
+		}
 	}
 }