Install and Launch the Commerce Vibes Extension

Install Agentforce Commerce Vibes extension in Visual Studio Code and log in to your Salesforce org.

Prerequisites

Visual Studio Code version 1.101.0 or later
Salesforce B2C Commerce account
Node.js version 22.15.1 or later
(Optional) dw.json in your workspace root to run the B2C CLI

Installation Steps

Install the Agentforce Commerce Vibes extension and its dependencies.

Open Visual Studio Code.
Install the Agentforce Commerce Vibes extension from the VS Code Marketplace.

a. Click the extensions icon in the Activity Bar, on the left navigation pane, and search for “Agentforce Commerce Vibes”.

b. On the extension’s page, click Install to install the extension. For more information, see Use extensions in Visual Studio Code in the Visual Studio Code documentation.
Install the B2C CLI that Commerce Vibes depends on. See Agentic B2C Developer Toolkit
Install the Salesforce B2C Commerce extension from the VS Code Marketplace, which is another dependency of Commerce Vibes.

a. Click the extensions icon in the Activity Bar, on the left navigation pane, and search for “Salesforce B2C Commerce”.

b. On the extension’s page, click Install to install the extension. For more information, see Use extensions in Visual Studio Code in the Visual Studio Code documentation.
Verify that the extension and its dependencies are installed.

a. Launch the Commerce Vibes extension by clicking the icon in the Activity Bar.

b. Click the checklist icon on the top right corner of the Agentforce Commerce Vibes panel.

A checklist screen appears indicating the status of each installed software. The B2C Commerce project isn’t marked as ready if you haven’t created a B2C project yet. For Commerce Org Connection, you enable it in the next step when logging into Salesforce.

The extensions can be disabled if the opened folder in VS Code is untrusted. Make sure you add the folder as a trusted folder in VS Code. See Workspace Trust in the Visual Studio Code documentation.

Note

Launch Commerce Vibes and Log in

After installing the extension, launch it to log into your Salesforce org that’s connected to your B2C Commerce instance.

If you haven’t already done so, launch the extension by clicking the Commerce Vibes icon in the Activity Bar.
In the Agentforce Commerce Vibes panel, click the checklist icon in the top right corner. A checklist appears showing the status of the prerequisite items.
Click the Commerce Org Connection step to open the login dialog.
Provide the org instance URL. The instance URL can be the default login URL, My Domain or custom domain URL, or a sandbox instance. The extension opens a terminal to run the Salesforce CLI login command. After authenticating in your browser, click Check Status to validate the connection. Examples of org URLs:
- Production: login.salesforce.com or mycompany.my.salesforce.com
- Sandbox: mycompany--sandbox1.sandbox.my.salesforce.com
Provide the username and password.

Optional: Log in with the Salesforce CLI

Instead of logging in through the login dialog in VS Code, run the Salesforce CLI command directly in your terminal. See Install Salesforce CLI in the Salesforce CLI Setup Guide.

For production orgs using default login URL:
1sf org login web --set-default
For any other org (sandbox, My Domain, or a custom domain). Replace <your-org-url> with the full URL you use to log into Salesforce (for example, mycompany--dev.sandbox.my.salesforce.com).
1sf org login web --instance-url https://<your-org-url> --set-default

Optional: Configure B2C Commerce Credentials

Administration tasks run the B2C CLI, which requires that you provide a dw.json file with your B2C instance hostname and credentials. For more information about the dw.json file content, see Configuration in the B2C Developer Toolkit.

Create a dw.json at your project root folder.

1{
2   "hostname": "abcd-123.dx.commercecloud.salesforce.com",
3   "code-version": "<version>",
4   "client-id": "<client-id-value>",
5   "client-secret": "<client-secret-value>",
6   "username": "<your-username>",
7   "password": "<your-access-key>"
8}