AEM Edge Delivery Services + AI

-

 

AEM Edge Delivery Services + AI: The Future of Content Delivery

Introduction

AEM Edge Delivery Services (EDS) — formerly known as Project Franklin / Helix — is Adobe's modern, high-performance content delivery layer. It decouples content authoring from delivery, serving pages at the edge with near-perfect Lighthouse scores. When you combine EDS with AI, you unlock capabilities like real-time content personalization, AI-generated blocks, and intelligent A/B testing — all at the edge.

In this post, we'll walk through how to integrate AI into an EDS project with practical code examples.

How Edge Delivery Services Works (Quick Recap)

Author (Google Docs / SharePoint / AEM)
        ↓
AEM Pipeline (Franklin Bot)
        ↓
Content stored at Edge (Fastly CDN)
        ↓
User Request → Edge Worker → HTML served in <100ms

EDS pages are built with plain HTML/CSS/JS blocks. There's no traditional AEM dispatcher — content is served directly from the CDN edge.

        

1. AI-Powered Block Generation at the Edge

You can intercept page requests at the edge and inject AI-generated content into EDS blocks using Cloudflare Workers or Fastly Compute.

Example: AI Summary Block (Cloudflare Worker)

This worker fetches an EDS page, extracts the main content, summarizes it with an AI API, and injects the summary into the page response.

// cloudflare-worker/ai-summary.js
export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // Fetch the original EDS page
    const originalResponse = await fetch(request);
    let html = await originalResponse.text();

    // Only process article pages
    if (!url.pathname.startsWith('/articles/')) {
      return new Response(html, originalResponse);
    }

    // Extract text content (simplified)
    const bodyMatch = html.match(/<main[^>]*>([\s\S]*?)<\/main>/i);
    const bodyText = bodyMatch
      ? bodyMatch[1].replace(/<[^>]+>/g, ' ').trim().slice(0, 1500)
      : '';

    // Call AI API to summarize
    const summary = await generateSummary(bodyText, env.OPENAI_API_KEY);

    // Inject AI summary block before </main>
    const summaryBlock = `
      <div class="ai-summary block" data-block-name="ai-summary">
        <div>
          <div><strong>AI Summary</strong></div>
          <div>${summary}</div>
        </div>
      </div>`;

    html = html.replace('</main>', summaryBlock + '</main>');

    return new Response(html, {
      headers: {
        'Content-Type': 'text/html',
        'Cache-Control': 'public, max-age=3600',
        'X-AI-Enhanced': 'true'
      }
    });
  }
};

async function generateSummary(text, apiKey) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'Summarize the following content in 2-3 sentences.' },
        { role: 'user', content: text }
      ],
      max_tokens: 150
    })
  });

  const data = await response.json();
  return data.choices?.[0]?.message?.content || '';
}

EDS Block CSS for the AI Summary

/* blocks/ai-summary/ai-summary.css */
.ai-summary {
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
  border-left: 4px solid #4285f4;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  font-size: 0.95rem;
  color: #333;
}

.ai-summary strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4285f4;
  margin-bottom: 0.5rem;
}

2. AI Personalization at the Edge

Instead of personalizing in the browser (slow) or in AEM (coupled), you can personalize content at the edge based on user attributes from a cookie or request header.

Cloudflare Worker — Personalized Hero Block

// cloudflare-worker/personalize.js
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const segment = getUserSegment(request); // 'developer' | 'marketer' | 'executive'

    const originalResponse = await fetch(request);
    let html = await originalResponse.text();

    // Generate personalized headline with AI
    if (url.pathname === '/' && segment) {
      const headline = await personalizeHeadline(segment, env.OPENAI_API_KEY);
      // Replace default H1 with personalized one
      html = html.replace(
        /<h1[^>]*>.*?<\/h1>/i,
        `<h1 data-personalized="${segment}">${headline}</h1>`
      );
    }

    return new Response(html, {
      headers: { 'Content-Type': 'text/html' }
    });
  }
};

function getUserSegment(request) {
  const cookie = request.headers.get('Cookie') || '';
  const match = cookie.match(/user_segment=([^;]+)/);
  return match ? match[1] : 'default';
}

async function personalizeHeadline(segment, apiKey) {
  const prompts = {
    developer: 'Write a headline for AEM targeting software developers. Max 10 words.',
    marketer: 'Write a headline for AEM targeting digital marketers. Max 10 words.',
    executive: 'Write a headline for AEM targeting C-level executives. Max 10 words.'
  };

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: prompts[segment] }],
      max_tokens: 30
    })
  });

  const data = await response.json();
  return data.choices?.[0]?.message?.content?.trim() || 'Experience the Future of Content';
}

3. AI-Assisted Authoring in EDS (Google Docs Sidebar)

EDS authors work in Google Docs. You can build a Google Apps Script sidebar that lets authors generate content with AI without leaving their doc.

// Google Apps Script — Code.gs
function onOpen() {
  DocumentApp.getUi()
    .createMenu('✨ AI Assistant')
    .addItem('Generate Content', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setTitle('AI Content Assistant');
  DocumentApp.getUi().showSidebar(html);
}

function generateAndInsert(prompt) {
  const apiKey = PropertiesService.getScriptProperties()
    .getProperty('OPENAI_API_KEY');

  const payload = {
    model: 'gpt-4o',
    messages: [
      { role: 'system', content: 'You are an AEM content expert. Write in EDS block-friendly HTML.' },
      { role: 'user', content: prompt }
    ],
    max_tokens: 500
  };

  const options = {
    method: 'post',
    contentType: 'application/json',
    headers: { Authorization: `Bearer ${apiKey}` },
    payload: JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(
    'https://api.openai.com/v1/chat/completions', options);
  const data = JSON.parse(response.getContentText());
  const content = data.choices[0].message.content;

  // Insert generated content at cursor position
  const doc = DocumentApp.getActiveDocument();
  const cursor = doc.getCursor();
  if (cursor) {
    cursor.insertText(content);
  }

  return content;
}

<!-- Sidebar.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 10px; }
    textarea { width: 100%; height: 100px; margin-bottom: 8px; }
    button { background: #4285f4; color: white; border: none;
             padding: 8px 16px; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <h3>✨ AI Content Assistant</h3>
  <textarea id="prompt" placeholder="e.g. Write an intro about AEM Edge Delivery Services..."></textarea>
  <button onclick="generate()">Generate</button>
  <div id="status"></div>

  <script>
    function generate() {
      const prompt = document.getElementById('prompt').value;
      document.getElementById('status').textContent = 'Generating...';
      google.script.run
        .withSuccessHandler(() => {
          document.getElementById('status').textContent = '✅ Inserted into doc!';
        })
        .generateAndInsert(prompt);
    }
  </script>
</body>
</html>

4. Caching AI Responses at the Edge

AI API calls are expensive and slow. Cache responses at the edge using the Cache API in Cloudflare Workers:

async function getCachedOrFetchAI(cacheKey, prompt, apiKey) {
  const cache = caches.default;
  const cachedResponse = await cache.match(cacheKey);

  if (cachedResponse) {
    return await cachedResponse.text();
  }

  const aiContent = await callAIAPI(prompt, apiKey);

  // Cache for 1 hour
  const response = new Response(aiContent, {
    headers: { 'Cache-Control': 'public, max-age=3600' }
  });
  await cache.put(cacheKey, response.clone());

  return aiContent;
}

Key Takeaways

  • EDS + AI is most powerful when AI runs at the edge, not in the browser — reducing latency and protecting API keys.
  • Cache AI responses aggressively — same prompt = same response, so caching is safe and dramatically reduces cost.
  • Use Google Apps Script sidebars to bring AI to EDS authors without changing their authoring workflow.
  • Always add a data attribute (data-ai-enhanced, data-personalized) to AI-modified blocks for debugging and analytics.

Comments

Post a Comment

Popular Posts

Configure/Decoding AEM AuditLogs

-
Image
AEM Developers, Infrastructure Engineers / Dev-ops teams working in the financial domain regularly come across a challenge for event auditing in AEM. This helps in identifying most of the activities happening in AEM. Audit logs are a very effective way to debug the content issue & to know what all is happening in your environment and by whom. This article addresses in a simple way on how to enable the audit logs, its different ways, and how to understand the audit logs.  This article covers the following - How can we enable Audit logs in AEM. How can we read and understand the Audit logs/ tools to use it. Audit log on file system in crx-quickstart/logs folder.   Audit logs for User creation / Modification. How can you archive/purge the audit logs. How can we enable Audit logs in AEM?            By Default, the Audit logs are pre-configured in AEM, for a few basic operations of DAM and for all other operations of Pages ...
Read more

How to Increase Apache Request Per Second ?

-
Image
How to Increase Apache Request Per Second ? By default, Apache web server is configured to support 160 requests per second. As your website traffic increases, Apache will start dropping additional requests and this will spoil customer experience.  Here’s how to increase Apache requests per second. 1. Install MPM module We need to install MPM Apache module to be able to increase Apache requests per second. You can use mpm_worker or mpm_event module for this, instead of mpm_prefork module which consumes a lot of memory. You can easily install MPM module in Apache with following command For CentOS7/RHEL7 : Adjust /etc/httpd/conf.modules.d/00-mpm.conf Comment the line LoadModule mpm_prefork_module modules/mod_mpm_prefork.so by adding # in front of it. Uncomment the line LoadModule mpm_worker_module modules/mod_mpm_worker.so by removing # in front of it. For Ubuntu/Debian :  Use a2dismod / a2enmod to disable mpm_prefork and enable mpm_worker 2. Increase Max Connections in Apach...
Read more

AdobeDispatcherHacks ".statfile"

-
Image
AEM DISPATCHER STATFILE UNDERSTANDING & CACHE INVALIDATION:- AEM Developers, Infrastructure Engineers regularly come across a challenge on decoding the statfile and using it efficiently especially statfile becomes highly relevant in a multi-tenanted environment with different project teams controlling different sites. The article addresses in a simple way on how to understand the mechanisms of stat file and gives a detailed explanation of how it can be used in a multi-tenant environment model.  The image for your reference as a quick overview of the data flow, before we take a deep dive.  This article covers - 1 - When dispatcher serves the old version of the content. How to avoid it. 2- Cache invalidation mechanism. Assumption - If you are reading this article, I believe you would have a basic understanding of Dispatcher and it's configuration. Firstly let’s set the initial configuration for the cache invalidation section ...
Read more

how to clear dispatcher cache in aem ?

-
Image
How to clear dispatcher cache in aem ? As you may know, the Dispatcher cache in Adobe Experience Manager (AEM) is used to improve the performance of your website by caching static resources and pages. However, sometimes you may need to clear the cache to ensure that the latest content and changes are displayed on your website. In this blog post, we'll show you how to clear the Dispatcher cache in AEM.   This method will clear the entire Dispatcher cache, including all cached pages and resources. Keep in mind that clearing the cache may affect the performance of your website, as it may take some time to rebuild the cache. Clear Cache using the Dispatcher Flush Agent You can use the Dispatcher Flush Agent. Follow these steps:   Log in to your AEM instance and navigate to http://localhost:4502/etc/replication/agents.author.html . Click on the "Dispatcher Flush" agent to open the agent's configuration page. Clic...
Read more

How Does S3 works with AEM ?

-
Image
How Does S3 works with AEM  ? Accommodating a huge amount of assets in any content management platform is challenging. Adobe Experience Manager offers an integration with the Amazon S3 storage solution, allowing binary data for images, documents and videos to be stored in an S3 bucket. Amazon S3 is highly performant and offers nearly infinite storage capacity.   When talking about terabyte storage, performance is everything. The choices made during the planning and architecting phase can literally make or break the performance of a CMS system and the websites running on it.  Adobe Experience Manager offers a number of storage methods, each offering a different way of storing data. Each of these options has its strengths and weaknesses. In AEM storage the mechanisms are called Micro Kernels, or MK for short.  In this article we will look at the AEM with S3 data store. For the detailed steps for S3 configuration you can refer -  https://www.aemrules.com/...
Read more

AEM Security Headers

-
Image
Added Security in AEM via Headers:-  In design a robust architecture AEM Architects, Developers, Infrastructure Engineers regularly come across a challenge for adding the additional security in AEM.  In this article, we will understand the key security headers which can be used in webserver and give an additional layer of security for your Publish server and content.  I have used Apache webserver for all the examples.  This article covers -  1 - X-XSS protection  2 - HTTP Strick Transport Security 3 - X-Frame Option  4 - Content Security  1- X-XSS Protection:-  X-XSS-Protection header can prevent some level of XSS (cross-site-scripting ) attacks.  Configure the x-xss-protection header to 1 in your apache httpd.conf file or Vhost file if you have for all domains as applicable.   <IfModule mod_headers.c>   <FilesMatch "\.(htm|html)$">               ...
Read more

How to Sync HMAC in AEM ?

-
Image
Crypto Support in AEM (Syncing HMAC among AEM instances) AEM OOTB provides a feature where we can encrypt the secured and confidential data through OOTB AEM Crypto Support and store it in a code repository in the form of OSGi configuration. Crypto Support is based on keys (hmac and master files) which are unique for each AEM instance. Encrypted text generated for the same plain-text string on one AEM instance will be different from another instance. This can raise alarms in cases where we have the same OSGi configuration values shared among Author and Publish instances under the same topology. For e.g. /apps/project/config.prod/com.day.cq.db.dbservice.xml Here DB password for Default DB Service will be same across all Prod AEM instances. So, in order to make sure that the same encrypted value works on all Prod instances, we will have to sync hmac and master files among Prod Author and Publish instances. Vital Points to know before HMAC SYNC  Sync of HMAC/keys will break the AEM SSL...
Read more

OakAccess0000: Access denied

-
Image
ERROR :-   OakAccess0000: Access denied We often observe while doing the AEM development or in live running environment we get the error code  OakAccess0000 , especially while running a workflow or any asset upload. This issue disrupts normal operation. As content authors are unable to perform essential task like uploading or managing content, leading to business impact.   This impact the business as content author are unable to upload any content.  Error stack trace :- Javax.jcr.AccessDeniedException: OakAccess0000: Access denied  at org.apache.jackrabbit.oak.api.CommitFailedException.asRepositoryException(CommitFailedException.java:232) [org.apache.jackrabbit.oak-api:1.10.6]  at org.apache.jackrabbit.oak.api.CommitFailedException.asRepositoryException(CommitFailedException.java:213) [org.apache.jackrabbit.oak-api:1.10.6]  at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.newRepositoryException(SessionDelegate.java:669) [org.apache...
Read more

AEM ACL and how they are evaluated

-
Image
ACL's and how they are evaluated ? AEM Developers, Infrastructure Engineers / Dev-ops teams working in any domain regularly come across a challenge for understanding the ACL & its evaluation mechanism.  Adobe Experience Manager is designed to cater for content authoring of multiple sites by multiple content authors. Naturally, this process needs to be controlled by strict Access Control Lists (ACLs) to manage. AEM WCM uses Access Control Lists (ACLs) to organise the permissions being applied to the various pages. This article addresses in a simple way on how to understand the ACL's , its different ways,  This article covers the following - How can we read and understand the ACL.  Evaluation of user permissions.  Concurrent Permission on ACL Access Control Lists are made up of the individual permissions and are used to determine the order in which these permissions are actually applied. The list is formed according to the hierarchy of the pages under consideration...
Read more

Dispatcher flush from AEM UI

-
Image
How to Delete Dispatcher cache without logging into the Dispatcher servers? Our Authoring team faces day to day challenges while deleting/flush the dispatcher cache. when the changes are not visible on server. They have to be depended on the IT operations/Dev ops teams to do the same. Which some time get very much time consuming for a small work.  In this article we will see it can be configure and used by Author UI itself.  This will allow  AEM authors (or “super authors”) to flush parts of the dispatcher cache manually without the involvement of IT Operations. How to Use 1. Log in to AEM Author 2. Download the ACS commons tool from  ACS Commons Official page 3. Install the downloaded package via aem package manager.   4. Make sure you create the dispatcher flush agents on Author for all Dispatchers. from http://<<host:port>>/miscadmin#/etc/replication/agents.author, check the NOTE's part at the end of page. 5. Navigate to Tools 6. Under the ac...
Read more