---
schema_version: "1"
id: 6539df747807519cd4f32b5afeaeb627d63f4e7afbad252557bc433daed786cc
title: Agentforce Commerce Client Overview
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/agentforce-commerce-client/agentforce-commerce-client-overview.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/agentforce-commerce-client-overview.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: abb4fd216ed587f5b867ac3a706a1c17d351fbe8c1ede335b433f32e2930c251
products:
  - Composable Storefront
  - Salesforce APIs
---
# Agentforce Commerce Client Overview

The Agentforce Commerce Client is an embeddable, brand-native widget that connects a B2C Commerce storefront to an AI-powered shopping agent. It renders the conversational UI, product displays, and agent-action responses that shoppers interact with, and it exposes a JavaScript SDK so your storefront can drive and observe that UI.

The client is distributed as the `@cimulate/copilot-widget` npm package and as UMD bundles you load from a CDN. It's built with React 18 and TypeScript, but you don't need React to use it: the CDN bundles expose a global SDK that works from plain JavaScript on any storefront.

**note:** This guide documents the reusable client itself. Some storefront frameworks have their own enablement path. For Storefront Next, see [Shopper Agent for Storefront Next](https://developer.salesforce.com/docs/sfnext/guides/sfnext-shopping-agent.md), which handles enablement and container setup. For SFRA, see [Install the Agentforce Commerce Client on SFRA](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-on-sfra.md), which installs the `plugin_commerce_client` cartridge and configures the widget from Business Manager. For PWA Kit, see [Install the Agentforce Commerce Client on PWA Kit](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-on-pwa-kit.md), which enables the client through the `COMMERCE_AGENT_SETTINGS` Managed Runtime environment variable. This guide covers the client's configuration, styling, and extension surface. On a custom or headless storefront, you set up the container yourself, following this guide.

## When you need this guide

Most storefront frameworks wrap the client and manage its setup for you. Read this guide when you:

- Embed the client directly on a custom or headless storefront.
- Style or theme the widget to match your brand.
- Override the widget's built-in product and agent-action rendering with your own components.
- Control the widget from your storefront code (for example, open it from your own button), or listen for widget events.

## How the client connects

The client connects your storefront to a Salesforce Agentforce agent, streaming the conversation over Agentforce SCRT2 using Server-Sent Events. You work with it through these integration surfaces:

| Surface | Value |
| --- | --- |
| npm import | `@cimulate/copilot-widget/messaging` |
| CDN global | `window.CimulateMessaging` |
| Injection function | `injectMessagingWidget()` |
| Top-level React component | `AgentForceWidget` |
| Required config | `messagingConfig` with `scrt2Url`, `orgId`, and `esDeveloperName` |

## Architecture at a glance

The client sits between your storefront and the agent backend:

- **Presentation.** A React component tree renders into a DOM container element you provide.
- **UI state.** The widget holds its open, minimized, and presentation state outside React's lifecycle, so vanilla JavaScript can drive it.
- **Event bus.** UI state changes propagate as browser `CustomEvent`s on `window`, decoupling your storefront from the widget's internals.
- **Backend connection.** The widget streams from Agentforce SCRT2 over Server-Sent Events.

Communication runs in two directions. Your storefront controls the widget through the SDK's `eventHandlers` (app to widget), for example to open the widget from your own launcher button. The widget reports activity back through the `onProductResult` callback, which fires when the agent returns products (widget to app).

The widget is non-opinionated by design. It ships with no CSS framework, and every element carries a `cim-widget-` class prefix so widget styles never leak into your page and your page's styles never bleed into the widget.

## Related resources

- [Install the Agentforce Commerce Client](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-the-commerce-client.md)
- [Configure the Agentforce Commerce Client](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configure-the-commerce-client.md)
- [Style and Theme the Widget](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/style-and-theme-the-widget.md)
- [Choose a Customization Approach](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/customization-decision-guide.md)
- [Component Override SDK](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/component-override-sdk.md)