ChatGPT in Salesforce using LWC (Lightning Web Components)?????????

Hello my fellow Aspirant!! If you’re a Salesforce developer with a good grasp of LWC, Apex, and API customization skills, this blog is for you. Today, we’ll be discussing how to implement the ChatGPT API in Salesforce using Lightning Web Components (LWC). Let’s get started!

Prerequisites

Before we begin, make sure you have the following:

• A Salesforce Developer Edition account.
• Basic knowledge of Salesforce LWC and Apex.
• Familiarity with REST APIs.

Step 1: Setting up ChatGPT API

Firstly, you need to set up the ChatGPT API. For this, you need to create an account on OpenAI and get your API key & also note organization ID.

Step 2: Creating a Named Credential

In Salesforce, navigate to Setup > Security > Named Credentials. Create a new Named Credential with the URL as https://api.openai.com and the Identity Type as Named Principal. In the Authentication section, select Per User and fill in the Username and Password fields with your OpenAI account details.

Step 3: Creating an Apex Class

Next, create an Apex class that will make a callout to the ChatGPT API. Here’s a sample code snippet:

public class openAIclass{
    @AuraEnabled
    public static string textcompletionCeck(string texttoCheck){
        
    String openaiApiKey = 'sk-s78q***************************************h';
    
    String openaiEndpoint = 'https://api.openai.com/v1/completions';
    
    list<id> kaid = new list<id>();
    
        kaid.add('ka67d000000GnDrAAK');
        kaid.add('ka67d000000GnDqAAK');
    
    // Query for a list of knowledge articles from the above list
    List<Knowledge__kav> kas = [select id,Documentation_Details__c,Title, CreatedDate, CreatedById from Knowledge__kav where PublishStatus = 'Online'  and Id in:kaid ];
    
    // Convert the list of accounts to JSON
    String kaJSON = JSON.serialize(kas);
    
    Map<String, Object> jsonBody = new Map<String, Object>();
    jsonBody.put('model', 'text-davinci-003');
    jsonBody.put('prompt', kaJSON + ' '+texttoCheck);
    jsonBody.put('max_tokens', 2999);
    jsonBody.put('temperature', 0);
    
    String jsonBodyString = JSON.serialize(jsonBody);
    
    // Create a new HttpRequest object
    HttpRequest req = new HttpRequest();
    
    // Set the method to POST
    req.setMethod('POST');
    
    // Set the endpoint URL
    req.setEndpoint(openaiEndpoint);
        
    //Replace org-c******************4 with your organization ID from OpenAI
    req.setHeader('OpenAI-Organization', 'org-c******************4');
    req.setBody(jsonBodyString);
    
    // Set the content type header
    req.setHeader('Content-Type', 'application/json');
    
    // Set the authorization header
    req.setHeader('Authorization', 'Bearer ' + openaiApiKey);
    
    // Create a new Http object
    Http http = new Http();
    
    // Send the request and get the response
    HttpResponse response = http.send((req));
      
        fromJSON responseRetrived = fromJSON.parse(string.valueof(response.getBody()));
        system.debug('response check --> '+string.valueof(response.getBody()));
        //return string.valueof(response.getBody());
        return responseRetrived.choices[0].text;
    }
    }        

Step 4: Creating a Lightning Web Component

Now, create a LWC that will use the Apex class to interact with the ChatGPT API. Here’s a sample code snippet:

HTML file:

<template>
     <div class=" slds-box slds-theme_shade slds-theme_alert-texture">
     <lightning-layout>
        <lightning-layout-item size="9">
            <lightning-input variant="label-hidden" value={texttocheck} onchange={assignData}></lightning-input>
            
        </lightning-layout-item>
        <lightning-layout-item size="3">
            <lightning-button label="Search" onclick={doSearch}></lightning-button>
        </lightning-layout-item>
    </lightning-layout><br/>
      <div if:true={spin} style="height:4rem;position:relative;background-color:#16325c;">
         <lightning-spinner if:true={spin} alternative-text="Loading" size="small" ></lightning-spinner>
          </div>
        <p if:false={spin}>
            {responseReturned}
            </p>
    </div>
</template>        

Here’s a breakdown of the code:

• <template>: This is the root tag for all LWC HTML files. All markup must be inside this tag.
• <div class=" slds-box slds-theme_shade slds-theme_alert-texture">: This div uses Salesforce Lightning Design System (SLDS) classes to style the box.
• <lightning-layout> and <lightning-layout-item>: These tags are used to create a flexible grid layout. The layout item with size="9" contains an input field, and the one with size="3" contains a button.
• <lightning-input>: This is a Lightning input field where the user can enter text. The value attribute is bound to the texttocheck property of the component, and the onchange event handler is set to the assignData method.
• <lightning-button>: This is a Lightning button that the user can click to submit the input. The onclick event handler is set to the doSearch method.
• Spinner and Response Display: If spin is true, a spinner is displayed using the <lightning-spinner> tag. If spin is false, the response from the ChatGPT API is displayed inside a <p> tag. The response is bound to the responseReturned property of the component.

This template creates a simple user interface where users can enter a prompt, submit it to get a response from the ChatGPT API, and see the response displayed on the page.

JS file:

import { LightningElement,track,api } from 'lwc';
import fetchCompletion from '@salesforce/apex/openAIclass.textcompletionCeck';

export default class AIGPT extends LightningElement {
@track texttocheck;
@track responseReturned;
spin 

    assignData(event){
        this.texttocheck = event.target.value;
    }

    async doSearch(){
        this.spin = true;
        await fetchCompletion({texttoCheck:this.texttocheck}).then(result=>{
            console.log('*******',result);
            this.responseReturned = result;         
        }).catch(error=>{            
            alert(JSON.stringify(error));
        });
        this.spin = false;
    }
}        

Here’s a breakdown of the code:

• Import Statements: The necessary modules and classes are imported at the beginning. This includes LightningElement from the lwc module, which is the base class for the Lightning Web Component. The track decorator is used to make the property reactive. The api decorator is used to expose public property or method. The fetchCompletion method from the openAIclass Apex class is also imported.
• Class Definition: The AIGPT class extends from LightningElement, which means it’s a Lightning Web Component.
• Properties: The @track decorator is used with texttocheck and responseReturned properties, which means these properties are reactive and any changes to them will re-render the component. The spin property is used to control a spinner (loading indicator), but it’s not defined as reactive so changes to it won’t cause a re-render.
• assignData Method: This method is an event handler that gets triggered when there’s an input event. It updates the texttocheck property with the value of the input field.
• doSearch Method: This asynchronous method calls the fetchCompletion Apex method with texttoCheck as a parameter. It sets spin to true at the beginning to show a loading indicator, and sets it to false at the end to hide it. If the Apex method call is successful, it logs the result and assigns it to responseReturned. If there’s an error, it shows an alert with the error message.

Step 5: Testing Your Implementation

Finally, add your LWC to a Salesforce page and test it out. Enter a prompt in the input field and submit it. You should see a response from the ChatGPT API displayed on your page.

And there you have it! You’ve successfully implemented the ChatGPT API in Salesforce using LWC. This opens up a whole new world of possibilities for creating interactive and dynamic experiences in Salesforce.

Remember, this is just a basic implementation. You can enhance this by adding error handling, customizing the response format, and much more based on your application’s requirements. And remember this is not suitable when you need data privacy. Happy coding!!??