Install the Agentforce Commerce Client on Storefront Next

For Storefront Next, enable and configure Agentforce Commerce Client through a Managed Runtime environment variable, PUBLIC__app__cimulateAgent. The storefront-next template reads that variable, selects the Commerce Client provider, and injects the widget for you.

Prerequisites

The setup is covered in B2C Shopper Agent Setup. In particular, these are the prerequisites:

Required Licenses for the B2C Shopper Agent: Make sure your org has the required licenses provisioned for the B2C Shopper Agent.
Enable Agentic Commerce Search for the Shopper Agent: Enable Agentic Commerce Search so that Shopper Agent can return relevant product results.
Create a B2C Shopper Agent Using the Automated Setup: Run the automated setup to provision and configure the B2C Shopper Agent on your Salesforce org. This includes setting up the Embedded Service deployment, obtaining the org ID, SCRT2 URL, and ES developer name, which are then supplied via the configuration below.

Enable the Client

Set the PUBLIC__app__cimulateAgent environment variable on your Managed Runtime environment, or in your local .env file for local development.

To add an environment variable in Runtime Admin:

Log in to the Runtime Admin (https://runtime.commercecloud.com/).
Select your project, then the environment.

Under Environment Variables, add PUBLIC__app__cimulateAgent with this JSON value.

1{
2  "enabled": "true",
3  "provider": "commerce-client",
4  "commerceClientScriptSourceUrl": "https://cdn.search.cimulate.ai/copilot-widget/1.36.0/messaging.umd.js",
5  "scrt2Url": "https://your-org.salesforce-scrt.com",
6  "salesforceOrgId": "00Dxx0000000001",
7  "esDeveloperName": "My_Embedded_Service",
8  "headerText": "Commerce Assistant",
9  "disclaimerMarkdown": "This is AI and can make mistakes.",
10  "commerceClientDisplayMode": "panel",
11  "commerceClientPanelWidth": "420px",
12  "commerceClientMode": "messaging",
13  "commerceClientLogoUrl": "https://cimulate.ai/logo.png"
14}

Replace fields in PUBLIC__app__cimulateAgent with valid values. In your Salesforce org, go to Setup > Service > Embedded Service > Embedded Service Deployments, and then open the deployment for the agent created in the automated setup (see Create a B2C Shopper Agent Using the Automated Setup. Then click Install Code Snippet. Copy these values to the JSON value for PUBLIC__app__cimulateAgent:
- Replace the esDeveloperName value with the copied DeveloperName value.
- Replace the scrt2Url value with the copied Url value. The SCRT2 URL is the endpoint used by the embedded chat widget to communicate with the messaging service backend.
- Replace the salesforceOrgId value with the copied OrganizationId value.
- commerceClientScriptSourceUrl refers to the script of the Cimulate NPM package that powers search. We recommend you use the latest version in the URL, which is currently set to /1.36.0/. Get the latest version from https://www.npmjs.com/package/@cimulate/copilot-widget.

The Shopper Agent is now configured for your Storefront Next storefront.

Roll Back Commerce Client

Because the widget is driven entirely by PUBLIC__app__cimulateAgent, disable it by setting "enabled": "false" or by removing the PUBLIC__app__cimulateAgent environment variable.

Install the Agentforce Commerce Client on Storefront Next

Prerequisites

Enable the Client

Roll Back Commerce Client

Related resources