ÃÛ¶¹ÊÓƵ

DocumentationGenStudioExtensibility Guide

Develop an App Builder app

Last update: Thu Mar 20 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

Developers extending GenStudio for Performance Marketing’s native capabilities use 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)

  • ÃÛ¶¹ÊÓƵ Developer command-line interface (CLI). To install: 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 that the host app (GenStudio for Performance Marketing) needs 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 repository.

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

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

  4. Authenticate with the ÃÛ¶¹ÊÓƵ 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

You 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.

You are now ready to Deploy your app

Best practices for app development

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

  • If you are 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 are using the most recent version of the . Refer to the to learn how to use the most recent SDK changes.

9e880c58-9ef6-4284-b91d-d4c2117410c7