---
schema_version: "1"
id: 23d21a3a1430a7e3ae71035838178b043c92ece8e1f13bb9f07eb5c5440bd865
title: Add Agentforce Conversation Client to Your React App with Agentforce Vibes
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/agentforcevibes/guides/files/afv-reactdev-acc.md
canonical_url: https://developer.salesforce.com/docs/platform/code-builder/guide/afv-reactdev-acc.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5169eb194d15411996386553a8531b92b2775cefcaa7b3dd18babdf39a073657
products:
  - Agentforce Vibes IDE
  - salesforcedx
---
# 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](https://developer.salesforce.com/docs/platform/multiframework/guide/reactdev-acc.html) 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](https://developer.salesforce.com/docs/platform/multiframework/guide/mfw-setup.html#optional-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."_