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.0 or 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

  • 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.

  1. Navigate to the Adobe Developer Console.
  2. 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.

  1. Navigate to Adobe Developer Console.

  2. Click Create project from a template.

  3. Select the App Builder template.

  4. Enter a Project Title and App Name.

  5. Ensure the Include Runtime checkbox is marked.

    Adobe Developer Console project creation with App Builder template selected {width="600" modal="regular"}

  6. Click Save.

Add APIs to the workspace

Add the required APIs to your Stage workspace for event management and Commerce integration.

  1. Click the Stage workspace and then repeat the following steps for each API.

    Stage workspace with Add Service option for APIs {width="600" modal="regular"}

  2. Click Add Service and select API.

  3. 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
  4. Click Next.

  5. Click Save configured API.

  6. Repeat the previous steps until you add all APIs to the workspace.

    Workspace showing all required APIs successfully added {width="600" modal="regular"}

Configure the Adobe I/O CLI

Connect the Adobe I/O CLI to your organization, project, and workspace.

  1. Clear any existing configuration:

    code language-bash
    aio config clear
    
  2. Log in using the Adobe I/O CLI:

    code language-bash
    aio auth login -f
    
  3. Select your organization, project, and workspace using each of the following commands:

    code language-bash
    aio console org select
    
    code language-bash
    aio console project select
    
    code language-bash
    aio console workspace select
    

    Terminal showing Adobe I/O CLI organization project and workspace selection {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
Integration starter kit

Create an .env file

Create your environment configuration file:

code language-bash
cp env.dist .env

Open the .env file in a text editor and add the following OAuth credentials:

code language-bash
OAUTH_CLIENT_ID=
OAUTH_CLIENT_SECRET=
OAUTH_TECHNICAL_ACCOUNT_ID=
OAUTH_TECHNICAL_ACCOUNT_EMAIL=
OAUTH_ORG_ID=

Copy these values from the Credential details page in Developer Console by clicking the OAuth Server-to-Server tab on your workspace.

OAuth Server-to-Server credentials page in Adobe Developer Console {width="600" modal="regular"}

Add the Commerce configuration

Add the following Commerce instance details to your .env file:

code language-bash
COMMERCE_BASE_URL=
COMMERCE_GRAPHQL_ENDPOINT=

To find these values:

  1. Navigate to Commerce Cloud Service instances.
  2. Click the information icon next to your instance.
  3. Copy the REST endpoint as COMMERCE_BASE_URL.
  4. Copy the GraphQL endpoint as COMMERCE_GRAPHQL_ENDPOINT.

Set the event prefix

Set a temporary value for the event prefix:

code language-bash
EVENT_PREFIX=test

Download the workspace configuration

Run the following command to download the workspace configuration file:

code language-bash
aio console workspace download workspace.json

Copy the workspace configuration file to the scripts directory:

code language-bash
cp workspace.json scripts/

Connect the local workspace to the remote workspace

Link your local project to the remote workspace:

code language-bash
aio app use workspace.json -m

Terminal showing successful workspace connection with aio app use command {width="600" modal="regular"}

Checkout starter kit

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
aio app use --merge

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.

Terminal showing successful workspace connection with aio app use command {width="600" modal="regular"}

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.

  1. Set up the AI-assisted development tools in the extension folder using the following commands:

    code language-bash
    cd extension
    
    code language-bash
    aio commerce extensibility tools-setup
    

    Terminal showing AI extensibility tools setup command output {width="600" modal="regular"}

  2. 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-setup from the extension folder (the starter kit project root) and select the appropriate starter kit when prompted.

    Terminal showing AI extensibility tools setup with checkout starter kit selected {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.

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:

  1. Select a starter kit — Choose AEM Boilerplate Commerce.

  2. 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.

recommendation-more-help
5ecfe1a6-f74c-4745-a54a-99b24da024bb