AEM UI Extensions

Adobe App Builder project implementing AEM UI Extensions for:

• Universal Editor (UE) – Content Fragments panel, Presence panel
• Experience Hub (AEM Launchpad) – Active Pages widget

Built with React, Adobe UIX SDK, and App Builder actions.

---

Extensions

Extension Point	Description
universal-editor-ui-1	UE Properties Rail panels: Content Fragments referrers, Presence (who’s editing), Settings
aem-launchpad-1	Experience Hub dashboard widget: Active Pages (pages being edited in UE)

---

Prerequisites

• Node.js 18+
• Adobe I/O CLI: npm install -g @adobe/aio-cli
• Supabase project (for Presence and Active Pages)
• Access to AEM as a Cloud Service author and Experience Hub

---

Setup

1. Clone and install

git clone https://github.com/znikolovski/agentic-how-to.git
cd agentic-how-to
npm install

2. Configure .env

Create .env in the project root. Do not commit this file.

# Generate Adobe I/O config (optional, if starting fresh)
aio app use

Add or verify these variables:

# Adobe I/O Runtime
AIO_runtime_auth=<your-runtime-auth>
AIO_runtime_namespace=<your-namespace>
AIO_runtime_apihost=https://adobeioruntime.net

# Supabase (for Presence and Active Pages)
SUPABASE_URL=https://<your-project>.supabase.co
SUPABASE_ANON_KEY=<your-anon-key>
SUPABASE_SERVICE_ROLE_KEY=<your-service-role-key>

Supabase is used for presence tracking and the Active Pages widget. Run the migrations in scripts/ against your project.

---

Local development

Run all extensions

aio app run

UI is served on localhost:9080; actions run on Adobe I/O Runtime.

Run a single extension (recommended)

# Universal Editor extension
aio app dev -e universal-editor/ui/1

# Experience Hub / Active Pages
aio app dev -e aem/launchpad/1

This runs both the UI and actions locally. See aio app dev vs aio app run.

Testing extensions

• Universal Editor: Open your AEM site in UE, add dev URL to the extension (e.g. https://localhost:9080 with dev mode).
• Experience Hub: Load from Experience Hub with ?devMode=true&ext=https://localhost:9080 in the URL.

---

Build and deploy

# Build all extensions
aio app build

# Deploy to Adobe I/O
aio app deploy

# Undeploy
aio app undeploy

After deploy, use the Extension Manager to register the deployed extension URL.

---

Registering extensions

Universal Editor

1. Deploy the app (aio app deploy).
2. In AEM, go to Tools → General → Configuration Browser.
3. Create or select a context for your site.
4. Add the extension URL from the deploy output to the UE configuration.

Experience Hub (AEM Launchpad)

1. Deploy the app.
2. Open Extension Manager.
3. Register a Bring Your Own (BYO) extension with your Extension URL.
4. Customize the dashboard and add the “Active Pages” widget.

---

Project structure

├── app.config.yaml          # Extension point includes
├── src/
│   ├── universal-editor-ui-1/   # UE extension
│   │   ├── ext.config.yaml
│   │   ├── actions/             # get-fragment-referrers, presence, etc.
│   │   └── web-src/
│   └── aem-launchpad-1/         # Experience Hub extension
│       ├── ext.config.yaml
│       ├── actions/              # get-all-presence, get-page-metadata
│       └── web-src/
├── scripts/                  # Supabase migrations
├── docs/                     # Plans and knowledge base
└── .skills/                  # Agent skills (for AI-assisted development)

---

Testing

# Unit tests
aio app test

# E2E tests
aio app test --e2e

---

Documentation

• AGENTS.md – Agent workflow and coding rules
• docs/knowledge-base.md – UE, Experience Hub, and App Builder patterns
• Adobe App Builder
• AEM UI Extensibility
• Universal Editor Extensibility