Wir können einen KI-Chatbot in Salesforce mithilfe von Apex-Klassen und LWC oder Fetch API in LWC erstellen. Bei beiden Methoden verwenden wir den API-Schlüssel von ChatGPT. ChatGPT ist ein Chatbot mit künstlicher Intelligenz (KI), der von einer KI-Forschungsagentur, OpenAI, entwickelt wurde. Wir können ChatGPT als Chatbot, virtuellen Assistenten, Sprachübersetzer, Inhaltsgenerator usw. verwenden. In diesem Blog verwenden wir die Fetch-API in LWC, um den Chatbot zu erstellen.
Fetch API ist eine JavaScript-Methode, die eine Möglichkeit bietet, HTTP-Anfragen an den Server zu stellen und Antworten mit Promises zu verarbeiten. Sie bietet einen müheloseren und alternativen Ansatz zur Erzeugung von Netzwerkanfragen im Vergleich zum älteren XMLHttpRequest (XHR). Die folgenden Schritte führen zur Erstellung eines Chatbots mit Salesforce.
Erstellen einer vertrauenswürdigen CSP-Site für den AI-Chatbot in Salesforce
1. Melden Sie sich zunächst bei Ihrer Salesforce-Organisation an.
2. Klicken Sie dann auf das Zahnradsymbol in der oberen rechten Ecke und wählen Sie „Einrichten“, um zur Einrichtungsseite zu navigieren.
3. NGeben Sie nun „CSP“ in das Feld Schnellsuche ein und wählen Sie dann „CSP Trusted Sites“ aus dem Ergebnis. Auf dieser Seite wird eine Liste der bereits registrierten vertrauenswürdigen CSP-Sites angezeigt.
4. Klicken Sie dann auf die Schaltfläche „Neue vertrauenswürdige Site“, um eine neue vertrauenswürdige Site für die Content Security Policy (CSP) zu erstellen.
5. Geben Sie hier einen Namen in das Feld „Name der vertrauenswürdigen Site“ und https://api.openai.com in das Feld „URL der vertrauenswürdigen Site“ ein.
6. Aktivieren Sie nun alle Kontrollkästchen im Abschnitt „CSP-Direktiven“ und speichern Sie sie.
Erstellen Sie einen neuen API-Schlüssel für den AI Chatbot in Salesforce
1. Melden Sie sich bei https://platform.openai.com/ mit Ihren ChatGPT-Kontoanmeldedaten an.
2. NKlicken Sie nun auf das Profilsymbol in der oberen rechten Ecke der Seite und wählen Sie „API-Schlüssel anzeigen“ aus dem Dropdown-Menü. Klicken Sie dann auf die Schaltfläche „+ Neuen geheimen Schlüssel erstellen“, um einen neuen API-Schlüssel für ChatGPT zu erstellen.
3. Geben Sie anschließend einen Namen für den API-Schlüssel ein und klicken Sie auf die Schaltfläche „Geheimschlüssel erstellen“. Es wird sofort ein API-Schlüssel für Sie generiert.
4. Kopieren Sie den generierten API-Schlüssel aus dem Dialogfeld und klicken Sie auf die Schaltfläche „Fertig“.
Hinweis: Ein API-Schlüssel von ChatGPT kann nur zum Zeitpunkt der Erstellung gesehen und kopiert werden. Kopieren Sie ihn also nach der Erstellung und legen Sie ihn für spätere Verwendung irgendwo ab.
Erstellen Sie ein Salesforce DX-Projekt und eine LWC-Komponente für den Chatbot
Um ein Salesforce DX-Projekt zu erstellen, müssen Sie eine Salesforce DX-Umgebung auf Ihrem Gerät einrichten. Diese besteht aus der Installation von Salesforce CLI, Visual Studio Code und Salesforce Extension Pack. Wenn Sie die Salesforce DX-Umgebung noch nicht eingerichtet haben, können Sie diesem Blog folgen, um sie einzurichten:
1. Öffnen Sie zunächst den Visual Studio Code auf Ihrem Gerät.
2. Erstellen Sie nun ein Projekt, indem Sie dem Pfad Ansicht > Befehlspalette folgen und dann SFDX: Projekt erstellen wählen. Wählen Sie „Standard“ als Projektvorlage, geben Sie einen Namen für das Projekt ein und platzieren Sie es auf dem Gerät.
3. Autorisieren Sie dann das Projekt mit Ihrer Salesforce ORG, indem Sie dem Pfad Ansicht > Befehlspalette > SFDX: Authorize an Org folgen, Projektstandard auswählen und einen Org Alias angeben. Sie werden zur Anmeldeseite von Salesforce weitergeleitet.
4. Melden Sie sich hier mit Ihren Salesforce Org-Anmeldedaten an.
5. Wählen Sie nun unter Ansicht > Befehlspalette die Option SFDX: Lightning-Webkomponente erstellen. Geben Sie dann einen Namen für die Komponente ein und drücken Sie die Eingabetaste, wenn Sie gefragt werden, wo Sie die Komponente speichern möchten.
6. Ersetzen Sie anschließend den Standardcode der Html-Datei durch den folgenden Code:
<template>
<lightning-card title="LWC Chatbot with Fetch API" icon-name="standard:live_chat">
<div class="slds-box slds-box_xx-small slds-var-m-horizontal_xx-small slds-theme_default">
<div class="slds-m-bottom_none slds-chat chat">
<ul class="slds-chat-list">
<template for:each={conversation} for:item="message">
<li key={message.id} class="slds-chat-listitem slds-var-m-bottom_small">
<div class={message.containerClass}>
<div class="slds-chat-message__text slds-text-align_left">
<template if:true={message.isBot}>
<span class="slds-avatar slds-avatar_circle slds-var-m-left_xx-small slds-align-middle">
<abbr class="slds-avatar__initials slds-icon-standard-strategy" title="ChatGPT">AI</abbr>
</span>
<span class={message.textClass}>{message.text}</span>
</template>
<template if:false={message.isBot}>
<span class="slds-avatar slds-avatar_circle slds-var-m-left_xx-small slds-align-middle">
<abbr class="slds-avatar__initials slds-icon-custom-custom101" title="User">RM</abbr>
</span>
<span class={message.textClass}>{message.text}</span>
</template>
</div>
</div>
</li>
</template>
</ul>
<template if:true={isLoading}>
<lightning-spinner variant="brand" class="my-spinner" alternative-text="Loading" size="medium">
</lightning-spinner>
</template>
</div>
<div class="slds-grid slds-gutters slds-var-p-horizontal_xx-small">
<div class="slds-col slds-size_3-of-4">
<lightning-input type="text" label="Type your message" value={messageInput} onchange={handleChange} onkeyup={handleKeyUp}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-4 slds-align-bottom slds-var-p-top_medium">
<lightning-button label="Send" onclick={handleSendMessage} variant="brand"></lightning-button>
</div>
</div>
</div>
</lightning-card>
</template>7. Ersetzen Sie auch hier den Standardcode der JavaScript-Datei durch den unten stehenden Code. Vergessen Sie nicht, COMPONENT_NAME durch Ihren Komponentennamen zu ersetzen (machen Sie den ersten Buchstaben groß), während Sie die Standardklasse im Code exportieren. Ersetzen Sie außerdem YOUR_API_KEY durch den API-Schlüssel von ChatGPT, den Sie zuvor generiert haben.
import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class COMPONENT_NAME extends LightningElement {
@track conversation = [];
@track messageInput = '';
@track isLoading = false;
handleChange(event) {
this.messageInput = event.target.value;
}
handleKeyUp(event) {
if (event.keyCode === 13) {
this.handleSendMessage();
}
}
async handleSendMessage() {
this.isLoading = true;
this.template.querySelector(".slds-chat").classList.add('parent');
const userMessage = {
id: 'user-' + this.conversation.length,
role: 'user',
text: this.messageInput,
containerClass: 'slds-chat-message slds-chat-message__text_outbound user-message',
textClass: 'slds-chat-message__text slds-chat-message__text_outbound',
isBot: false
};
this.conversation = [...this.conversation, userMessage];
this.messageInput = '';
try {
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY' // Replace YOUR_API_KEY with your actual API key
},
body: JSON.stringify({
messages: [{
role: 'user',
content: this.conversation[this.conversation.length - 1]?.text
}],
model: 'gpt-3.5-turbo'
})
});
if (response.ok) {
const responseBody = await response.json();
this.isLoading = false;
if (responseBody && responseBody.choices && responseBody.choices.length > 0) {
const assistantMessage = {
id: 'assistant-' + this.conversation.length,
role: 'assistant',
text: responseBody.choices[0].message.content,
containerClass: 'slds-chat-message slds-chat-message__text_inbound',
textClass: 'slds-chat-message__text slds-chat-message__text_inbound',
isBot: true
};
this.conversation = [...this.conversation, assistantMessage];
} else {
this.dispatchEvent(new ShowToastEvent({
title: 'ERROR!!!',
message: 'Error generating ChatGPT response: Empty response',
variant: 'error'
}))
}
} else {
const errorBody = await response.json();
throw new Error('Error: ' + response.status + ' ' + response.statusText + ' - ' + errorBody.error.message);
}
} catch (error) {
this.dispatchEvent(new ShowToastEvent({
title: 'ERROR!!!',
message: error.message,
variant: 'error'
}))
this.isLoading = false;
}
}
}8. Ersetzen Sie auch den Code der XML-Datei durch den folgenden Code:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>9. Speichern Sie nun diese 3 Dateien und klicken Sie mit der rechten Maustaste auf die lwc unter force-app\main\default und wählen Sie SFDX: Deploy Source to Org.
Platzieren Sie die Komponente in einer App-Seite
1. Navigieren Sie nun in Ihrer Salesforce-Organisation über den App Launcher (oben links auf der Seite) zu einer Salesforce-App.
2. Klicken Sie dann auf das Zahnradsymbol und wählen Sie „Seite bearbeiten“, um die Seite im App-Builder zu bearbeiten.
3. Ziehen Sie anschließend die Chatbot-Komponente in die Leinwand in der Mitte und legen Sie sie dort ab. Klicken Sie dann auf die Schaltfläche „Speichern“ in der oberen rechten Ecke. Daraufhin wird ein Dialogfeld zur Aktivierung der Komponente angezeigt.
4. Klicken Sie auf die Schaltfläche „Aktivieren“ und dann auf „Als Org-Standard zuweisen“ und speichern Sie sie.
5. Danach klicken Sie auf den Pfeil nach links in der oberen linken Ecke des App-Builders, um ihn zu verlassen. Jetzt ist Ihr AI Chatbot einsatzbereit.
Die Erstellung eines AI Chatbots ist Teil der ChatGPT und Salesforce Integration. Sie können auch unseren anderen Blog über ChatGPT und Salesforce Integration mit Zapier lesen, der den Lead-Datensatz zusammenfasst und die Zusammenfassung in das Beschreibungsfeld des jeweiligen Lead-Datensatzes einfügt. Sie können über die Verwendung von Webhook, ChatGPT und Salesforce in Zapier lernen
Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung in Bezug auf Salesforce benötigen. Sie können auch die Salesforce-Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.
