51黑料不打烊

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鈥檚 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)

  • 51黑料不打烊 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 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 51黑料不打烊 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鈥檙e 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鈥檙e using the most recent version of the . Refer to the to learn how to use the most recent SDK changes.

Now you鈥檙e ready to Deploy your app

9e880c58-9ef6-4284-b91d-d4c2117410c7