> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/agent-chat.md). # Agent Chat The Agent Chat component displays a conversational chat interface powered by a Salesforce Agentforce agent. Use it on Lightning Pages or Experience Sites to let users interact with an AI agent directly from a Salesforce record or app page. ## Overview {% stepper %} {% step %} #### Add the Agent Chat component * In the **Component Library** (left sidebar), locate **Agent Chat** under **Data Display**. * Drag it onto the **Canvas**. {% endstep %} {% step %} #### Set the Agent API Name * Select the component on the Canvas. * In the **Properties Panel**, enter the API name of your Agentforce agent in the **Agent API Name** field. * Example: `Agentforce_Employee_Agent` > **Why**: This connects the chat interface to a specific Agentforce agent. The value must match the agent's API name exactly as configured in Salesforce. > {% endstep %} {% step %} #### Customize the welcome screen (optional) * Set **No Results Title** to the greeting users will see before sending their first message (e.g., `How can I help you today?`). * Leave **Hide Welcome Image** off to show the default robot illustration. Toggle it on for a plain, text-only welcome state. {% endstep %} {% step %} #### Set the Chat Input placeholder Under **Chat Input**, update **Placeholder** to guide users on what to type (e.g., `Describe your task or ask a question...`). {% endstep %} {% step %} #### Save and activate * Click **Save**, then **Activate**. * Add the Dynamic Component to a Lightning Page via Lightning App Builder. {% endstep %} {% endstepper %} ## Configuration To configure the Agent Chat, select it on the canvas. The **Edit Agent Chat** panel opens on the right. The sections below mirror the Properties tab from top to bottom. ### Agent Controls which Agentforce agent powers the chat. **Agent API Name** — The API name of the Agentforce agent to connect to. The value must match the agent's API name in Salesforce Setup exactly (e.g., `AgentforceEmployee` or `AgentforceEmployee@1.0.0`). ### Content Controls the welcome screen displayed before the user sends their first message. * **Hide Welcome Image** — If enabled, the default robot illustration is hidden on the welcome screen. Defaults to off. * **No Results Title** — The heading shown on the welcome screen before any messages are exchanged. Defaults to `Let's chat!` * **No Results Message** — A supporting message shown below the title on the welcome screen. Leave blank to show the title only. * **Disabled** — If enabled, the chat is locked and users cannot type or send messages. Use to temporarily disable the component without removing it from the page. Defaults to off. ### Chat Input Controls the message input area at the bottom of the component. * **Placeholder** — The hint text shown inside the input field before the user types. Defaults to `Describe your task or ask a question…` ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Use Cases ### Employee Self-Service Assistant * **Agent API Name**: `Agentforce_Employee_Agent` * **No Results Title**: `How can I help you today?` * **Placeholder**: `Ask me anything about HR policies, benefits, or IT requests...` * Add to the Home Page so employees can access the agent from any context. ### Case Resolution Assistant * **Agent API Name**: `Agentforce_Case_Agent` * **No Results Title**: `Need help resolving this case?` * **Placeholder**: `Describe the issue or ask a question...` * Add to a Case Record Page. The agent has access to the case context through the Agentforce configuration. ### Gated Agent (Admin-Controlled) * Use the **Disabled** toggle with a **Set Component Visibility** rule to enable the chat only for specific profiles or when a record field meets a condition (e.g., `Status = Active`). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Agent Chat. Configure them from the **Interactions** tab of the Edit Agent Chat panel. ### Message Received Fires each time the agent sends a response. Use the **lastAgentResponse** output to read the agent's reply and drive downstream flow logic, update other components, or store the response in a variable. ## Output Variables The Agent Chat exposes this output variable you can reference elsewhere on the page after the agent responds. ### Message Received Updates each time the agent sends a response to the user. | Output variable | Type | What it returns | | ----------------------- | ------------- | ------------------------------------------------------------------ | | **Last Agent Response** | Text (String) | The full text of the most recent response received from the agent. | > **Example:** After the agent replies, use **Last Agent Response** to display the response in a rich-text component elsewhere on the page, or store it in a variable for downstream logic. ## Troubleshooting Common Issues * **The chat loads but the agent does not respond** — The **Agent API Name** does not match the agent's API name in Salesforce Setup, or the agent is inactive. Go to Salesforce Setup → Agentforce, confirm the API name and that the agent is active, then copy the exact API name into the component's **Agent API Name** field. * **The welcome screen does not appear** — **Hide Welcome Image** is toggled on and **No Results Title** is blank, leaving the welcome state empty. Either toggle **Hide Welcome Image** off, or enter a value in **No Results Title**. * **Users cannot type in the input field** — The **Disabled** toggle is on. Toggle **Disabled** off in the Properties Panel, then save and re-activate. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/agent-chat.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.