diff --git a/astro.redirects.mjs b/astro.redirects.mjs index f962a6c95..bc2564d1f 100644 --- a/astro.redirects.mjs +++ b/astro.redirects.mjs @@ -227,8 +227,13 @@ export function generateRedirects(basePath) { '/resources/product-discovery-diagrams': `${basePath}/dropins/product-discovery`, '/merchants/quick-start/visual-editor': `${basePath}/merchants/quick-start/universal-editor`, '/setup/aem-assets-integration': `${basePath}/merchants/quick-start/universal-editor`, - '/boilerplate/ai-agent-skills': `${basePath}/ai/ai-agent-skills`, + '/boilerplate/ai-agent-skills': `${basePath}/ai/boilerplate-skills`, '/build-with-ai': `${basePath}/get-started/build-with-ai`, '/resources/build-with-ai': `${basePath}/get-started/build-with-ai`, + + // ========= AI SECTION REDIRECTS ========= + // ai-agent-skills.mdx and build-with-ai.mdx renamed to match sidebar labels + '/ai/ai-agent-skills': `${basePath}/ai/boilerplate-skills`, + '/ai/build-with-ai': `${basePath}/ai/static-text-files`, }; } diff --git a/astro.sidebar.mjs b/astro.sidebar.mjs index 0144386d2..05fc4df6f 100644 --- a/astro.sidebar.mjs +++ b/astro.sidebar.mjs @@ -33,13 +33,14 @@ export function generateSidebar() { ], }, { - label: 'Build with AI', + label: 'AI Integrations', collapsed: false, items: [ - { label: 'Overview', link: '/ai/' }, - { label: 'Use docs in AI tools', link: '/ai/build-with-ai/' }, - { label: 'Drop-ins MCP', link: '/ai/dropins-mcp/' }, - { label: 'AI agent skills', link: '/ai/ai-agent-skills/' }, + { label: 'Install the integrations', link: '/ai/' }, + { label: 'Boilerplate skills', link: '/ai/boilerplate-skills/' }, + { label: 'Dropins MCP', link: '/ai/dropins-mcp/' }, + { label: 'Wayfinder', link: '/ai/wayfinder/' }, + { label: 'Fallback docs', link: '/ai/static-text-files/' }, ], }, { diff --git a/src/content/docs/ai/ai-agent-skills.mdx b/src/content/docs/ai/ai-agent-skills.mdx deleted file mode 100644 index 35192bc56..000000000 --- a/src/content/docs/ai/ai-agent-skills.mdx +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: AI agent skills -description: Learn how to install and use AI agent skills for Adobe Commerce storefront development on Edge Delivery Services with the AEM Commerce Boilerplate. -sidebar: - label: AI agent skills - order: 8 ---- - -import Aside from '@components/Aside.astro'; -import TableWrapper from '@components/TableWrapper.astro'; -import Link from '@components/Link.astro'; -import { Steps } from '@astrojs/starlight/components'; - -AI agent skills teach your coding agent how to work in an AEM Boilerplate Commerce storefront. When you install the **AEM Boilerplate Commerce** skill set, your agent can plan the task, choose the right storefront pattern, write code that follows project conventions, and test the result in a browser. - -## What you get - -Use AI agent skills when you want your agent to help with a full storefront development task, not only answer a question. The skills help your agent: - -- Plan the work before changing code. -- Choose the right pattern for blocks, drop-ins, content models, and browser tests. -- Reduce repeated project explanations by storing storefront conventions in your repository. - -## What the skills provide - -The AEM Boilerplate Commerce skill set installs six specialized skills into your coding agent. Each skill covers a focused area of storefront development. - - - -| Skill | What it helps you do | -|-------|----------------------| -| **Project manager** | Breaks down tasks, guides phased delivery, and keeps development on track before any code is written | -| **Researcher** | Looks up drop-in component APIs, slot names, event payloads, and TypeScript definitions before implementing | -| **Block developer** | Builds and customizes Edge Delivery Services blocks using correct DOM patterns and CSS scoping | -| **Drop-in developer** | Customizes drop-in components using containers, slots, events, and API functions | -| **Content modeler** | Designs block table structures that are easy for content authors to work with | -| **Tester** | Verifies implementations in a real browser and checks Core Web Vitals and accessibility | - - - -The skills work together. For every task, your agent uses the project manager skill to scope work, the researcher skill to prepare, and the appropriate developer skill to build. - -## Prerequisites - -Before installing the skills, make sure you have the following: - -- **Node.js 22 or later** — The Adobe I/O CLI requires Node 22+. Use to manage multiple Node versions. -- **An AEM Boilerplate Commerce project** — The skills are designed for projects based on the . If you have not created a boilerplate storefront, see [Getting started](/boilerplate/getting-started/) to create one. -- **Adobe I/O CLI** — Install or update with npm: - - ```bash - npm install -g @adobe/aio-cli - ``` - - See the for more details. - - - -- **Adobe I/O Commerce plugin** — Install the Commerce plugin for the aio CLI: - - ```bash - aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce - ``` - - See the for additional details. - - - -## Install the skills - -Run the following command from the root of your boilerplate project: - -```bash -aio commerce extensibility tools-setup -``` - -The command walks you through a series of two prompts: - - - -1. **Select a starter kit** — A starter kit is a starting project template. Choose **AEM Boilerplate Commerce** to tell the installer which skill set and conventions to copy into your project (other starter kits may be added in the future). - -1. **Select your coding agent** — Choose your agent from the list of supported agents. This determines where the skill files are installed so your agent can find them (for example, Cursor uses `.cursor/skills/`). - - - -![CLI prompt with AEM Boilerplate Commerce selected in the starter kit menu](@images/boilerplate/aio-cli-commerce-skills-select.png) - -The command installs the `@adobe-commerce/commerce-extensibility-tools` package as a dev dependency, copies the skill files into your agent's skills directory, and configures MCP (Model Context Protocol) so your agent can access Commerce documentation search tools. - - - -### Supported agents - -![CLI output after a successful skills install: setup complete, skills copied, and next steps](@images/boilerplate/aio-cli-commerce-skills-result.png) - -After the install completes, restart your coding agent so it picks up the new skills and MCP configuration. - -Different agents and IDEs expose skills differently, so there is no single way to confirm installation. See your agent or IDE documentation for how to verify that your project’s skills are loaded. For example, in Cursor, you can open the settings or configuration panel to view detected skills. Other agents provide their own interfaces or indicators for this purpose. - - - -| Agent | Skills location | -|-------|-----------------| -| Cursor | `.cursor/skills/` | -| Claude Code | `.claude/skills/` | -| GitHub Copilot | `.github/skills/` | -| Windsurf | `.windsurf/skills/` | -| Gemini CLI | `.gemini/skills/` | -| OpenAI Codex | `.agents/skills/` | -| Cline | `.cline/skills/` | -| Kilo Code | `.kilocode/skills/` | -| Antigravity | `.agent/skills/` | -| Other | `./skills/` (project root) | - - - -## How to use the skills - -Once installed, the skills are available to your agent automatically. You don't need to reference them by name in every prompt. Here is how the agent uses them: - -- **Start every new task by describing what you want to build.** The project manager skill activates first to assess complexity and confirm the plan with you before any code is written. -- **For drop-in customizations**, the agent uses the researcher skill to look up the correct slot names, event payloads, and API functions from the actual source before writing code — not from assumptions. -- **For block development**, the agent follows boilerplate conventions: DOM manipulation with `document.createElement()`, CSS selectors scoped to the block name, and checking `/blocks` for existing solutions before creating new ones. -- **For content structure**, the agent uses the content modeler skill to design block tables that work for both developers and content authors. -- **After implementation**, the agent uses the tester skill to verify the result in a real browser, not by reviewing code. - -**Example prompt** — You can trigger the planning workflow and developer skills with a single, detailed request. For example: - -> Use the planning workflow to add a social sharing button to product pages. Place the button below the product title on the product detail page, allowing users to quickly share the product on platforms such as Facebook and Twitter. - - - -## What gets installed - -After running the setup command, your project contains: - - - -| File or directory | Purpose | -|-------------------|---------| -| `AGENTS.md` (project root) | Top-level instructions your agent reads at the start of every session | -| `/` | Skill files with domain-specific rules for each development area | -| MCP config file | Connects your agent to the `commerce-extensibility:search-commerce-docs` tool for live documentation search | - - - -The MCP tool gives your agent access to Adobe Commerce and App Builder documentation directly from within your coding session, which is what the researcher skill uses as its primary information source. - -## Related resources - - - -| Resource | Description | -|----------|-------------| -| [Boilerplate getting started](/boilerplate/getting-started/) | Create and run your storefront locally | -| [Drop-in components](/dropins/all/introduction/) | Drop-in component API reference | -| [Blocks reference](/boilerplate/blocks-reference/) | Reference for all available Commerce blocks | -| | Source and full documentation for the Commerce CLI plugin | - - diff --git a/src/content/docs/ai/boilerplate-skills.mdx b/src/content/docs/ai/boilerplate-skills.mdx new file mode 100644 index 000000000..62ad50d4d --- /dev/null +++ b/src/content/docs/ai/boilerplate-skills.mdx @@ -0,0 +1,150 @@ +--- +title: Boilerplate skills +description: Learn how to install and use Boilerplate skills so your AI coding agent plans, codes, and tests Adobe Commerce storefront changes on Edge Delivery Services. +sidebar: + label: Boilerplate skills + order: 8 +--- + +import Aside from '@components/Aside.astro'; +import TableWrapper from '@components/TableWrapper.astro'; +import Link from '@components/Link.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Boilerplate skills provide your coding agent with instructions for working in an Adobe Commerce boilerplate storefront. When you install the **AEM Boilerplate Commerce** skill set, the agent can plan tasks, select the appropriate storefront pattern, write code that follows project conventions, and test the result in a browser. + +## Benefits + +Use Boilerplate skills when you want your agent to complete a storefront development task rather than answer a question. The skills enable your agent to: + +- Plan the work before making code changes. +- Select the appropriate approach for blocks, drop-ins, content models, and browser tests. +- Reduce repetitive project-specific guidance by storing storefront conventions in your repository. + +## What the skills provide + +The AEM Boilerplate Commerce skill set includes six specialized skills, each designed for a specific area of storefront development. + + + +| Skill | What it helps you do | +|-----------------------|------------------------------------------------------------------------------------------------------------| +| **Project manager** | Break down development tasks, plan phased implementation, and keep work on track before code changes begin | +| **Researcher** | Find drop-in component APIs, slot names, event payloads, and TypeScript definitions before implementation | +| **Block developer** | Build and customize Edge Delivery Services blocks using the correct DOM patterns and CSS scoping | +| **Drop-in developer** | Build and customize drop-in components using containers, slots, events, and API functions | +| **Content modeler** | Design block table structures that are easy for content authors to use | +| **Tester** | Verify implementations in a real browser and evaluate Core Web Vitals and accessibility | + + + +The skills work together throughout the development process. Your agent uses the project manager skill to scope the work, the researcher skill to gather the information it needs, and the appropriate developer skill to implement the solution. + + + +## Prerequisites + +Before installing the skills, make sure you have the following: + +- **Node.js 22 or later** — Required by the Commerce plugin installed in the next step. +- **An Adobe Commerce boilerplate project** — The skills are designed for projects based on the . If you don't already have a boilerplate storefront, see [Getting started](/boilerplate/getting-started/) to create one. +- **The Adobe I/O CLI and Commerce plugin** — Install both before continuing: + + ```bash + npm install -g @adobe/aio-cli + aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce + ``` + + See the and the for details. + + + +## Install the skills + +From the root of your boilerplate project, run the following command: + +```bash +aio commerce extensibility tools-setup +``` + +The command prompts you twice. If it can't detect a package manager from an existing lock file, it prompts you a third time. + + + +1. **Select a starter kit.** A starter kit is a project template. Choose **AEM Boilerplate Commerce** to install the Boilerplate Commerce skill set and project conventions. + +2. **Select your coding agent.** Choose your coding agent from the list of supported agents. The installer places the skill files where your agent expects to find them. See **Supported agents**. + +3. **Select a package manager.** This prompt appears only if the installer can't detect a package manager from a lock file in your project. + + + +![CLI prompt with **AEM Boilerplate Commerce** selected as the starter kit.](@images/boilerplate/aio-cli-commerce-skills-select.png) + + + +### Supported agents + +After installation, restart your coding agent so it loads the new skills and MCP configuration. Different agents and IDEs surface installed skills in different ways, so there is no single way to confirm installation. In Cursor, for example, you can open the settings panel to view detected skills. For other agents, check the documentation for your agent or IDE to confirm that the skills in your project have loaded. + + + +| Agent | Skills location | +|----------------|----------------------------| +| Cursor | `.cursor/skills/` | +| Claude Code | `.claude/skills/` | +| GitHub Copilot | `.github/skills/` | +| Windsurf | `.windsurf/skills/` | +| Gemini CLI | `.gemini/skills/` | +| OpenAI Codex | `.agents/skills/` | +| Cline | `.cline/skills/` | +| Kilo Code | `.kilocode/skills/` | +| Antigravity | `.agent/skills/` | +| Other | `./skills/` (project root) | + + + +## What gets installed + +The setup command installs `@adobe-commerce/commerce-extensibility-tools` as a development dependency and adds the following project files and directories: + + + +| File or directory | Purpose | +|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------| +| `AGENTS.md` (project root) | Provides project-wide instructions that your agent reads at the start of each session. | +| `/` | Contains the Boilerplate skills, organized by development area. | +| MCP config file | Connects your agent to the `commerce-extensibility:search-commerce-docs` tool (separate from Dropins MCP) for live documentation search. | + + + +This MCP tool is separate from the [Dropins MCP](/ai/dropins-mcp/) server. It provides your agent with access to Adobe Commerce documentation for integration patterns, architecture, and security guidance. For slot, event, and API lookups, use Dropins MCP. See **Drop-in API accuracy** above. + +## How to use the skills + +Once installed, the skills work automatically—you don't need to reference them by name. Simply describe what you want to build. The project manager skill scopes the task, the researcher skill gathers the necessary information, the appropriate developer skill implements the solution, and the tester skill verifies the result. + +**Example prompt** — Trigger the planning workflow and developer skills with a single detailed request: + +> Use the planning workflow to add a social sharing button below the product title on the product detail page so shoppers can share products on social media. + + diff --git a/src/content/docs/ai/build-with-ai.mdx b/src/content/docs/ai/build-with-ai.mdx deleted file mode 100644 index fd855c1bd..000000000 --- a/src/content/docs/ai/build-with-ai.mdx +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Use docs in AI tools -description: Published llms.txt and topic bundles help AI editors and agents use current Adobe Commerce Storefront documentation. -tableOfContents: - maxHeadingLevel: 2 ---- - -import TableWrapper from '@components/TableWrapper.astro'; -import Link from '@components/Link.astro'; -import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; - -Use this page to connect an AI editor or coding agent to current Adobe Commerce Storefront documentation. With this context, the tool can answer questions about storefront APIs, drop-in versions, and Edge Delivery Services without relying only on general model training. - -## What you get - -Use docs context when you want your AI tool to generate answers based on the storefront documentation you are reading. It helps you: - -- Get answers that reflect current storefront documentation instead of older model training. -- Point different AI tools at one shared documentation source. -- Scope a chat to a full export or a single topic export. - -## Context files - -Context files are plain-text exports of this documentation, regenerated each time the site publishes so AI tools always have the latest content. - -- Start with `llms.txt`, the index that links to every export file. -- Full exports contain the entire documentation site in one file. -- Topic exports under `_llms-txt/` each cover one subject area. Use them when a tool should not load the entire site. - - - -| File | Purpose | -|------|---------| -| [`llms.txt`](/llms.txt) | Index with an overview and links to every export file. | -| [`llms-full.txt`](/llms-full.txt) | Complete documentation in one file. | -| [`llms-small.txt`](/llms-small.txt) | Same as the full export but without the release changelog, which is very long. Use this when your AI tool has a context size limit. | -| `_llms-txt/*.txt` | Topic exports, such as [drop-ins reference](/_llms-txt/dropins-reference.txt), [tutorials](/_llms-txt/tutorials-reference.txt), and [blocks](/_llms-txt/blocks-reference.txt). [`llms.txt`](/llms.txt) lists every topic export URL. | - - - -Some of these files are large. Loading a whole file sends a lot of text into the model at once. When possible, paste a specific page URL from this site into your AI tool so it fetches the live page directly. Live pages include the latest edits, navigation, and diagrams that export files may not have yet. Use export files as a fallback when your tool cannot fetch a URL. - - - -## Prerequisites - -- Use an AI editor or coding agent that supports project context files, documentation web addresses, or pasted context, such as Cursor, Claude Code, or GitHub Copilot Chat. -- Open a storefront project in that editor. You might have started from the or added Commerce blocks and drop-ins to your own site. -- For agent-based tools, use `AGENTS.md`, `CLAUDE.md`, or an equivalent context file at the project root where you can add the `llms.txt` web address. - -## Add context files - -For agent-based tools, add the `llms.txt` URL to a project context file, such as `AGENTS.md` or `CLAUDE.md`. The agent can then fetch the index when storefront documentation is relevant. For other tools, paste a bundle web address or file content directly. - - - - -Create or update `AGENTS.md` at your project root and add a section that points to the documentation index: - -```markdown wrap -## Adobe Commerce Storefront Documentation - -See https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt for Adobe Commerce Storefront documentation. -``` - -Cursor agent mode reads `AGENTS.md` and fetches the index when needed. You can also add this reference to a file under `.cursor/rules/` if you prefer a Cursor-specific location. - - - - -Create or update `CLAUDE.md` at your project root and add a line pointing to the documentation index: - -```markdown wrap -See https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt for Adobe Commerce Storefront documentation. -``` - -Claude Code fetches the index and linked bundles when the documentation is relevant. To confirm the setup, start a new chat and ask a question this storefront documentation answers, such as a question about a drop-in. If the reply cites or matches those topics, the tool can read the documentation. - - - - -Other AI editors and agents often accept a documentation URL in settings or system prompts. Tools that implement the can follow the index to the relevant bundles automatically. - -For tools that support custom context URLs or documentation sources, such as GitHub Copilot Chat or Windsurf, provide the following URL: - -```text -https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt -``` - -For tools that do not support URL-based context, paste the content of `llms-small.txt` or a relevant `_llms-txt/*.txt` topic bundle directly into the chat or system prompt. - - - - -## Example prompt - -After you add the documentation context, validate it by asking a specific question in chat. You can use or adapt the example below. - -```bash wrap -Use the Storefront docs. I'm building a product detail page and I want to add a custom 'Add to Wishlist' button in the product details drop-in, below the existing Add to Cart button. How do I use slots to do this? -``` - -## Check the result - -A successful setup returns responses that reference storefront topics, drop-in APIs, or paths aligned with this documentation. Adapt drop-in names or UI labels as needed for your project, then validate the response against the live documentation. - -## Keep context focused - -- Many paths, blocks, and drop-in examples in this documentation follow the folder layout of the on GitHub. Keep your storefront project open so suggested paths match your workspace. If your repository layout differs, tell the agent in chat. For example, say when you have merged boilerplate code into an existing site so the agent does not assume default boilerplate folders. -- To scope one reply to a single page, paste the page web address into the same chat. Your persistent context file connection stays in place, and the pasted web address narrows only that exchange. diff --git a/src/content/docs/ai/index.mdx b/src/content/docs/ai/index.mdx index 316a86d10..126e568a8 100644 --- a/src/content/docs/ai/index.mdx +++ b/src/content/docs/ai/index.mdx @@ -1,21 +1,91 @@ --- -title: AI tools overview -description: Choose how to connect AI editors and coding agents to current Adobe Commerce storefront documentation, drop-in APIs, and project conventions. +title: Install the integrations +description: Give your AI editor or coding agent current Adobe Commerce storefront documentation, drop-in APIs, and project conventions. sidebar: - label: Overview + label: Install the integrations order: 1 --- import TableWrapper from '@components/TableWrapper.astro'; +import { Steps, Aside } from '@astrojs/starlight/components'; -AI editors and coding agents can help with storefront work, but they require up-to-date context. Use the table to determine which option to set up first, then add additional support as your task requires. +If your project is based on the Adobe Commerce boilerplate, set up all three integrations below. Together, they provide a complete workflow for storefront development, source-accurate drop-in information, and access to Adobe Commerce documentation. + +## Overview of the integrations -| Start here | What it gives you | Use it when | -|------------|-------------------|-------------| -| [Use docs in AI tools](/ai/build-with-ai/) | Current storefront documentation context. | You want any AI editor or coding agent to generate answers based on the storefront documentation you are viewing. | -| [Dropins MCP](/ai/dropins-mcp/) | Exact drop-in slots, events, API functions, and design tokens. | Your task depends on source-backed drop-in API details. | -| [AI agent skills](/ai/ai-agent-skills/) | Storefront planning, coding, customization, and testing conventions. | You want the agent to handle full storefront development tasks. | +| AI integrations | What it gives you | +|-------------|---| +| [Boilerplate skills](/ai/boilerplate-skills/) | Storefront planning, coding, customization, and testing conventions | +| [Dropins MCP](/ai/dropins-mcp/) | Accurate drop-in slots, events, API functions, and design tokens validated against source | +| [Wayfinder](/ai/wayfinder/) | Routing to the correct Adobe Commerce documentation source | + + +## Prerequisites + +Before installing the integrations, make sure you have the following: + +* **Node.js 22 or later** — Required for the Boilerplate skills setup. (If you're installing only Dropins MCP, Node.js 18 or later is sufficient.) +* **An Adobe Commerce boilerplate project** — If you don't already have one, see [Getting started](/boilerplate/getting-started/). +* **An AI editor or coding agent that supports MCP servers and agent skills** — See [Supported agents](/ai/boilerplate-skills/#supported-agents) and [Dropins MCP prerequisites](/ai/dropins-mcp/#prerequisites) for supported tools. + + +## Installation steps + +Follow these steps in order. + + + +1. **Install the AEM Boilerplate Commerce skill set.** From the project root, run the following command: + + ```bash + npm install -g @adobe/aio-cli + aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce + aio commerce extensibility tools-setup + ``` + + The command prompts you to choose a starter kit, a coding agent, and, if needed, a package manager. For details, see [Install the skills](/ai/boilerplate-skills/#install-the-skills). + +2. **Add the Dropins MCP (Model Context Protocol) server.** Add the server to your editor's MCP configuration. For the configuration snippet for your editor, see [Dropins MCP installation](/ai/dropins-mcp/#installation), then return here to continue installing the remaining integrations. + +3. **Add or verify Wayfinder.** Wayfinder routes questions about Commerce Admin, App Builder, and Document Authoring to the appropriate Adobe Commerce documentation. For details, see [Wayfinder](/ai/wayfinder/). If you cloned the Adobe Commerce boilerplate, check `AGENTS.md` first—recent versions already include the required entry. Otherwise, add it to `AGENTS.md` or `CLAUDE.md` in your project root (create the file if it doesn't exist): + + ```markdown + Fetch and follow the instructions at: https://cdn.jsdelivr.net/gh/adobe-commerce/wayfinder@main/skills/AGENTS.md + ``` + + +4. **Add coordination instructions.** Without these instructions, your agent might skip the Boilerplate skills workflow and query an MCP tool directly for drop-in information. Add the following rule near the top of `AGENTS.md` or `CLAUDE.md` in your project root so your coding agent is more likely to process it: + + ```markdown + ## Skill, MCP, and Wayfinder priority + + Check these rules in order and stop at the first match: + + 1. **Starting a new task or feature request:** Invoke the `project-manager` skill first. It scopes the work, determines whether another starter kit is a better fit (for example, backend integrations or checkout webhooks), and routes the request to the appropriate skill. + 1. **Writing or modifying drop-in code:** Invoke the `dropin-developer` skill, even if an MCP tool has already answered the underlying question. + 1. **Questions about this storefront, its blocks, or its drop-ins:** Use the `researcher` skill and its MCP tools (`commerce-extensibility:search-commerce-docs` and Dropins MCP). + 1. **Questions outside this storefront:** Use Wayfinder for Commerce Admin, App Builder, Document Authoring, and related topics. + + ``` + +5. **Restart your agent** so it loads the new configuration from all three integrations. + + + +## Use fallback documentation files + +If your AI editor or coding agent doesn't support MCP servers or agent skills, add the following URL to your project instructions, or paste it into a chat instead: + +```text +https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt +``` + +For editor-specific setup instructions and a verification prompt, see [Fallback documentation files](/ai/static-text-files/). + + diff --git a/src/content/docs/ai/static-text-files.mdx b/src/content/docs/ai/static-text-files.mdx new file mode 100644 index 000000000..fab0a4905 --- /dev/null +++ b/src/content/docs/ai/static-text-files.mdx @@ -0,0 +1,97 @@ +--- +title: Fallback documentation files +description: Use fallback llms.txt and topic files, regenerated at each publish, to give AI editors and coding agents current Adobe Commerce storefront documentation. +tableOfContents: + maxHeadingLevel: 2 +--- + +import TableWrapper from '@components/TableWrapper.astro'; +import Link from '@components/Link.astro'; +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + +If your AI editor cannot use MCP servers or agent skills, use these static documentation files as context for storefront APIs, drop-ins, and Edge Delivery Services. + + + +## Available files + +These plain-text files are generated from the published documentation each time the site is updated, so AI tools always have current content. Start with `llms.txt`, which indexes the available documentation. Topic files under `_llms-txt/` cover individual subject areas, letting your agent load only the documentation it needs instead of the entire site. + + + +| File | Purpose | +|-------------------------------------|---------------| +| [`llms.txt`](/llms.txt) | Index of all documentation files, with an overview and links to each one. | +| [`llms-full.txt`](/llms-full.txt) | Complete documentation in a single file, concatenated in sidebar order. | +| [`llms-small.txt`](/llms-small.txt) | Complete documentation without the release changelog. Use this file when your AI tool has a limited context window. | +| `_llms-txt/*.txt` | Documentation for individual subject areas, such as [drop-ins reference](/_llms-txt/dropins-reference.txt), [tutorials](/_llms-txt/tutorials-reference.txt), and [blocks](/_llms-txt/blocks-reference.txt). [`llms.txt`](/llms.txt) links to every topic file. | + + + + + +## Prerequisites + +Before adding context files, make sure you have the following: + +* **An AI editor or coding agent** that supports project context files, documentation URLs, or pasted context, such as Cursor, Claude Code, or GitHub Copilot Chat. +* **A storefront project** based on the or configured with Commerce blocks and drop-ins, and open in your AI editor or coding agent. +* **An `AGENTS.md`, `CLAUDE.md`, or equivalent context file** in the project root (for agent-based tools). + +## Add context files + +For agent-based tools, add the `llms.txt` URL to a project context file so your agent can fetch the documentation index when storefront documentation is needed. For other tools, paste one of these file URLs—or its contents—directly into the chat. + + + + +Add this section to your project's context instructions—for example, `AGENTS.md` in the project root or a rules file under `.cursor/rules/`: + +```markdown wrap +## Adobe Commerce storefront documentation + +See https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt for Adobe Commerce Storefront documentation. +``` + + + + +Add this line to `CLAUDE.md` in your project root: + +```markdown wrap +See https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt for Adobe Commerce storefront documentation. +``` + + + + +Tools that implement the automatically follow the index when you provide this URL: + +```text +https://experienceleague.adobe.com/developer/commerce/storefront/llms.txt +``` + +If your AI tool doesn't support URL-based context, paste the contents of `llms-small.txt` or a relevant `_llms-txt/*.txt` topic file directly into the chat or system prompt. + + + + +## Example prompt + +After adding the documentation context, verify the setup by asking a question the documentation answers, such as: + +```text wrap +Using the Storefront documentation, how do I display a **Delivery estimate** message in the Product Details drop-in below the existing **Add to Cart** button? +``` + +A successful setup returns a response that references storefront topics, drop-in APIs, or documentation paths relevant to your project. Adapt the example to your project's drop-in names and UI labels, then verify the implementation against the live documentation. + +## Keep context focused + +* These files can be large. When possible, give your AI editor or coding agent a specific documentation URL instead so it can fetch the live page, including recent updates and diagrams that are not included in the static files. Use the static files only when your editor or coding agent can't fetch URLs. +* Paths and examples in this documentation follow the folder layout of the . Keep your storefront project open so suggested paths match your workspace. If your repository uses a different layout—for example, if you merged the boilerplate into an existing site—tell your agent. +* To focus a single conversation on one topic, paste the corresponding documentation page URL into the chat. Your context file remains available, and the URL narrows only the current conversation. diff --git a/src/content/docs/ai/wayfinder.mdx b/src/content/docs/ai/wayfinder.mdx new file mode 100644 index 000000000..2db2f2f68 --- /dev/null +++ b/src/content/docs/ai/wayfinder.mdx @@ -0,0 +1,39 @@ +--- +title: Wayfinder +description: Add Wayfinder to your project so your AI coding agent fetches the correct Adobe Commerce documentation source instead of guessing. +sidebar: + label: Wayfinder + order: 9 +--- + +import Aside from '@components/Aside.astro'; +import Link from '@components/Link.astro'; + + is a free, open-source set of routing instructions for AI coding agents. Adobe Commerce documentation is spread across several separate sites, so your agent can easily search the wrong one. Or it may skip the docs altogether and answer from outdated training data. Wayfinder gives your agent the context it needs to match a question to the right source, then fetch and cite that source before it answers. + +## Install Wayfinder in your project + +Add this line to `AGENTS.md` or `CLAUDE.md` at your project root: + +```markdown +Fetch and follow the instructions at: https://cdn.jsdelivr.net/gh/adobe-commerce/wayfinder@main/skills/AGENTS.md +``` + +Your agent retrieves this file at the start of each session and follows its routing rules for the rest of the conversation. There's no package to install and no configuration file to create. + + + + + +## Verify Wayfinder is working + +Ask your agent a documentation question, not a request to build or change something, and ask it to report whether it fetched external documentation or answered from its own knowledge. For example: + +> _"How do I reset a customer's password in Commerce Admin? Also tell me: did you fetch external documentation to answer this, or did you answer from your own knowledge?"_ + +If your agent reports fetching and citing a source outside this storefront's own documentation — for example, a Commerce Admin or App Builder doc — Wayfinder is routing correctly. + diff --git a/src/content/docs/boilerplate/index.mdx b/src/content/docs/boilerplate/index.mdx index 3fbac3362..9c3918ec4 100644 --- a/src/content/docs/boilerplate/index.mdx +++ b/src/content/docs/boilerplate/index.mdx @@ -41,7 +41,7 @@ Use these when you already have a project open on disk: - [Blocks reference](/boilerplate/blocks-reference/) and [Blocks customization](/boilerplate/customizing-blocks/) — Block behavior and layout. - [Universal Editor](/boilerplate/universal-editor/) — Optional authoring path alongside Document Authoring. - [Boilerplate updates](/boilerplate/updates/) — Staying current (npm drop-ins first; suite tags are tested snapshots, not fork upgrade targets). -- [AI agent skills](/ai/ai-agent-skills/) — Optional skills for coding agents. +- [Boilerplate skills](/ai/boilerplate-skills/) — Optional skills for coding agents. ## Related areas outside this section