{"id":13532,"date":"2023-06-13T12:07:49","date_gmt":"2023-06-13T12:07:49","guid":{"rendered":"https:\/\/www.bay20.com\/?p=13532"},"modified":"2025-05-14T16:10:40","modified_gmt":"2025-05-14T10:25:40","slug":"create-ai-chatbot-in-salesforce-mit-lwc","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/create-ai-chatbot-in-salesforce-mit-lwc\/","title":{"rendered":"AI Chatbot in Salesforce mit LWC erstellen"},"content":{"rendered":"\n

Wir k\u00f6nnen 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\u00fcssel von ChatGPT. ChatGPT ist ein Chatbot mit k\u00fcnstlicher Intelligenz (KI), der von einer KI-Forschungsagentur, OpenAI<\/a><\/strong>, entwickelt wurde. Wir k\u00f6nnen ChatGPT als Chatbot, virtuellen Assistenten, Sprach\u00fcbersetzer, Inhaltsgenerator usw. verwenden. In diesem Blog verwenden wir die Fetch-API in LWC, um den Chatbot zu erstellen.<\/p>\n\n\n\n

Fetch API ist eine JavaScript-Methode, die eine M\u00f6glichkeit bietet, HTTP-Anfragen an den Server zu stellen und Antworten mit Promises zu verarbeiten. Sie bietet einen m\u00fcheloseren und alternativen Ansatz zur Erzeugung von Netzwerkanfragen im Vergleich zum \u00e4lteren XMLHttpRequest (XHR). Die folgenden Schritte f\u00fchren zur Erstellung eines Chatbots mit Salesforce.<\/p>\n\n\n\n

Erstellen einer vertrauensw\u00fcrdigen CSP-Site f\u00fcr den AI-Chatbot in Salesforce<\/h2>\n\n\n\n

1.<\/strong> Melden Sie sich zun\u00e4chst bei Ihrer Salesforce-Organisation an.<\/p>\n\n\n\n

2.<\/strong> Klicken Sie dann auf das Zahnradsymbol in der oberen rechten Ecke und w\u00e4hlen Sie \u201eEinrichten\u201c<\/strong>, um zur Einrichtungsseite zu navigieren.<\/p>\n\n\n\n

3.<\/strong> NGeben Sie nun \u201eCSP\u201c in das Feld Schnellsuche ein und w\u00e4hlen Sie dann \u201eCSP Trusted Sites\u201c<\/strong> aus dem Ergebnis. Auf dieser Seite wird eine Liste der bereits registrierten vertrauensw\u00fcrdigen CSP-Sites angezeigt.<\/p>\n\n\n\n

4.<\/strong> Klicken Sie dann auf die Schaltfl\u00e4che \u201eNeue vertrauensw\u00fcrdige Site<\/strong>\u201c, um eine neue vertrauensw\u00fcrdige Site f\u00fcr die Content Security Policy (CSP) zu erstellen.<\/p>\n\n\n\n

5.<\/strong> Geben Sie hier einen Namen in das Feld \u201eName der vertrauensw\u00fcrdigen Site\u201c<\/strong> und https:\/\/api.openai.com<\/a> in das Feld \u201eURL der vertrauensw\u00fcrdigen Site\u201c<\/strong> ein.<\/p>\n\n\n\n

6.<\/strong> Aktivieren Sie nun alle Kontrollk\u00e4stchen im Abschnitt \u201eCSP-Direktiven\u201c<\/strong> und speichern Sie sie.<\/p>\n\n\n\n

\"AI<\/figure>\n\n\n\n

Erstellen Sie einen neuen API-Schl\u00fcssel f\u00fcr den AI Chatbot in Salesforce<\/h3>\n\n\n\n

1.<\/strong> Melden Sie sich bei https:\/\/platform.openai.com\/<\/strong><\/a>  mit Ihren ChatGPT-Kontoanmeldedaten an.<\/p>\n\n\n\n

2.<\/strong> NKlicken Sie nun auf das Profilsymbol in der oberen rechten Ecke der Seite und w\u00e4hlen Sie \u201eAPI-Schl\u00fcssel anzeigen\u201c<\/strong> aus dem Dropdown-Men\u00fc. Klicken Sie dann auf die Schaltfl\u00e4che \u201e+ Neuen geheimen Schl\u00fcssel erstellen\u201c<\/strong>, um einen neuen API-Schl\u00fcssel f\u00fcr ChatGPT zu erstellen.<\/p>\n\n\n\n

3.<\/strong> Geben Sie anschlie\u00dfend einen Namen f\u00fcr den API-Schl\u00fcssel ein und klicken Sie auf die Schaltfl\u00e4che \u201eGeheimschl\u00fcssel erstellen\u201c<\/strong>. Es wird sofort ein API-Schl\u00fcssel f\u00fcr Sie generiert.<\/p>\n\n\n\n

\"AI<\/figure>\n\n\n\n

4.<\/strong> Kopieren Sie den generierten API-Schl\u00fcssel aus dem Dialogfeld und klicken Sie auf die Schaltfl\u00e4che \u201eFertig\u201c.<\/strong><\/p>\n\n\n\n

Hinweis:<\/strong> Ein API-Schl\u00fcssel von ChatGPT kann nur zum Zeitpunkt der Erstellung gesehen und kopiert werden. Kopieren Sie ihn also nach der Erstellung und legen Sie ihn f\u00fcr sp\u00e4tere Verwendung irgendwo ab.<\/p>\n\n\n\n

Erstellen Sie ein Salesforce DX-Projekt und eine LWC-Komponente f\u00fcr den Chatbot<\/h3>\n\n\n\n

Um ein Salesforce DX-Projekt zu erstellen, m\u00fcssen Sie eine Salesforce DX-Umgebung auf Ihrem Ger\u00e4t einrichten. Diese besteht aus der Installation von Salesforce CLI, Visual Studio Code<\/strong> und Salesforce Extension Pack<\/strong>. Wenn Sie die Salesforce DX-Umgebung noch nicht eingerichtet haben, k\u00f6nnen Sie diesem Blog folgen, um sie einzurichten:<\/p>\n\n\n\n

1.<\/strong> \u00d6ffnen Sie zun\u00e4chst den Visual Studio Code<\/strong> auf Ihrem Ger\u00e4t.<\/p>\n\n\n\n

2.<\/strong> Erstellen Sie nun ein Projekt, indem Sie dem Pfad Ansicht > Befehlspalette<\/strong> folgen und dann SFDX: Projekt erstellen w\u00e4hlen. W\u00e4hlen Sie \u201eStandard\u201c als Projektvorlage, geben Sie einen Namen f\u00fcr das Projekt ein und platzieren Sie es auf dem Ger\u00e4t.<\/p>\n\n\n\n

3.<\/strong> Autorisieren Sie dann das Projekt mit Ihrer Salesforce ORG, indem Sie dem Pfad Ansicht > Befehlspalette > SFDX: Authorize an Org folgen<\/strong>, Projektstandard ausw\u00e4hlen und einen Org Alias angeben. Sie werden zur Anmeldeseite von Salesforce weitergeleitet.<\/p>\n\n\n\n

\"AI<\/figure>\n\n\n\n

4.<\/strong> Melden Sie sich hier mit Ihren Salesforce Org<\/strong>-Anmeldedaten an.<\/p>\n\n\n\n

5.<\/strong> W\u00e4hlen Sie nun unter Ansicht > Befehlspalette die Option SFDX: Lightning-Webkomponente erstellen<\/strong>. Geben Sie dann einen Namen f\u00fcr die Komponente ein und dr\u00fccken Sie die Eingabetaste, wenn Sie gefragt werden, wo Sie die Komponente speichern m\u00f6chten.<\/p>\n\n\n\n

6.<\/strong> Ersetzen Sie anschlie\u00dfend den Standardcode der Html<\/strong>-Datei durch den folgenden Code:<\/p>\n\n\n\n

<template>\n    <lightning-card title=\"LWC Chatbot with Fetch API\" icon-name=\"standard:live_chat\">\n        <div class=\"slds-box slds-box_xx-small slds-var-m-horizontal_xx-small slds-theme_default\">\n            <div class=\"slds-m-bottom_none slds-chat chat\">\n                <ul class=\"slds-chat-list\">\n                    <template for:each={conversation} for:item=\"message\">\n                        <li key={message.id} class=\"slds-chat-listitem slds-var-m-bottom_small\">\n                            <div class={message.containerClass}>\n                                <div class=\"slds-chat-message__text slds-text-align_left\">\n                                    <template if:true={message.isBot}>\n                                        <span class=\"slds-avatar slds-avatar_circle slds-var-m-left_xx-small slds-align-middle\">\n                                            <abbr class=\"slds-avatar__initials slds-icon-standard-strategy\" title=\"ChatGPT\">AI<\/abbr>\n                                        <\/span>\n                                        <span class={message.textClass}>{message.text}<\/span>\n                                    <\/template>\n                                    <template if:false={message.isBot}>\n                                        <span class=\"slds-avatar slds-avatar_circle slds-var-m-left_xx-small slds-align-middle\">\n                                            <abbr class=\"slds-avatar__initials slds-icon-custom-custom101\" title=\"User\">RM<\/abbr>\n                                        <\/span>\n                                        <span class={message.textClass}>{message.text}<\/span>\n                                    <\/template>\n                                <\/div>\n                            <\/div>\n                        <\/li>\n                    <\/template>\n                <\/ul>\n                <template if:true={isLoading}>\n                    <lightning-spinner variant=\"brand\" class=\"my-spinner\" alternative-text=\"Loading\" size=\"medium\">\n                    <\/lightning-spinner>\n                <\/template>\n            <\/div>\n            <div class=\"slds-grid slds-gutters slds-var-p-horizontal_xx-small\">\n                <div class=\"slds-col slds-size_3-of-4\">\n                    <lightning-input type=\"text\" label=\"Type your message\" value={messageInput} onchange={handleChange} onkeyup={handleKeyUp}><\/lightning-input>\n                <\/div>\n                <div class=\"slds-col slds-size_1-of-4 slds-align-bottom slds-var-p-top_medium\">\n                    <lightning-button label=\"Send\" onclick={handleSendMessage} variant=\"brand\"><\/lightning-button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\n
7.<\/strong> 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\u00df), w\u00e4hrend Sie die Standardklasse im Code exportieren. Ersetzen Sie au\u00dferdem YOUR_API_KEY <\/strong>durch den API-Schl\u00fcssel von ChatGPT, den Sie zuvor generiert haben.<\/p>\n\n\n\n
import { LightningElement, track } from 'lwc';\nimport { ShowToastEvent } from 'lightning\/platformShowToastEvent';\n\nexport default class COMPONENT_NAME extends LightningElement {\n    @track conversation = [];\n    @track messageInput = '';\n    @track isLoading = false;\n\n    handleChange(event) {\n        this.messageInput = event.target.value;\n    }\n\n    handleKeyUp(event) {\n        if (event.keyCode === 13) {\n            this.handleSendMessage();\n        }\n    }\n\n    async handleSendMessage() {\n        this.isLoading = true;\n        this.template.querySelector(\".slds-chat\").classList.add('parent');\n        const userMessage = {\n            id: 'user-' + this.conversation.length,\n            role: 'user',\n            text: this.messageInput,\n            containerClass: 'slds-chat-message slds-chat-message__text_outbound user-message',\n            textClass: 'slds-chat-message__text slds-chat-message__text_outbound',\n            isBot: false\n        };\n        this.conversation = [...this.conversation, userMessage];\n        this.messageInput = '';\n\n        try {\n            const response = await fetch('https:\/\/api.openai.com\/v1\/chat\/completions', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                    'Authorization': 'Bearer YOUR_API_KEY' \/\/ Replace YOUR_API_KEY with your actual API key\n                },\n                body: JSON.stringify({\n                    messages: [{\n                        role: 'user',\n                        content: this.conversation[this.conversation.length - 1]?.text\n                    }],\n                    model: 'gpt-3.5-turbo'\n                })\n            });\n\n            if (response.ok) {\n                const responseBody = await response.json();\n                this.isLoading = false;\n\n                if (responseBody && responseBody.choices && responseBody.choices.length > 0) {\n                    const assistantMessage = {\n                        id: 'assistant-' + this.conversation.length,\n                        role: 'assistant',\n                        text: responseBody.choices[0].message.content,\n                        containerClass: 'slds-chat-message slds-chat-message__text_inbound',\n                        textClass: 'slds-chat-message__text slds-chat-message__text_inbound',\n                        isBot: true\n                    };\n                    this.conversation = [...this.conversation, assistantMessage];\n                } else {\n                    this.dispatchEvent(new ShowToastEvent({\n                        title: 'ERROR!!!',\n                        message: 'Error generating ChatGPT response: Empty response',\n                        variant: 'error'\n                    }))\n                }\n            } else {\n                const errorBody = await response.json();\n                throw new Error('Error: ' + response.status + ' ' + response.statusText + ' - ' + errorBody.error.message);\n            }\n        } catch (error) {\n            this.dispatchEvent(new ShowToastEvent({\n                title: 'ERROR!!!',\n                message: error.message,\n                variant: 'error'\n            }))\n            this.isLoading = false;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
8.<\/strong> Ersetzen Sie auch den Code der XML<\/strong>-Datei durch den folgenden Code:<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\">\n    <apiVersion>57.0<\/apiVersion>\n    <isExposed>true<\/isExposed>\n    <targets>\n        <target>lightning__AppPage<\/target>\n    <\/targets>\n<\/LightningComponentBundle><\/code><\/pre>\n\n\n\n
9.<\/strong> Speichern Sie nun diese 3 Dateien und klicken Sie mit der rechten Maustaste auf die lwc<\/strong> unter force-app\\main\\default <\/strong>und w\u00e4hlen Sie SFDX: Deploy Source to Org<\/strong>.<\/p>\n\n\n\n
\"AI<\/figure>\n\n\n\n
Platzieren Sie die Komponente in einer App-Seite<\/h3>\n\n\n\n
1.<\/strong> Navigieren Sie nun in Ihrer Salesforce-Organisation \u00fcber den App Launcher (oben links auf der Seite) zu einer Salesforce-App.<\/p>\n\n\n\n
2.<\/strong> Klicken Sie dann auf das Zahnradsymbol und w\u00e4hlen Sie \u201eSeite bearbeiten\u201c<\/strong>, um die Seite im App-Builder zu bearbeiten.<\/p>\n\n\n\n
3.<\/strong> Ziehen Sie anschlie\u00dfend die Chatbot-Komponente in die Leinwand in der Mitte und legen Sie sie dort ab. Klicken Sie dann auf die Schaltfl\u00e4che \u201eSpeichern\u201c<\/strong> in der oberen rechten Ecke. Daraufhin wird ein Dialogfeld zur Aktivierung der Komponente angezeigt.<\/p>\n\n\n\n
\"AI<\/figure>\n\n\n\n
4.<\/strong> Klicken Sie auf die Schaltfl\u00e4che \u201eAktivieren\u201c<\/strong> und dann auf \u201eAls Org-Standard zuweisen\u201c <\/strong>und speichern Sie sie.<\/p>\n\n\n\n
5.<\/strong> 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.<\/p>\n\n\n\n
Die Erstellung eines AI Chatbots ist Teil der ChatGPT und Salesforce Integration. Sie k\u00f6nnen auch unseren anderen Blog \u00fcber ChatGPT und Salesforce Integration mit Zapier<\/a><\/strong> lesen, der den Lead-Datensatz zusammenfasst und die Zusammenfassung in das Beschreibungsfeld des jeweiligen Lead-Datensatzes einf\u00fcgt. Sie k\u00f6nnen \u00fcber die Verwendung von Webhook, ChatGPT und Salesforce in Zapier lernen<\/p>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung in Bezug auf Salesforce ben\u00f6tigen. Sie k\u00f6nnen auch die Salesforce-Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
We can create an AI chatbot in Salesforce using Apex classes & LWC or using Fetch API in LWC. In both methods, we use the API key of ChatGPT. ChatGPT is an Artificial Intelligence(AI) chatbot developed by an AI research agency, OpenAI. We can use ChatGPT as a chatbot, virtual assistant, language translator, content generator, etc. In this blog, we use Fetch API in LWC to create the chatbot.<\/p>\n","protected":false},"author":89,"featured_media":13628,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163,92,159,128],"tags":[],"class_list":["post-13532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entwickler","category-fallstudien","category-lwc","category-salesforce"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=13532"}],"version-history":[{"count":18,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13532\/revisions"}],"predecessor-version":[{"id":17046,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13532\/revisions\/17046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/13628"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=13532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=13532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=13532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}