Managing Agentforce using Salesforce Lightning Web Component

HomeMagulan Duraipandian

Managing Agentforce using Salesforce Lightning Web Component

Magulan Duraipandian

Mastering Agentforce in Salesforce: A Developer’s Guide to lightning/accApi Using LWC

As Salesforce continues to innovate with AI-driven interactions, Agentforce has emerged as a powerful tool for building intelligent, conversational experiences. For Salesforce Developers, Architects, and Admins looking to seamlessly weave these conversational agents into custom user interfaces, the Lightning Web Component (LWC) framework provides a native, highly efficient pathway.

In this post, we will explore how to manage and integrate Agentforce using the lightning/accApi module. We’ll break down the core concepts, provide a complete working code sample, and wrap up with crucial best practices to ensure your implementation is enterprise-ready.

What is the lightning/accApi Module?

The lightning/accApi is a headless Lightning Web Component module specifically engineered as the Agentforce Conversation Client API. It is designed to bridge the communication gap between your custom LWC components and Agentforce panels.

Key Aspects of lightning/accApi:

  • Purpose: It facilitates seamless messaging and deep integration between your custom UI elements and the core Agentforce panel.
  • Mechanism: It acts as a router for app-to-panel messaging within Agentforce experiences.
  • Implementation: It is imported as a standard module within your JavaScript file, allowing you to trigger actions like opening chats, closing chats, and passing specific conversational utterances directly to the bot.

Prerequisite: Finding Your Bot ID

Before you can programmatically send messages to your Agentforce agent, you need to know its specific Bot ID. You can easily retrieve this using a simple SOQL query in the Developer Console or Salesforce CLI.

Use the following SOQL query to find your Bot ID:

SELECT Id, DeveloperName FROM BotDefinition

Sample Implementation: Employee Agentforce Manager

Below is a complete LWC sample that demonstrates how to open a chat, close a chat, and send a predefined utterance to your Agentforce agent.

1. The HTML Template (employeeAgentforceManager.html)

This template sets up a simple card with three distinct actions: sending a predefined command (“Top Cases”), opening the chat window, and closing it.

<template>
    <lightning-card title="Employee Agentforce Manager">                      
        <div class="slds-m-around_medium">                                    
                                                                              
            <div class="slds-m-bottom_small">                                 
                <lightning-button                                             
                    variant="brand"                                           
                    label="Top Cases"                                         
                    onclick={handleSendMessage}>                              
                </lightning-button>                                           
            </div>                                                            
                                                                              
            <div class="slds-m-bottom_small">                                 
                <lightning-button                                             
                    variant="brand"                                           
                    label="Open Chat"                                         
                    onclick={handleOpenChat}>                                 
                </lightning-button>                                           
            </div>                                                            
                                                                              
            <div class="slds-m-bottom_small">
                <lightning-button
                    variant="brand"
                    label="Close Chat"
                    onclick={handleCloseChat}>
                </lightning-button>
            </div>                                                            

        </div>                                                                
    </lightning-card>
</template>

2. The JavaScript Controller (employeeAgentforceManager.js)

Here, we import the open, close, and execute methods from the headless lightning/accApi module to manage the Agentforce state.

import { LightningElement } from 'lwc';                                                          
import { open, close, execute } from 'lightning/accApi';                                       

export default class EmployeeAgentforceManager extends LightningElement {     
    /**
     * Opens the Agentforce chat window
     */
    async handleOpenChat() {                                                  
        try {                                                                 
            await open();
        } catch (error) {                                                     
            console.error(error);                                             
        }                                                                     
    }                                                                         

    /**
     * Closes the Agentforce chat window
     */
    async handleCloseChat() {                                                 
        try {                                                                 
            await close();
        } catch (error) {                                                     
            console.error(error);                                             
        }                                                                     
    }                                                                         

    /**
     * Sends a predefined utterance to the Agentforce agent
     */
    async handleSendMessage() {                                               
        const utterance = 'Show my Top Cases';                                
        try {                                                                 
            await execute(utterance, '0XxWs0000017VHpKAM');
        } catch (error) {                                                     
            console.error(error);                                             
        }                                                                     
    }                                                                         
}

3. The Metadata File (employeeAgentforceManager.js-meta.xml)

This exposes the component so that an Admin can drag and drop it onto a Lightning Home Page using the Lightning App Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>66.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Reference Article

https://developer.salesforce.com/docs/platform/accsdk/guide/acc-api.html

Leave a Reply