Discover Agentforce Conversation Client for React Applications
Learning Objectives
After completing this unit, you'll be able to:
- Describe when to use Agentforce Conversation Client and what it provides in an external React application.
- Explain how Lightning Out 2.0 and the embedAgentforceClient() function support framework-agnostic ACC integration.
Bring Conversational AI Interactions into React
Imagine you’re enhancing a property-management dashboard that employees use to manage properties and maintenance requests. Employees want to ask an Agentforce Employee Agent to list vacant units, summarize a maintenance request, or display property information—without leaving the dashboard.
The same approach works for other external web applications. For example, an employee-support portal can provide answers about company policies within the tools employees already use.
These applications already have data, navigation, workflows, and visual design. Adding an employee agent shouldn’t require the development team to rebuild the complete conversation interface, response-handling logic, and Salesforce connection layer.
Agentforce Conversation Client (ACC) provides the frontend capabilities required for that experience. It supplies the conversation panel, message rendering, user input, response streaming, connection logic, and supported rich-component rendering. The host application supplies the surrounding workflow and a location where ACC can render.
In this badge, you configure Salesforce prerequisites and add ACC to a React component so an employee agent conversation can render in an external application.
The ACC Web SDK is designed for Agentforce Employee Agent experiences in external web applications. This badge uses React as the implementation example, but the SDK is framework-agnostic and works with frontend technologies that provide a suitable DOM container.
How ACC Works in an External Application
The ACC Web SDK uses Lightning Out 2.0 to render Salesforce-managed UI in an application that isn’t built with Lightning web components, such as a standalone React application.
The host application provides a DOM container. The embedAgentforceClient() function initializes ACC and renders the conversation interface in that container.
The Salesforce-managed interface runs inside an iframe in the Salesforce context. The host application controls where the container appears on the page, while ACC manages the supported conversation experience within the iframe.
This separation allows the surrounding application to use React or another frontend technology without recreating the Salesforce-managed interface. Because embedAgentforceClient() renders ACC in a DOM container instead of relying on a React-specific API, the same integration approach works with compatible frontend frameworks.
What ACC Provides
With ACC, you can:
-
Reduce UI rebuild effort. Add a prebuilt ACC UI container to your app instead of creating the conversation interface and connection logic for each implementation.
-
Stream Agentforce Employee Agent responses in real time. ACC handles token-by-token streaming for supported content and displays available progress status updates in the conversation interface.
-
Connect your UI to an Agentforce Employee Agent. Connect your custom UI to an Agentforce Employee Agent with configured subagents, tools, and instructions. ACC provides the connection between your application’s conversation interface and the employee agent.
-
Render rich components with Lightning Types. ACC automatically maps supported standard and custom Lightning Types to UI renderers for input, output, list, and picklist experiences. This capability lets users interact with supported structured content directly within the conversation.
ACC renders supported structured Agentforce Employee Agent responses as interactive property cards inside the conversation.
The following example shows property information rendered as custom property cards in the ACC conversation.
Render Supported Components at Runtime
ACC interprets the Agentforce Employee Agent response and displays the appropriate supported UI component. For a rich custom rendition, define a custom component and associate it with the corresponding custom Lightning Type. Otherwise, ACC uses the available default rendition. ACC’s Dynamic Rendering Engine constructs supported components from Employee Agent planner input and Lightning Type responses.
Choose a Conversation Entry Point for Your Web App
Use the default Floating Action Button (FAB) to open the ACC interface, or add ACC inline within a designated parent container in your application layout.
Floating Mode
A Floating Mode entry point is ready before you open the conversation.
After you select the button, ACC opens the conversation as a floating panel over the host application. The floating panel lets you interact with the Agentforce Employee Agent without leaving the host application.
To match ACC to your web application’s visual design, use supported ACC UI style tokens to update fonts, colors, borders, spacing, headers, message blocks, and input areas. You can also provide custom images and descriptive alt text for the agent avatar and header. With Floating Mode, you can replace the standard button icon with a custom image and alt text.
This improves consistency and flexibility.
-
Deliver a consistent Employee Agent conversation experience. Use ACC whether you access the Agentforce Employee Agent in Agentforce Service, a customer accesses the Employee Agent on a public website, or embed the Employee Agent in a custom app.
-
Use ACC across frontend technologies. Use the embedAgentforceClient() function to initialize ACC and render the conversation interface in a designated container. The ACC Web SDK is framework agnostic, so the integration isn’t limited to React.
Use the External ACC Web SDK Path
This badge focuses on a standalone React application hosted outside Salesforce. For this use case, use the external ACC Web SDK.
In this unit, you learned when to use ACC, what the external Web SDK provides, and how embedAgentforceClient() renders the interface in a frontend application. In the next unit, you learn about app requirements related to authentication, trusted-domain, and cookie-policy configuration, and how to initialize ACC in a React component.