style
content

Developing with AI Tools

AI coding tools such as Claude Code, Cursor, Codex, Gemini, GitHub Copilot, or Zed and the models they employ generally have good working knowledge of the core technologies that power AEM. As we use semantic HTML, Vanilla JavaScript, and framework-less CSS, we benefit from the largest possible training set.

While there are some specific ways we use those technologies, much of that can be inferred from your project codebase (e.g. aem.js), allowing developers to use AI coding agents effectively without specialized tooling.

This guide is intended to cover ways you can enhance that experience to get the most out of these tools and to make your AEM “vibe coding” sessions as productive as possible.

Modern coding agents have access to web search, but they will often mix up the Java/JCR/OSGi-based technology stack for AEM Sites as a Cloud Service with the lightweight HTML/CSS/JavaScript stack of Edge Delivery Services in Adobe Experience Manager Sites as a Cloud Service when you ask about AEM. When asking about Edge Delivery Services, you often get information about Cloudflare's, Akamai's or Fastly's Edge Compute and CDN infrastructure, and searching for EDS will bring up medical information.

The best way to prevent that is to specify "search the www.aem.live website".

Without Context

> Help me find information about EDS.

⏺ I'll help you find information about EDS. Let me search for relevant
  information.

⏺ Web Search("EDS Ehlers-Danlos Syndrome medical condition information")

╭─────────────────────────────────────────────────────────────────────────────────╮
│ Tool use                                                                        │
│                                                                                 │
│   Web Search("EDS Ehlers-Danlos Syndrome medical condition information")        │
│   Claude wants to search the web for: EDS Ehlers-Danlos Syndrome medical        │
│   condition information                                                         │
│                                                                                 │
│ Do you want to proceed?                                                         │
│ ❯ 1. Yes                                                                        │
│  2. Yes, and don't ask again for Web Search commands in                         │
│  /private/tmp/new-project                                                       │
│   3. No, and tell Claude what to do differently (esc)                           │
│                                                                                 │
╰─────────────────────────────────────────────────────────────────────────────────╯

With Context

> Help me find information about Edge Delivery. Search www.aem.live

⏺ I'll help you search for information about Edge Delivery on
  http://www.aem.live.

⏺ Fetch(https://www.aem.live)
  ⎿  Fetching…

╭─────────────────────────────────────────────────────────────────────────────────╮
│ Fetch                                                                           │
│                                                                                 │
│   https://www.aem.live                                                          │
│   Claude wants to fetch content from www.aem.live                               │
│                                                                                 │
│ Do you want to allow Claude to fetch this content?                              │
│ ❯ 1. Yes                                                                        │
│   2. Yes, and don't ask again for www.aem.live                                  │
│   3. No, and tell Claude what to do differently (esc)                           │
│                                                                                 │
╰─────────────────────────────────────────────────────────────────────────────────╯

Establishing Context

We publish an llms.txt file which provides an overview of AEM and links to key documentation in a format optimized for AI consumption. Sadly, most agents don't refer to it proactively, so you should mention this file in a rules file or your prompt allows the agent to quickly include key documentation and APIs in its context to produce better results. Many tools also allow you to index custom documentation, in which case you can add http://www.aem.live/docs/.

You may also consider adding an AGENTS.md (note that Claude Code refers to this file as CLAUDE.md) to your project. You can use this AEM Boilerplate example as a starting point, but don’t be shy about adjusting it to fit your specific project.

Helping the Agents see

In many cases, your coding agent will make assumptions about what your site looks like without having the ability to actually verify this. You can help the agent in multiple ways:

Useful Tools for AI Agents

The best AI agents have received massive reinforcement learning on using a set of command line tools that can speed up their development workflow, but which you often don't have pre-installed on your system. Consider installing them, so that your AI agent has more capable tools at their disposal.

Ask your AI agent if they are installed on your machine and tell them to install if not.

Request Reviews from AI

The AEM development flow is centered around GitHub and Pull Requests. This makes it an excellent match for AI code reviews that work both for humans and AI-generated pull requests (don't worry, AI code reviewers don't give other AIs a free LGTM-pass).

Model Context Protocol

The Model Context Protocol (MCP) provides extensibility for AI agents and almost all AI agents support it. You can try these MCP tools that work well with AEM. Remember that MCP tools will fill up the available context window, so you should disable tools that you do not use.

> /context
  ⎿
     ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛀ ⛀ ⛀
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   Context Usage
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   claude-sonnet-4-20250514 • 17k/200k tokens (8%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛁ System prompt: 3.0k tokens (1.5%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛁ System tools: 11.4k tokens (5.7%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛁ MCP tools: 1.3k tokens (0.7%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛁ Memory files: 705 tokens (0.4%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛁ Messages: 91 tokens (0.0%)
     ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶   ⛶ Free space: 183.4k (91.7%)

     MCP tools · /mcp
     └ mcp__context7__resolve-library-id (context7): 691 tokens
     └ mcp__context7__get-library-docs (context7): 652 tokens

     Memory files · /memory
     └ User (/Users/trieloff/.claude/CLAUDE.md): 705 tokens

Context7

The Context7 MCP Server gives your agents access to hundreds of sites of indexed API documentation including for Adobe Experience Manager.

Helix MCP Server

The (unofficial) Helix MCP Server provides tools and prompts to make your agentic development with AEM easier including docs search, block starters, and administrative tools. Please see the Readme for information on tools and usage.

Playwright

Microsoft's Playwright MCP Server browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

Browser MCP

The opposite approach is taken by Browser MCP, it installs as a Chrome extension, allowing your AI coding agent to remote-control your web browser and take screenshots.