# 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. 1. Open Visual Studio Code. 2. 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](https://code.visualstudio.com/docs/configure/extensions/extensions) in the Visual Studio Code documentation. 3. Launch the Commerce Vibes extension by clicking the ![Commerce Vibes icon](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/commerce-vibes/cv-com-vibes-icon.png) icon in the Activity Bar. 4. Click the checklist icon on the top right corner of the Agentforce Commerce Vibes panel. 5. In the checklist panel, click **B2C Commerce CLI** to install the B2C CLI to run CLI commands locally. This action runs the `npm install -g @salesforce/b2c-cli` command. If you have an earlier version of the B2C CLI, it is updated. The output of the command displays in the Terminal panel. After the installation completes, the status of the **B2C Commerce CLI** dependency is refreshed in the checklist panel. 6. Click **B2C Commerce Extension** to install the Salesforce B2C Commerce extension from the VS Code Marketplace, which is a dependency of Commerce Vibes. For more information about the B2C CLI and extension, see [Agentic B2C Developer Toolkit](/docs/commerce/b2c-commerce/guide/b2c-developer-tooling.md). After the installation completes, the status of the **B2C Commerce Extension** dependency is refreshed in the checklist panel. 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. ![Checklist panel shows the status of installed extensions and CLI](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/commerce-vibes/cv-checklist.png) :::note 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](https://code.visualstudio.com/docs/editing/workspaces/workspace-trust) in the Visual Studio Code documentation. ::: ## Launch Commerce Vibes and Log in After installing the Commerce Vibes extension, launch it to log into your Salesforce org. 1. If you haven't already done so, launch the extension by clicking the Commerce Vibes icon ![Commerce Vibes icon](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/commerce-vibes/cv-com-vibes-icon.png) in the Activity Bar. 2. 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. 3. Click the **Commerce Org Connection** step to open the login dialog. 4. 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` 5. 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](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm) in the *Salesforce CLI Setup Guide*. - For production orgs using default login URL: ```bash sf org login web --set-default ``` - For any other org (sandbox, My Domain, or a custom domain). Replace `` with the full URL you use to log into Salesforce (for example, `mycompany--dev.sandbox.my.salesforce.com`). ```bash sf org login web --instance-url https:// --set-default ``` ## Optional: Configure B2C Commerce Credentials Administration tasks need credentials for your B2C Commerce instance. A project `dw.json` file is one option; the B2C CLI and MCP also support global configuration and environment variables. For more information about the `dw.json` file content, see [Configuration](https://salesforcecommercecloud.github.io/b2c-developer-tooling/guide/configuration.html#configuration-file) in the *Agentic B2C Developer Toolkit*. 1. Create a `dw.json` at your project root folder. ``` { "hostname": "abcd-123.dx.commercecloud.salesforce.com", "code-version": "", "client-id": "", "client-secret": "", "username": "", "password": "" } ``` 2. To provide the `client-id` and `client-secret`, see [Add an API Client in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_account_manager_add_api_client_id.htm\&type=5). 3. To access the code version in B2C Commerce, go to **Administration > Site Development > Code Deployment**. 4. For WebDav authentication, which is used only for code deployments and file operations, provide a username and password. For the password, use the access key. See [Create an Access Key for Logins for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_access_keys_for_business_manager.htm\&type=5) in *Salesforce Help*. 5. To add an OCAPI data permission, go to **Administration > Site Development > Open Commerce API Settings**, add specific permission for the Account Manager client ID. For example, to run B2C jobs, add the value for the client ID: `"resource_id": "/jobs/*/executions"`. ## See Also - [Get Started with Agentforce Commerce Vibes](/docs/commerce/b2c-commerce/guide/cv-build-storefront-next-project.md)