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.
This guide documents the reusable client itself. Some storefront frameworks have their own enablement path. For Storefront Next, see Shopper Agent for Storefront Next, which handles enablement and container setup. For SFRA, see Install the Agentforce Commerce Client on SFRA, 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, 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.
Note
Most storefront frameworks wrap the client and manage its setup for you. Read this guide when you:
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 |
The client sits between your storefront and the agent backend:
CustomEvents on window, decoupling your storefront from the widget’s internals.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.
j