AI coding tools setup for Commerce App Builder and storefront

When migrating to Adobe Commerce as a Cloud Service, you can use the AI coding tools to convert existing Adobe Commerce PHP extensions to Adobe Developer App Builder applications.

You can also use these tools to create completely new App Builder applications and storefront customizations.

The AI coding tools provide the following benefits:

Enhanced development workflow — Integrated Adobe Commerce development tools.
AI-powered assistance — Context-aware code generation and debugging.
Commerce-specific features — Specialized tools for Adobe Commerce App Builder development.
Automated workflows — Streamlined development and deployment processes.

By installing the AI coding tools, you get access to:

Skills - An Adobe Commerce and App Builder specific skill set designed to guide and inform your application development.
Developer MCP Server
App Builder MCP Server

For skills, prompts, and best practices after setup, see Skills, prompts, and commands and Best practices.

Updating to the latest version

After installing the AI coding developer tooling, update to the latest version by running:

aio commerce extensibility tools-setup

This updates the tools to the latest version.

Prerequisites

Any coding agent that supports agent skills, such as:
- Cursor
- Claude Code
- GitHub Copilot
- Windsurf
- Gemini CLI
- OpenAI Codex
- Cline
Node.js: LTS version (v22.x or higher)
Package manager: npm or yarn
Git: For repository cloning and version control
Bash shell
- macOS/Linux: No installation required
- Windows: Use Git Bash or Windows Subsystem for Linux (WSL)

Installation

Automated setup (Recommended) — Run a single command to configure your workspace automatically.
Manual setup — Follow step-by-step instructions to configure each component individually.

Automated setup (Recommended)

data-variant=info

data-slots=text

If you encounter issues with the automated setup, follow the manual setup steps below.

The app-setup command automates the workspace setup process, including creating an Adobe Developer Console project, adding the required APIs, configuring the Adobe I/O CLI, cloning the starter kit, connecting your local workspace, and installing the extensibility AI tools.

The app-setup command guides you through the following steps:

Selecting or creating an Adobe Developer Console project with the required APIs
Configuring the Adobe I/O CLI with your organization, project, and workspace
Cloning the appropriate starter kit and setting up the project
Configuring the environment and connecting the local workspace to the remote workspace
Installing the Commerce extensibility tools and coding agent skills

Run the following command and follow the interactive prompts:

aio commerce extensibility app-setup

After the command completes, navigate to your project directory and restart your coding agent to load the new MCP tools and skills. If your tutorial requires a storefront, rerun the command and select the AEM Boilerplate Commerce starter kit.

The following example installation shows the interactive prompts and output for the checkout starter kit.

Example installation (checkout starter kit):

aio commerce extensibility app-setup

🚀 Adobe Commerce Extensibility App Setup

✔ Logged in
📁 Working directory: /Users/username/projects/my-commerce-project

✔ Which starter kit would you like to use? Checkout Starter Kit
✔ Enter a name for your project directory: my-extension
✔ Which coding agent would you like to install the skills for? Cursor

📦 Cloning Checkout Starter Kit...
   ✔ Repository cloned
   Using npm (package-lock.json found)
   ✔ Dependencies installed

📋 Current Adobe I/O Console configuration:
   Org: My Organization (1234567)
   Project: My Commerce Project (1234567890123456789)
   Workspace: Stage (9876543210987654321)
✔ Do you want to continue with this configuration? (Answer "No" to select a different org/project/workspace)
No

🔧 Selecting Adobe I/O Console org, project, and workspace...

? Select Org: My Organization
Org selected My Organization
You are currently in:
1. Org: My Organization
2. Project: <no project selected>
3. Workspace: <no workspace selected>

? Select Project: My Commerce Project
Project selected : My Commerce Project
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: <no workspace selected>

? Select Workspace: Stage
Workspace selected Stage
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: Stage

✅ Console configured:
   Org: My Organization
   Project: My Commerce Project
   Workspace: Stage

🔐 Configuring workspace credentials and services...
   ✔ Workspace configuration loaded
   ✔ OAuth server-to-server credentials already configured
   ✔ All required services available in organization
   ✔ Subscribed to: Adobe Commerce as a Cloud Service

📋 Configuring Checkout Starter Kit...
   Creating .env from env.dist...
✔ Select tenant (type to search) My Commerce Instance:
https://<region>.api.commerce.adobe.com/<tenant-id>/graphql
   ✔ Commerce instance configured
✔ Enter the event prefix for your workspace: my-prefix
   ✔ Workspace IDs configured
   ✔ OAuth credentials configured
   ✔ Checkout Starter Kit configured

🔧 Installing Commerce Extensibility tools and agent skills...
   ✔ Commerce Extensibility tools installed

🎉 App setup complete!

📁 Project directory: /Users/username/projects/my-commerce-project/my-extension

Next steps:
   1. cd into your project directory
   2. Restart your coding agent to load the Commerce Extensibility tools and skills

Manual setup

Install the latest Adobe I/O CLI globally:
```
npm install -g @adobe/aio-cli
```

Install the following plugins:

aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime

Clone one of the following:
- Commerce integration starter kit — for building back-office integrations.
```
git clone git@github.com:adobe/commerce-integration-starter-kit.git
```
- Commerce checkout starter kit for building or extending the checkout experience, including payments, shipping, and taxes.
```
git clone git@github.com:adobe/commerce-checkout-starter-kit.git
```

Navigate to the starter kit directory that you cloned:

cd commerce-integration-starter-kit

cd commerce-checkout-starter-kit

Install the Commerce AI extensibility tools by running the interactive setup command:
```
aio commerce extensibility tools-setup
```
The setup process prompts you with configuration options. Follow the prompts to complete the installation. The tools are installed in the selected directory.
- Select the starter kit you want to use for your project. This configures the tooling for your selected starter kit.
```
? Which starter kit would you like to use?
❯ Integration starter kit
   Checkout starter kit
```
- Select your preferred coding agent. Over 40 coding agents are supported; if you do not see your preferred agent, use the Other option to install skills for any coding agent. Refer to your coding agent's documentation for how to configure skills.
```
? Which coding agent would you like to install skills for?
❯ Cursor
   Claude Code
   GitHub Copilot
   Windsurf
   Gemini CLI
   OpenAI Codex
   Cline
   ...
```
- The installer detects NPM or Yarn when present. If neither is installed, you are prompted to choose a package manager. Adobe recommends using npm for consistency:
```
? Which package manager would you like to use?
❯ npm
   yarn
```
After a successful install, the process configures:
- MCP server integration for Adobe Commerce development
- Agent skills for enhanced development experience
- Commerce-specific development tools and workflows
Skills and MCP tools are installed. If you do not see them, restart your coding agent.

data-variant=info

data-slots=text

Before deploying your project, complete configuration tasks: log in to Adobe Developer Console using the Adobe I/O CLI, create an App Builder project (see Project setup), and set up environment variables in an .env file. You can do these steps manually or use the AI coding tools for guidance. See Create an integration for detailed configuration instructions.

Post-installation configuration

Log in to the Adobe I/O CLI

After installing the Adobe I/O CLI, log in whenever you want to use the MCP server.

aio auth login

To verify you are logged in:

aio where

If you encounter issues, try logging out and back in:

aio auth logout
aio auth login

data-variant=info

data-slots=text

Some features of the MCP server will work without logging in, but the RAG (Retrieval-Augmented Generation) service will not work. The RAG service provides the AI coding agent with access to relevant parts of the Adobe Commerce documentation set, enabling it to answer questions and generate code based on current Commerce development practices, APIs, and architectural patterns.

Cursor

Restart the Cursor IDE to load the new MCP tools and configuration.
Verify the installation by confirming that skills are present under the .cursor/skills/ folder.
Enable the MCP server:
- Open the Command Palette: Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows and Linux).
- Run View: Open MCP Settings.
- Find commerce-extensibility MCP Server in the list.
- Turn the server on to enable the coding tools.

Verify server status. The Commerce extensibility MCP Server should look like:

Status: Connected/Active
Server: commerce-extensibility
Configuration: Automatically configured via .cursor/mcp.json

Use a prompt to confirm the agent uses the MCP server. If it does not, ask the agent explicitly to use the available MCP tools.

What are the differences between Adobe Commerce PaaS and Adobe Commerce as a Cloud Service when configuring a webhook that activates an App Builder runtime action?

GitHub Copilot (VS Code)

Restart Visual Studio Code to load the new MCP tools and configuration.
Verify the installation by confirming that copilot-instructions.md exists in the .github folder.
Enable the MCP server:
- Open the Extensions view (Extensions in the Activity Bar or Cmd+Shift+X / Ctrl+Shift+X).
- Open MCP SERVERS - INSTALLED.
- Use the gear icon next to commerce-extensibility MCP Server and select Start Server if the server is stopped.
- Use the gear icon again and select Show Output to view logs.

Verify the server status. The MCP:commerce-extensibility output should match the following:

2025-11-13 12:58:50.652 [info] Starting server commerce-extensibility
2025-11-13 12:58:50.652 [info] Connection state: Starting
2025-11-13 12:58:50.652 [info] Starting server from LocalProcess extension host
2025-11-13 12:58:50.657 [info] Connection state: Starting
2025-11-13 12:58:50.657 [info] Connection state: Running

(...)

2025-11-13 12:58:50.753 [info] Discovered 10 tools

Use the following prompt to see if the agent uses the MCP server. If it does not, ask the agent explicitly to use the MCP tools available.

What are the differences between Adobe Commerce PaaS and Adobe Commerce as a Cloud Service when configuring a webhook that activates an App Builder runtime action?