[Music] [Sunder Thyagarajan] Hello, everyone. Welcome to our session, A Developer's Guide: Extending Adobe GenStudio for Performance Marketing. I am Sunder Thyagarajan and my colleague Jamie Delbick will be presenting the demo today.
We are responsible for building the extensibility framework that enables partners, ISVs, and customers to succeed in adopting GenStudio for Performance Marketing to suit their content supply chain needs.
Here is what you will learn today, how Adobe GenStudio for Performance Marketing can be extended to address domain-specific content supply chain requirements. Subsequently, you will gain insights into using Adobe App Builder to build unique experiences and solutions for your business. Finally, you will understand the end-to-end process to create, build, and publish a UI extension within Adobe GenStudio for Performance Marketing. By the end of this session, you'll be equipped with the knowledge and tools to extend Adobe GenStudio and enhance your performance marketing capabilities.
Let's explore the importance of extensibility through a use case.
Let us consider a pharmaceutical company has implemented GenStudio for Performance Marketing to enable their marketeers to send product-focused marketing emails to healthcare professionals and hospitals.
These emails contain critical drug information such as side effects, dosage instructions, and efficacy details.
The statements within these emails known as Claims, must be accurate and often require FDA approval. Ensuring compliance with regulatory standards is essential before sending these communications.
There are challenges to address the desired regulatory checks. While GenStudio for Performance Marketing facilitates rapid email creation, the responsibility for building domain-specific content and implementing necessary compliance checks such as Medical Legal Regulatory Validations fall on domain experts who are best equipped to handle this with their expertise.
Not to worry. GenStudio for Performance Marketing was designed with extensibility in mind. By leveraging Adobe App Builder, domain experts can integrate their own compliance check processes. This approach empowers organizations to seamlessly perform regulatory validations before email distribution, ensuring complaints without disrupting workflows.
UI Extensions. Let us take a look at the extension points published by the product to tackle the above use case. Our initial focus is on the additional context on the Canvas Model Extension Point. Customers and partners can develop Adobe App Builder applications that allow marketeers to extend the generation context within the prompt drawer. For example, a Claims App Extension could empower marketeers to filter and select approved claims for a drug like Vitaelis during email generation, thus extending the available context at this extension point.
The extension built is loaded in a modal to display the claims for selection.
Claims are loaded from external system. Typically, the claims libraries are fetched from a customer data store. Claims are then added to generation context during email generation. In addition to being on brand targeted to the selected persona adhering to product guidelines and the user prompt, the generated email will also be inspired by the chosen claims. Once the emails are generated, they must undergo thorough complaints and regulatory checks before distribution. These checks ensure adherence to all applicable rules and guidelines.
Only after successful completion of these checks, can an email be sent. The Adobe GenStudio for Performance Marketing product team provides an extension point on the RightPanel specifically for compliance checks on generated experiences. Customers and partners can build extensions using Adobe App Builder to leverage this extension point and validate generated email experiences directly within the RightPanel. For example, an Adobe App Builder extension can validate the email against the claims libraries in the customer's data store, providing real-time feedback to marketeers. This feedback allows marketeers to quickly identify and correct any issues with the claims, ensuring that only complaint and accurate emails are sent. Let us now explore the distribution of responsibility between the Adobe GenStudio product team and partners, ISVs, and customers.
Adobe GenStudio product team publish extension points to empower customers to extend the product. Partners, ISVs, and customers build App Builder apps implementing the published extension points. Partners can then publish their extensions to exchange.adobe.com making them available to multiple customers.
Customers also have the option to create extensions tailored to their specific needs and publish them privately. A single application can implement multiple extension points. Typically, an application is designed to address a comprehensive use case, such as the Medical Legal Regulatory scenario described earlier.
Let us look at how extensions work.
The development process begins with partners or customers cloning the reference application. They then implement their domain-specific extensions. Building and testing are performed using the Adobe Developer Console. Finally, the completed application is published either privately or publicly on exchange.adobe.com.
A sysadmin on the IMS organization then installs the Adobe App Builder app from exchange.adobe.com or approves a privately published Adobe App Builder app. Adobe App Builder apps are installed to your company's IMS organization. Once a marketeer in that organization logs into their GenStudio for Performance Marketing platform, the product communicates to the Exchange Registry on available extension apps for current IMS organization and display them at their respective extension point locations.
When marketeer interacts with the app, it renders details based on the logic written on the single-page application and server side runtime actions, which communicate with customer data store.
Enough of theory. I will now hand it over to Jamie for the demo. [Jamie Delbick] Let's dive into a demo on how to create, build, and publish an Adobe GenStudio for Performance Marketing UI Extension. For this demo, I will create an app to enhance the GenStudio create prompt with medical claims and validate that these claims are used in an experience as described by Sunder. Let's pretend I work at the company Celestix, a biosciences company. I'm creating an ad for a new drug, Vitaelis, which cures Chronexa, a fictional condition. Let's head over to GenStudio to an experience template I created for Celestix.
Let's go ahead and create a new experience.
There are two parts to the GenStudio UI extension. The first is the add context add-on, which appears in GenStudio when a user creates an experience and opens a prompter. You can see my extension here listed as MLR for Celestix. Let's go ahead and add the brand, persona, and product first. We'll choose Celestix, the persona, healthcare professionals, and the product, Vitaelis. Let's also go ahead and add a prompt.
Now let's go ahead and open up the context app.
This opens up my customer's app in an iframe. In the case of Celestix Biosciences, this displays a drop-down for choosing a claims library. Let's go ahead and pick the Efficacy Claims.
After picking a claims library, I can choose a few different claims to add to the prompt. I'll choose the first two.
Pressing Select sends a message from my app to the host app GenStudio, triggering the addition to the prompt. I can see that these have been added by the two here.
Now let's go ahead and generate these experiences.
I will expect these experiences to contain the two claims that I added to the product.
As you can see, these generated experiences do contain the claims that I that I had added using my context add-on extension.
The next extension point is over here on the right using this icon.
This opens up my app for validating the claims. I'll open up the app and select Efficacy Claims, the same that I added to the prompt.
Next, I'll choose Experience 1 to go ahead and check the claims.
My app accesses these experiences through the GenStudio UI Extensions API, defined in the GenStudio SDK, which is open sourced and ready for customers to use. Let's run the Claims Check.
As expected, there are no violations here.
Now just to show how the app we made works a little bit more in the use case of a customer, I'll go over to a pre-created experience that violates some claims. As you can see, Experience 1 violates two claims. Vitaelis is clinically proven to reduce joint inflammation by up to 50%, not 70%. Additionally, our drug is a little bit better. It actually cures pain associated with Chronexa in two weeks, not eight.
Let's go ahead and run it through our claims checker again to see if our app can catch this.
As expected, it did catch that Experience 1 did violate both of those claims. At this point, I can go ahead and edit the draft to contain the proper formed claims. This use case is just the tip of the iceberg. With GenStudio UI extensibility, customers can enhance the prompt in other ways and validate other aspects like legal claims.
Now that you've seen how this works, let's see how this is made.
The first step in creating a GenStudio UI extension is to create a project in Developer Console. Here is my pre-created project. When creating a project, select Create Project from Template and choose App Builder. As you can see, my project was created with the App Builder Template and you can see that listed here. Additionally, make sure to keep the button selected for runtime enabled so that the project comes with runtime.
For Celestix, for example, we may want to use a runtime action to access the company's external medical claims database.
In my project, I'm going to go to the workspace I'll be working in, Production, and download the project details.
I need this later when developing the app to be able to switch to this environment for deployment.
Now that I have the project and its details, I will show a few open source repositories that we have built to help customers and partners develop their app.
The first is the genstudio-uix-examples repo, which contains example projects, including one similar to my demo. Cloning this repo is the starting point for anyone creating a GenStudio UI extension. It comes with all the necessary tools and wiring so that customers and partners can focus on defining two components, the App Context add-on for enhancing the prompt and the RightPanel for validating experiences.
Next, I'd like to show the genstudio-uix-sdk which is used by all reference apps.
This encapsulates the API contract between GenStudio and the AIO app, vastly simplifying the integration. Now that I have shown these two repos, let's start developing the app.
Let's go to my IDE here.
Here is my project created from one of the reference apps in the open source repo.
Before we get into the code, there are a few prerequisites for development.
First, you'll need to install NPM.
After installing NPM, you'll need to run npm install to install all the dependencies in package.json.
Another alternative is you could use npm ci.
I've already done that, so I won't show that today. Second, you'll need to have the AIO CLI installed globally. I have already done this also. After installing the AIO CLI locally, you'll need to log in using aio login.
I have also already done that so I won't be showing it. Next, I'll use aio app use to switch to the context of the project I created in Developer Console.
If you've logged in before to a different project, it might ask you to overwrite these files.
Now that I have all the prerequisites and I am in the correct org, project, and workspace, I can run and build my app. But before running the app, let's review some of its components. There are the typical configuration and dependency management files found in a TypeScript app such as the package.json, jest.test.setup, TypeScript config, .eslint, .gitignore, and others. Additionally, there are some App Builder specific files that tell AIO CLI what to build, run, and deploy.
Let's first open up the app.config.yaml. This defines the app as a GenStudio extension.
Another important file is the .aio file which contains the project details we downloaded and installed using AIO App Use.
If you want to find out more about the specifics of the AIO app, please refer to the App Builder Development Guide. Now let's move to the actual front end code which lives in the web-src folder.
Let's go to the ExtensionRegistration component.
This contains all the methods required for GenStudio to display. This file, although complex, is part of our reference app, so customers only need to define a few UI components that are referenced here. There are two key components that we expect customers to define. The first is the additional context dialogue, which is loaded in here, which maps directly to this component here of the same name. It gets mapped to that component using this route in the App.tsx. Again, our reference apps all come with this preloaded, so we expect this to be pretty easy for a customer to start working with.
For Celestix, this dialog lets users pick claims from the internal claims library to add additional context to the generation context.
The second component I will show is the RightPanel, which is loaded in here and maps directly to this component of the same name.
This handles claims validation for a GenStudio experience draft. Additionally, I've created a few other helper files, the ClaimsChecker component and the claimsValidation, utility, which basically runs a simplified version of what a customer may have led for validation.
Now that we're familiar with the app and some of the pieces I've built, let's get it running.
Let's first run aio app run.
This doesn't show the app since we expect it to run in an iframe, but it will check for compilation errors, so it's still good to do before deploy. Let's copy this and open it in a browser.
As you can see, the app runs fine.
Now let's run aio app build to build the app.
Now that that worked, let's run aio app deploy.
This deploys the app under our project, but it doesn't actually make it appear in GenStudio yet. To show it in GenStudio, I will have to publish the app either publicly or privately. But before publishing, I can preview the app in the UI using a URL parameter.
Let's copy this result here, the resulted URL of our deployed app, and go to GenStudio.
I go to GenStudio and I add our deployed URL as a parameter by basically adding ext= the URL to our action.
Now let's reload this draft.
Now when I open my draft, I see my validation extension working as expected.
The prompt drawer, let's take a look and see, it also reflects our changes.
It looks good. We can select claims.
Since everything looks good, I'm ready to publish.
Publishing can happen either publicly or privately. However, after publishing privately, I can't use the same project for public publishing. Instead, I must create a new project. Since my project that I used today has already been published privately, I will be going through that flow today.
I go back to the project in Developer Console and I go to the Workspace and then I click on the Approval tab here.
Then you'll be asked to fill in some details about the app, like the app details, an app icon, and a note for the reviewers. Since I've submitted this before, it's already pre-filled out. So next, I submit a request.
After submitting, a sysadmin in the org must approve it. Since I am a sysadmin, I can go ahead and approve it through Adobe Exchange. Let's go ahead and refresh, and we should see our request.
I'll go ahead and approve the request for our app.
Now that my app is approved, I can go to GenStudio and see it listed under Extensions.
I won't show that now as I've already shown it in the earlier demo.
Public publishing follows a very similar process but requires a submission to be approved by the App Builder team. Now that I have walked you through the steps for developing, deploying, and publishing an app, you are ready to build your own GenStudio UI extension.
[Woman] Now it's time for you guys to build your own GenStudio for Performance Marketing UI extensions to unlock your unique use cases.
Here are links to our documentation, our SDK, and our reference apps to get you started.
You might be wondering how you get App Builder. Customers who purchase GenStudio for Performance Marketing get one pack of App Builder included with their license.
We are excited to announce that a number of tech and solution partners are actively building extensions to support compliance use cases in the pharma and FSI space.
In addition, many partners are working to extend GenStudio in areas like DAM integrations and export of approved experiences. We can't wait to see what you will build. Thanks for joining, and let's get developing. [Music]
