PUBLISHED DATE: 2025-08-12 00:01:21

VIDEO TRANSCRIPT:

SPEAKER:

Hi everyone, I'm Riley, a software development engineer at Publicis Sapient, and today I'm going to show you how we use Sapient Slingshot to take simple image files and turn them into web components without writing everything from scratch. We'll go from project setup to deploying a React-powered website update. Let's jump in.

  1. First, we generate our project. I'm using our site builder, where I select my AEM license type. For this demo, I'll choose AEM as the cloud service. I also pick the industry, select a hybrid architecture, and click run accelerator. This generates a code base that contains both AEM as well as the React code to get started. We'll download this code and then import this into the IDE.
  2. Now here's where things get really cool. We don't have to manually define our components. Slingshot can extract them from an image. I'm going to upload a few screenshots of a website, and Slingshot will analyze them, break them into distinct UI elements, and generate a JSON contract that maps out the structure of our new component. This JSON contract acts as the blueprint. Now I can refine it by specifying additional details, like whether the component should pull in design elements from the template. Once that's done, Slingshot optimizes the code and prepares it for the next step.
  3. Now let's generate the actual AEM component. I take this enhanced JSON contract, feed it into Slingshot along with some sample code to maintain consistency, and let it do its thing. And there we go, a fully functional React component, complete with CSS and AEM integration. So we started with nothing but a set of image files, and now we have a fully coded, reusable component for our website without writing it manually.
  4. Now it's time to push this to AEM. I take the generated code, save it into our project, and deploy it directly to AEM Cloud. Slingshot ensures everything is structured correctly, so the deployment process is smooth. Once it's live, we can go into AEM and add our new component to a page. Let's do that now. I drag and drop our new component onto the page. And look at that! It's fully functional with editable fields, dynamic content, and everything mapped exactly as we defined in the JSON contract.

In just minutes, we went from a set of image files to a live, editable website component. No manual coding, no long development cycles, just an AI-powered workflow that enables on-time releases every time. This is how Publicis Sapient is transforming MarTech modernization, cutting down build time, reducing tech debt, and making it easier than ever to create high-quality digital experiences. If you want to learn more, reach out for a live demo today.

SPEAKER:

Hi everyone! Yep, I was going to catch up, don't worry.