feature-angular-agentforce-conversation-client

A drop-in <app-agentforce-conversation-client /> Angular component that embeds an Agentforce employee agent using the @salesforce/agentforce-conversation-client SDK over Lightning Out 2.0.

Supply an agentId and the component renders a floating or inline conversation surface. An AgentforceEmbedService owns the one-time Lightning Out embed per window.

B2E only. This feature targets internal, employee-facing apps (CustomApplication). Employee agents are not intended for public / guest (B2X) sites.

Built as an Angular standalone component using signals.

How it works

• In production, the Salesforce origin is read from globalThis.SFDC_ENV.orgUrl.
• In local development, the frontdoor URL is fetched from the dev server so the embed can reach your org.
• The wrapper fixes showAvatar: false and channel: "Vibes", and initializes the Lightning Out embed once per window (subsequent mounts reuse it).

Install

npx @salesforce/ui-bundle-features-experimental install angular-agentforce-conversation-client --ui-bundle-dir <your-ui-bundle>

This copies the conversation-client component and embed service into src/app/features/agentforce, plus its public types.

Usage

Embed in a layout or page

Import the standalone component and place it in a template, passing at minimum an agentId:

import { Component } from "@angular/core";
import { AgentforceConversationClientComponent } from "./features/agentforce";

@Component({
  selector: "app-layout",
  standalone: true,
  imports: [AgentforceConversationClientComponent],
  templateUrl: "./app-layout.html",
})
export class AppLayoutComponent {}

<app-agentforce-conversation-client agentId="0Xx000000000000AAA" />

Inputs

| Input | Type | Required | Description | | ------------------ | ------------------------ | -------- | ------------------------------------------------------------- | | agentId | string | Yes | The Agentforce agent id to embed. | | agentLabel | string | No | Display label for the agent. | | inline | boolean | No | Render inline instead of floating (default floating). | | width | string \| number | No | Width when rendered inline. | | height | string \| number | No | Height when rendered inline. | | headerEnabled | boolean | No | Show or hide the conversation header. | | showHeaderIcon | boolean | No | Show or hide the header icon. | | isFileBased | boolean | No | Use a file-based agent. | | styleTokens | StyleTokens | No | Theming tokens (header/message colors, etc.). | | salesforceOrigin | string | No | Override the resolved Salesforce origin. | | frontdoorUrl | string | No | Explicit frontdoor URL (needed outside a Salesforce web app). | | onReady | AgentforceReadyHandler | No | Called when the client is ready. | | onError | AgentforceErrorHandler | No | Called on initialization/runtime error. |

Rendering modes

• Floating (default) — a launcher that opens a floating conversation panel.
• Inline — set [inline]="true" and provide [width] / [height] to embed the conversation directly in the page.

<app-agentforce-conversation-client
  agentId="0Xx000000000000AAA"
  [inline]="true"
  [width]="'420px'"
  [height]="'640px'"
/>

Theming

Pass [styleTokens] to customize colors (header, inbound/outbound messages, input area, etc.). See the SDK README for the full token list.

Prerequisites

• The SDK requires a resolvable origin — one of salesforceOrigin / frontdoorUrl, or SFDC_ENV.orgUrl in a deployed app.
• Outside a Salesforce web app, pass frontdoorUrl explicitly.
• For local inline embedding, your org's Trusted URLs / Trusted Domains for Inline Frames must permit localhost.

Notes

• The component is embedded in a layout or page, not wired as a route.
• This feature adds the @salesforce/agentforce-conversation-client package dependency; Angular is provided by the base app.

Development

# Build the feature (applies patches from template to dist)
npm run build

# Type-check
npm run typecheck