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 as well as 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
Copied to your clipboard
aio commerce extensibility tools-setup

This updates the tools to the latest version.

Prerequisites

Any coding agent that supports agent skills, such as:
Node.js: LTS version
Package manager: npm or yarn
Git: For repository cloning and version control

Installation

Install the latest Adobe I/O CLI globally:

npm install -g @adobe/aio-cli
Copied to your clipboard
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
Copied to your clipboard
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
Copied to your clipboard
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
Copied to your clipboard
git clone git@github.com:adobe/commerce-checkout-starter-kit.git

Navigate to the starter kit directory:

cd commerce-integration-starter-kit
Copied to your clipboard
cd commerce-integration-starter-kit

Install the Commerce AI extensibility tools by running the interactive setup command:

aio commerce extensibility tools-setup
Copied to your clipboard
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.

? Which starter kit would you like to use?
❯ Integration starter kit
   Checkout starter kit
Copied to your clipboard
? 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
   GithubCopilot
   Windsurf
   Gemini CLI
   OpenAI Codex
   Cline
   ...
Copied to your clipboard
? Which coding agent would you like to install skills for?
❯ Cursor
   Claude Code
   GithubCopilot
   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
Copied to your clipboard
? 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.

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](../starter-kit/integration/create-integration.md 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
Copied to your clipboard
aio auth login

To verify you are logged in:

aio where
Copied to your clipboard
aio where

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

aio auth logout
aio auth login
Copied to your clipboard
aio auth logout
aio auth login

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 real-time access to the complete 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
Copied to your clipboard
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?
Copied to your clipboard
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
Copied to your clipboard
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 SaaS when configuring a webhook that activates an App Builder runtime action?
Copied to your clipboard
What are the differences between Adobe Commerce PaaS and SaaS when configuring a webhook that activates an App Builder runtime action?

Overview

Skills, prompts, and commands

Was this helpful?

Yes