Add Agentforce Conversation Client to Your React App with Agentforce Vibes

With Agentforce Vibes, you can integrate conversational AI interactions into interal React apps for employee use cases. To add these interactions, you integrate the Agentforce Conversation Client (ACC). The ACC package is built on the Lightning Out 2.0 platform as a Lightning Web Component Interface (LWCI). This approach enables the conversational UI to be seamlessly embedded and rendered within non-LWC tech stacks, such as a React host environment.

By embedding an Agentforce Conversation Client in your React app, your users can retrieve complex information, such as high-demand property data or real-time sales metrics, through natural conversation instead of manually researching vast amounts of data.

To learn more about Agentforce Conversation Client in React apps, see Integrate Agentforce Conversation Client in React Apps the Salesforce Multi-Framework Developer Guide.

1 Prepare Your VS Code Workspace

Agentforce Vibes uses rules and skills to understand your intent, automatically manipulating project files like index.tsx and managing necessary npm dependency installations.

For the extension to process the necessary agent skills, make sure that you configured your environment and Salesforce org correctly. See Configure Agentforce Conversation Client in the Salesforce Multi-Framework Developer Guide.

2 Vibe an Agent Panel into an Application

With the workspace configured, utilize natural language prompts in the IDE to define the structural placement, dimensions, and docking behavior of the panel within the React DOM.

Example Prompt: “Create an Agentforce Employee Agent panel that is docked to the right of the main screen.”

3 Vibe Refinements to the Agent Panel

Configure visual states and styling, such as floating/expanded transitions or specific header border radiuses, without writing manual CSS.

Example Prompt: “The Agentforce Employee Agent panel should start as a floating fab icon docked to the lower left side of the page; when a user clicks the icon, it should expand into a full chat panel.”