# Agentforce Commerce Client

The Agentforce Commerce Client adds an Agentforce chat experience to your B2C Commerce storefront. The client delivers the messaging UI, product displays, and agent responses that shoppers interact with at your online store.

The client links your storefront to the B2C Shopper Agent and streams the conversation over Salesforce's real-time messaging service, SCRT2.

The client widget configuration is provided to each B2C Commerce storefront type in different ways.

| Storefront Type | Configuration Method                                                                        |
| --------------- | ------------------------------------------------------------------------------------------- |
| SFRA            | Configure the Commerce Client cartridge and storefront settings.                            |
| PWA Kit         | Configure through the JSON environment variable `COMMERCE_AGENT_SETTINGS`.                  |
| Storefront Next | Configure through a single JSON environment variable `PUBLIC__app__commerce__shopperAgent`. |

You can also set up a custom integration or local widget development, and render the AgentForceWidget component directly.

## Architecture of the Commerce Client

The client connects your storefront directly to the B2C Shopper Agent. Built to be entirely flexible, it doesn't force a specific CSS framework on you. Every element uses a unique `cim-widget` class prefix, ensuring that the widget's styles never clash with your site.

These components make up the client architecture.

- **Presentation.** The client architecture is a React component that manages the presentation layer and renders directly into a Document Object Model (DOM) container element provided by the host application.
- **UI state.** The client holds its open, minimized, and presentation state outside of the React lifecycle, so JavaScript can drive it.
- **Event bus.** Manages UI and session updates. It broadcasts browser-level CustomEvents across the window object. This event-driven architecture ensures the storefront remains independent of the client's internal software systems.
- **Backend connection.** The client streams from SCRT2 over server-sent events.

Bi-directional communication exists between your storefront and the messaging widget. Your application controls the widget via the SDK's event handlers (app-to-widget), enabling custom actions like launching the chat interface from your own button. Conversely, the widget updates your application (widget-to-app) by executing the `onProductResult` callback the moment an agent shares product recommendations.