DocumentationGenStudioExtensibility Guide

Develop an App Builder app

Last update: Mon Sep 22 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

Developers extending GenStudio for Performance Marketing’s native capabilities use Adobe App Builder to create, submit, and deploy their extensible apps, or Add-ons.

recommendation-more-help

Prerequisites:

  • Node.js (version 20.x or higher)

  • npm (packaged with Node.js)

  • Adobe Developer command-line interface (CLI). To install it with npm, run: npm install -g @adobe/aio-cli

style
shade-box

App structure

GenStudio for Performance Marketing Add-ons are App Builder apps and contain the same basic components as other App Builder apps.

Build and configuration files

Key components of App Builder apps include these build and configuration files. This list in not inclusive of all build and configuration files.

  • README.md: Includes general information about the app.

  • TS app files:

    • package.json
    • package-lock.json
    • eslint
    • tsconfig
    • jest test up

  • App Builder config files:

    • app.config.yaml
    • ext.config.yaml: Configuration file for the Add-on.
    • app.config.yaml: Configuration file for the Add-on (includes defining your app as a GenStudio for Performance Marketing Add-on).
    • .aio
    • .env: Do not commit the .env file to source control.

Source code

- src/
    - genstudiopem/
        - web-src/
            - src/
                - components/
                - utils/
                - Constants.ts
                - index.tsx
                - index.css
                - utils.ts
        - index.html

Source code components

  • ExtensionRegistration.tsx: Defines the necessary APIs for the host app (GenStudio for Performance Marketing) to load and display the Add-on.

  • App.tsx: Main app component that defines routing to other components.

  • AdditionalContextDialog.tsx: Dialog component for displaying additional context Add-ons.

  • RightPanel.tsx: Dialog component for a validation Add-on.

  • Helper components: Includes ClaimsChecker.

Create an App Builder app from an existing app

You can use an example app to jump-start creation of your Add-on.

To create an App Builder app from an existing app:

  1. Download an example app from the GenStudio UIX Examples repository.

  2. From the App Builder Project workspace on Adobe Developer Console, select Download All to download Project details.

  3. Open your example app locally in your preferred Integrated Development Environment (IDE).

  4. Authenticate with the Adobe Developer command-line interface:

    code language-bash 
    aio login

  5. Download your JSON file, then create your app:

    code language-bash 
    aio app use '/path/to/your/downloaded/app-builder/project/details/config.json'

Add custom code to your Add-on

Define your Add-on code in AdditionalContextDialog.tsx and RightPanel.tsx files. These two files define pop-up appearance and behavior when users access the Add-on.

  • AdditionalContextDialog.tsx: Define this component if you plan to use the Add Context Add-on. Users interact with this component when clicking on Add-ons in the prompt drawer in Create.

  • RightPanel.tsx: Define this component if you plan to use the Right Panel Add-on (experience validation). Users interact with this component when clicking on the validation Add-on in the right panel in a Create experience draft.

Best practices for app development

Maintaining your development environment can help avoid app development and deployment errors:

  • If you’re using an older version of a sample app, upgrade the dependencies by re-installing them:

    code language-bash 
    rm -rf node_modules package-lock.json && npm i

  • Upgrade the GenStudio UIX SDK. Confirm that you’re using the most recent version of the GenStudio UIX SDK. Refer to the GenStudio UIX Example repository to learn how to use the most recent SDK changes.

Now you’re ready to Deploy your app

9e880c58-9ef6-4284-b91d-d4c2117410c7