Tutorial prerequisites
This page lists the prerequisites and setup steps for Adobe Commerce as a Cloud Service tutorials, such as the ratings extension tutorial and the shipping method extension tutorial.
General prerequisites
The following tools are required for both extension and storefront development in this tutorial.
-
Node.js (version
22.x.x) and npm (9.0.0or higher): Verify your installation using the following command:code language-bash node --version npm --version -
Install Git - Verify your installation:
code language-bash git --version -
Bash shell
- macOS/Linux: No installation required
- Windows: Use Git Bash or Windows Subsystem for Linux (WSL)
-
Download an AI-assisted IDE, such as Cursor (recommended). Other IDEs, such as Claude Code, Gemini CLI, or Copilot are also supported, but could require modifications to the prompts and other steps in the tutorial.
Adobe Commerce as a Cloud Service prerequisites
-
Install the Adobe I/O CLI
code language-bash npm install -g @adobe/aio-cli -
Install the Adobe I/O CLI Commerce, Adobe I/O CLI Runtime, and App Builder CLI plugins:
code language-bash aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime
Adobe Developer Console prerequisites
Set up a project in the Adobe Developer Console with the required APIs and credentials.
- Navigate to the Adobe Developer Console.
- Log in using your email and password.
Create a new project
Create an App Builder project in the Adobe Developer Console to host your extension.
-
Navigate to Adobe Developer Console.
-
Click Create project from a template.
-
Select the App Builder template.
-
Enter a Project Title and App Name.
-
Ensure the Include Runtime checkbox is marked.
{width="600" modal="regular"}
-
Click Save.
Add APIs to the workspace
Add the required APIs to your Stage workspace for event management and Commerce integration.
-
Click the Stage workspace and then repeat the following steps for each API.
{width="600" modal="regular"}
-
Click Add Service and select API.
-
Select one of the following APIs. Repeat this process for each API listed below:
-
Adobe Services filter:
- I/O Management API
- I/O Events API
-
Experience Cloud filter:
- Adobe I/O Events for Adobe Commerce API
-
-
Click Next.
-
Click Save configured API.
-
Repeat the previous steps until you add all APIs to the workspace.
{width="600" modal="regular"}
Configure the Adobe I/O CLI
Connect the Adobe I/O CLI to your organization, project, and workspace.
-
Clear any existing configuration:
code language-bash aio config clear -
Log in using the Adobe I/O CLI:
code language-bash aio auth login -f -
Select your organization, project, and workspace using each of the following commands:
code language-bash aio console org selectcode language-bash aio console project selectcode language-bash aio console workspace select {width="600" modal="regular"}
Clone the starter kits
Clone one of the following Commerce starter kit repositories for the extension you are building and prepare your project:
Integration starter kit:
git clone https://github.com/adobe/commerce-integration-starter-kit.git extension
cd extension
Checkout starter kit:
git clone https://github.com/adobe/commerce-checkout-starter-kit.git extension
cd extension
Create an .env file
Create your environment configuration file:
| code language-bash |
|---|
|
Open the .env file in a text editor and add the following OAuth credentials:
| code language-bash |
|---|
|
Copy these values from the Credential details page in Developer Console by clicking the OAuth Server-to-Server tab on your workspace.
Add the Commerce configuration
Add the following Commerce instance details to your .env file:
| code language-bash |
|---|
|
To find these values:
- Navigate to Commerce Cloud Service instances.
- Click the information icon next to your instance.
- Copy the REST endpoint as
COMMERCE_BASE_URL. - Copy the GraphQL endpoint as
COMMERCE_GRAPHQL_ENDPOINT.
Set the event prefix
Set a temporary value for the event prefix:
| code language-bash |
|---|
|
Download the workspace configuration
Run the following command to download the workspace configuration file:
| code language-bash |
|---|
|
Copy the workspace configuration file to the scripts directory:
| code language-bash |
|---|
|
Connect the local workspace to the remote workspace
Link your local project to the remote workspace:
| code language-bash |
|---|
|
Connect local workspace to remote workspace
Link your local project to the remote workspace. From the project root (the extension folder), run:
| code language-bash |
|---|
|
When prompted, choose the option that uses the organization, project, and workspace you selected when configuring the Adobe I/O CLI. This writes the workspace configuration into your app so that deploy and local development use that workspace.
Install the extensibility AI tools
This process creates the MCP configuration (.<agent>/mcp.json), the skills directory (.<agent>/skills/), and adds AGENTS.md to the project root. You will be prompted to choose a starter kit, coding agent, and package manager.
-
Set up the AI-assisted development tools in the
extensionfolder using the following commands:code language-bash cd extensioncode language-bash aio commerce extensibility tools-setup {width="600" modal="regular"}
-
After the setup completes, restart your coding agent to allow it to load the new MCP tools and skills. The Commerce App Builder tools are now available in your environment.
note note NOTE If you see a warning that no skills were found for the starter kit, something went wrong—often because the setup was run in a folder other than where the starter kit was cloned. Run aio commerce extensibility tools-setupfrom theextensionfolder (the starter kit project root) and select the appropriate starter kit when prompted. {width="600" modal="regular"}
Storefront prerequisites
The following items are required to complete the storefront section of the Ratings extension tutorial and display product ratings in your store.
-
Google Chrome - Required for testing the storefront
-
A storefront project connected to your Commerce instance. If you do not have a storefront project, follow the steps in Create a storefront, including the Link repo to commerce data section.
Clone the storefront repository
Open your terminal and clone the repository:
git clone --branch agentic-dev https://github.com/hlxsites/aem-boilerplate-commerce.git storefront
cd storefront
Install the dependencies
Install the project dependencies:
npm install
Install the storefront AI tools
Set up the AI-assisted development tools in the storefront folder. Run the following command from the root of your boilerplate project:
aio commerce extensibility tools-setup
The command walks you through two prompts:
-
Select a starter kit — Choose AEM Boilerplate Commerce.
-
Select your coding agent — Choose your agent from the list of supported agents.
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.