Before adding AI, you need to understand what makes EDS different from classic AEM:<\/p>\n\n\n\n
- \n
- Content lives in Google Docs or SharePoint<\/strong> – authors write there, not in the AEM Sites editor<\/li>\n\n\n\n
- Franklin blocks<\/strong> (now called EDS blocks) – These are the rendering unit plain HTML\/CSS\/JS, no HTL, no Sling<\/li>\n\n\n\n
- Delivery happens at the edge<\/strong> via Fastly CDN<\/strong> – your origin is main <repo><org>.aem.live<\/li>\n\n\n\n
- JavaScript runs in the browser<\/strong> or in edge workers<\/strong> – no Java, no OSGi<\/li>\n<\/ul>\n\n\n\n
This matters for AI integration because your extension points are different: you are writing vanilla JS, working with fetch-based APIs, and potentially deploying edge functions rather than OSGi services.<\/p>\n\n\n\n
Use Case 1 : AI-Powered Block Generation at the Edge<\/strong><\/p>\n\n\n\n
The Problem<\/strong><\/p>\n\n\n\n
Authors create blocks by writing structured content in Google Docs. Complex blocks, comparison tables, FAQ accordions, product summaries still require hand-crafted markup. AI can generate that markup from natural language.<\/p>\n\n\n\n
The Approach<\/strong><\/p>\n\n\n\n
Create a custom block called ai-block that accepts a plain-text prompt from the document and calls an LLM at render time. Note the use of DOMPurify to sanitise AI output before injecting it into the DOM<\/p>\n\n\n\n
\/\/ blocks\/ai-block\/ai-block.js<\/p>\n\n\n\n
import DOMPurify from 'dompurify';\n\n\u00a0export default async function decorate(block) {\n\u00a0 const prompt = block.querySelector('p')?.textContent?.trim();\n\u00a0 if (!prompt) return;\n\n\u00a0\u00a0 const response = await fetch('\/api\/ai-generate', {\n\u00a0\u00a0\u00a0 method: 'POST',\n\u00a0\u00a0\u00a0 headers: { 'Content-Type': 'application\/json' },\n\u00a0\u00a0\u00a0 body: JSON.stringify({ prompt }),\n\u00a0 });\n\n\u00a0\u00a0 const { html } = await response.json();\n\u00a0\u00a0 \/\/ Sanitise AI output before DOM injection to prevent XSS\n\u00a0 block.innerHTML = DOMPurify.sanitize(html);\n}<\/code><\/pre>\n\n\n\nYour \/api\/ai-generate endpoint (deployed as an AEM App Builder action) calls the LLM server-side so your API key never reaches the browser:<\/p>\n\n\n\n
\/\/ api\/ai-generate\/index.js (App Builder action)<\/p>\n\n\n\n
const Anthropic = require('@anthropic-ai\/sdk');\n\nasync function main(params) {\n\u00a0 const client = new Anthropic({ apiKey: params.ANTHROPIC_API_KEY });\n\u00a0 const message = await client.messages.create({\n\u00a0\u00a0\u00a0 model: 'claude-sonnet-4-6',\n\u00a0\u00a0\u00a0 max_tokens: 1024,\n\u00a0\u00a0\u00a0 messages: [{\n\u00a0\u00a0\u00a0\u00a0\u00a0 role: 'user',\n\u00a0\u00a0\u00a0\u00a0\u00a0 content: `Generate semantic HTML for the following request.\n Return only the HTML, no explanation.\\n\\n${params.prompt}`,\n\u00a0\u00a0\u00a0 }],\n\u00a0 });\n\u00a0 return { html: message.content[0].text };\n}<\/code><\/pre>\n\n\n\nUse Case 2 : Automatic Metadata Enrichment via Sidekick Plugin<\/strong><\/p>\n\n\n\n
AEM Sidekick is the browser extension authors use to preview and publish EDS pages. You can build a custom Sidekick plugin that runs an AI pass before publishing automatically generating SEO metadata, Open Graph tags, and structured data.<\/p>\n\n\n\n
\/\/ tools\/sidekick\/plugins\/ai-seo.js<\/p>\n\n\n\n
\/\/ Wait for the Sidekick custom element to be available\nconst sidekick = document.querySelector('helix-sidekick, aem-sidekick');\n\nsidekick.addEventListener('custom:ai-seo', async () => {\n\n\u00a0 const pageText = document.body.innerText.slice(0, 3000);\n\u00a0 const res = await fetch('\/api\/ai-metadata', {\n\u00a0\u00a0\u00a0 method: 'POST',\n\u00a0\u00a0\u00a0 headers: { 'Content-Type': 'application\/json' },\n\u00a0\u00a0\u00a0 body: JSON.stringify({ content: pageText }),\n\u00a0 });\n\u00a0 const { title, description } = await res.json();\n\n\u00a0 \/\/ Render result inside your plugin panel UI\n\u00a0 document.getElementById('ai-seo-result').innerHTML = `\n\u00a0\u00a0\u00a0 <p><strong>Title:<\/strong> ${title}<\/p>\n\u00a0\u00a0\u00a0 <p><strong>Description:<\/strong> ${description}<\/p>\n\u00a0 `;\n});<\/code><\/pre>\n\n\n\nRegister the plugin in your tools\/sidekick\/config.json. The plugin loads as an iframe panel inside the Sidekick:<\/p>\n\n\n\n
{\n\u00a0 \"plugins\": [{\n\u00a0\u00a0\u00a0 \"id\": \"ai-seo\",\n\u00a0\u00a0\u00a0 \"title\": \"AI SEO\",\n\u00a0\u00a0\u00a0 \"url\": \"\/tools\/sidekick\/plugins\/ai-seo.html\",\n\u00a0\u00a0\u00a0 \"isPalette\": true,\n\u00a0\u00a0\u00a0 \"paletteRect\": \"top: 50px; right: 20px; width: 300px;\"\n\u00a0 }]\n}<\/code><\/pre>\n\n\n\nUse Case 3: Edge Worker Personalization<\/strong><\/p>\n\n\n\n
EDS pages are static HTML at the CDN layer. To personalize without sacrificing performance, use a Cloudflare Worker with HTMLRewriter to safely inject AI-generated content<\/p>\n\n\n\n
based on request context geo, device, UTM params, or a cookie-based persona.<\/p>\n\n\n\n
\/\/ cloudflare-worker\/personalize.js<\/p>\n\n\n\n
class CTARewriter {\n\u00a0 constructor(newText) { this.newText = newText; }\n\u00a0 element(el) { el.setInnerContent(this.newText); }\n}\n\nexport default {\n\nasync fetch(request, env) {\n\u00a0\u00a0\u00a0 const origin = await fetch(request);\n\u00a0\u00a0\u00a0 const country = request.cf?.country ?? 'US';\n\u00a0\u00a0\u00a0 const persona = request.headers.get('x-persona') ?? 'default';\n\u00a0\u00a0\u00a0 const aiRes = await fetch(env.AI_API_URL, {\n\u00a0\u00a0\u00a0\u00a0\u00a0 method: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0 headers: { 'Content-Type': 'application\/json' },\n\u00a0\u00a0\u00a0\u00a0\u00a0 body: JSON.stringify({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 prompt: `Rewrite this CTA for a ${persona} in ${country}: \"Get started today\"`,\n\u00a0\u00a0\u00a0\u00a0\u00a0 }),\n\u00a0\u00a0\u00a0 });\n\n\u00a0\u00a0\u00a0 const { text } = await aiRes.json();\n\u00a0\u00a0\u00a0 \/\/ HTMLRewriter streams and transforms safely\n\u00a0\u00a0\u00a0 return new HTMLRewriter()\n\u00a0\u00a0\u00a0\u00a0\u00a0 .on('#hero-cta', new CTARewriter(text))\n\u00a0\u00a0\u00a0\u00a0\u00a0 .transform(origin);\n\u00a0 },\n};<\/code><\/pre>\n\n\n\nUse Case 4 \u2014 Smart Tags via Adobe Sensei<\/strong><\/p>\n\n\n\n
Smart Tags setup requires the Adobe Developer Console and Smart Content Service API integration as it is not a settings toggle.<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Adobe Sensei’s Smart Content Service automatically tags AEM Assets with relevant metadata. The setup requires integration via the Adobe Developer Console:<\/p>\n\n\n\n
- \n
- Create a project in the Adobe Developer Console and add the Smart Content Service API<\/li>\n\n\n\n
- Generate a service account (JWT) credential and note the API key, client secret, and technical account ID<\/li>\n\n\n\n
- In AEM as a Cloud Service, navigate to Tools -> Cloud Services -> Smart Tags and configure the Adobe IMS integration using your Developer Console credentials<\/li>\n\n\n\n
- Run Tools -> Assets -> Smart Tags Training with a representative set of tagged assets to calibrate the model to your taxonomy<\/li>\n\n\n\n
- Once trained, Smart Tags apply automatically on every new asset upload<\/li>\n<\/ol>\n\n\n\n
Smart Tags training requires a minimum of 30 tagged assets per tag to achieve reliable auto-tagging. Plan a tagging sprint before enabling this in production.<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Architectural Diagram:<\/strong><\/p>\n\n\n\n
![\"AEM](\"https:\/\/i0.wp.com\/onwardpath.com\/intelligence\/wp-content\/uploads\/2026\/05\/aem-edge-delivery-ai-diagram.png?resize=1024%2C856&ssl=1\")
- Franklin blocks<\/strong> (now called EDS blocks) – These are the rendering unit plain HTML\/CSS\/JS, no HTL, no Sling<\/li>\n\n\n\n