Agentforce Conversation Client (React)

React component for embedding the Agentforce Conversation Client — the Salesforce agent chat UI — into a UI Bundle. This is a wrapper around @salesforce/agentforce-conversation-client that handles authentication automatically and provides a declarative <AgentforceConversationClient /> component.

Use this when a user expects to add an agent, chat widget, chatbot, conversation client, Agentforce chat, employee agent, service agent, or any Salesforce agent to their React app.

How it works

The component embeds the Agentforce chat experience using Lightning Out 2.0. Authentication is resolved automatically:

• Dev (localhost): fetches a frontdoorUrl from /__lo/frontdoor
• Prod (hosted in org): uses window.location.origin as salesforceOrigin

Step 1: Install

npm install @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client

This automatically installs @salesforce/agentforce-conversation-client (the underlying SDK) as a dependency.

Step 2: Embed in the app layout

import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";

export default function AppLayout() {
  return (
    <>
      <Outlet />
      <AgentforceConversationClient agentId="0Xx000000000000AAA" />
    </>
  );
}

Step 3: Configure (flat props)

Props

| Prop | Type | Required | Description | | ------------------ | ------------------------ | -------- | -------------------------------------------------------------------------------- | | agentId | string | Yes | Agent id to load (18-char Salesforce id, starts with 0Xx). | | inline | boolean | No | If true renders inline; otherwise floating. | | headerEnabled | boolean | No | Shows/hides header; defaults to true for floating and also works in inline mode. | | width | number \| string | No | Inline width (px number or CSS string). | | height | number \| string | No | Inline height (px number or CSS string). | | styleTokens | Record<string, string> | No | Theme tokens for chat UI styling. | | salesforceOrigin | string | No | Salesforce org origin URL. Resolved automatically if not provided. | | frontdoorUrl | string | No | Frontdoor URL for authentication. Resolved automatically in dev if not provided. |

Rendering Modes

Floating (default)

A persistent chat widget overlay pinned to the bottom-right corner. No extra config needed.

<AgentforceConversationClient agentId="0Xx000000000000AAA" />

Inline

The chat renders within the page layout at a specific size.

<AgentforceConversationClient agentId="0Xx000000000000AAA" inline width={420} height={600} />

Agent Selection

Pass agentId to load a specific agent (e.g. travel agent, HR agent). agentId is required.

<AgentforceConversationClient agentId="0Xx000000000000" />

Theming with styleTokens

Use styleTokens to theme the Agentforce Conversation Client. Only override the tokens you need.

<AgentforceConversationClient
  agentId="0Xx000000000000AAA"
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#0176d3",
  }}
/>

Header visibility

Use headerEnabled to explicitly show or hide the chat header. It defaults to true for floating mode and can also be used in inline mode to toggle the header.

<AgentforceConversationClient
  agentId="0Xx000000000000AAA"
  inline
  width={420}
  height={600}
  headerEnabled
/>

Available Style Tokens

For the complete and always up-to-date list of all 60+ style tokens, see the underlying SDK documentation:

@salesforce/agentforce-conversation-client README or node_modules/@salesforce/agentforce-conversation-client/README.md (lines 94-177)

Style tokens are organized by UI area:

• Header (7 tokens): background, text color, hover, active, focus, border, font family
• Messages (10 tokens): colors, padding, margins, border radius, fonts, body width
• Inbound messages (5 tokens): background, text color, width, alignment, hover
• Outbound messages (5 tokens): background, text color, width, alignment, margin
• Input (33 tokens): colors, borders, fonts, padding, buttons, scrollbar, textarea, actions

Prerequisites

• One of salesforceOrigin or frontdoorUrl is required (resolved automatically by the component).
• Use salesforceOrigin when your app is hosted inside a Salesforce org and already has an authenticated session.
• Use frontdoorUrl when embedding the chat client outside Salesforce (e.g. localhost or an external app).
• The org must allow localhost:<PORT> in Trusted Domains for Inline Frames (session settings) for local development.

Underlying SDK

This component wraps @salesforce/agentforce-conversation-client. For lower-level usage (vanilla JS, non-React frameworks), see the Agentforce Conversation Client SDK.

Rules and Skills

This package includes coding-agent rules and skills for automated workflows:

• Rule (rules/embedded-agent-rule.md): Conventions for which component to use, authentication, rendering modes, and placement. Copy into .cursor/rules/ (Cursor) or .clinerules/ (Cline).
• Skill (skills/managing-agentforce-conversation-client/): Step-by-step workflow for adding, updating, and configuring the agent — install (or detect existing via patches), add component, update existing instances, configure inline/theming/agent. Copy into .cursor/skills/ (Cursor) or .cline/skills/ (Cline).

Development

npm run build   # apply patches -> dist
npm run dev     # run from dist
npm run watch   # watch and re-apply