Wie integrieren Sie einen benutzerdefinierten GPT in Ihre Website? Schritt-für-Schritt Anleitung

Integrieren eines benutzerdefinierten GPT in Ihre Website

• In diesem Video werde ich Ihnen zeigen, wie Sie einen benutzerdefinierten GPT in Ihre Website integrieren können. In meinem vorherigen Video haben wir einen benutzerdefinierten GPT mit einem GPT Builder erstellt. Wenn Sie es noch nicht gesehen haben, empfehle ich Ihnen, das zuerst anzusehen. Aber am Ende dieses Videos werden Sie ein klares Verständnis dafür haben, wie Sie einen benutzerdefinierten GPT zu jeder Website hinzufügen können. Ich werde Ihnen zwei Methoden für diese Integration zeigen. Die erste erfordert überhaupt keinen Code, die zweite ist etwas fortschrittlicher, aber Sie benötigen keine technischen Kenntnisse. Ich werde Ihnen ein schrittweises Tutorial zur Verfügung stellen. Alles, was Sie tun müssen, ist genau das zu kopieren und einzufügen, was ich Ihnen auf dem Bildschirm zeige, und alle erforderlichen Vorlagen werden in der Videobeschreibung bereitgestellt. Bevor Sie jedoch in das Tutorial selbst eintauchen, ist es wichtig zu verstehen, der Unterschied zwischen GPTs und der Assistant API besteht. Obwohl sie grundsätzlich gleich sind, sind ihre beabsichtigten Anwendungen unterschiedlich. GPTs sind als B2C- oder Business-to-Consumer-Produkte konzipiert, die für Consumer-Anwendungen geeignet sind. Sie ermöglichen es Ihnen, ein GPT mit benutzerdefinierten Anweisungen und benutzerdefinierten Wissensdatenbanken zu erstellen, die in der Regel für den persönlichen Gebrauch innerhalb CH GPTs verwendet werden. Die Assistant API hingegen ist B2B- oder Business-to-Business ausgerichtet und zielt auf geschäftsbezogene Anwendungen ab. Sie verfügt ebenfalls über dieselben benutzerdefinierten Anweisungen und Wissensdatenbanken, kann jedoch programmgesteuert betrieben werden, was bedeutet, dass Sie einen Code erstellen können, um diesen Assistenten über die API aufzurufen. Dies ermöglicht dessen Integration in verschiedene Anwendungen, Websites oder was auch immer Sie erstellen. Und genau das werden wir tun. Wir werden einen Code verwenden, der den Assistenten erstellt, ihn mit einem Chatbot Builder verbinden und ihn dann auf eine Website setzen wird. Natürlich gibt es viele Start-ups, die bereits all diese Integrationen erstellt haben und gegen eine Abonnementgebühr eine benutzerfreundliche Oberfläche bieten, über die Sie Ihre benutzerdefinierten Anweisungen und Wissensdatenbanken hinzufügen und Ihren GPT mit wenigen Klicks zu einer Website hinzufügen können. Als Beispiel zeige ich Ihnen Chatbase Doco, auf das Sie über den Link in der Beschreibung unten zugreifen können. Für dieses Tutorial werde ich diese Beispielseite verwenden, und mein Ziel ist es, einen Kundensupport-Chatbot hinzuzufügen, der auf meiner Wissensdatenbank trainiert ist und mit einem GPT verbunden ist.

Integrieren eines benutzerdefinierten GPT in Ihre Website

Erstellung eines Chatbots mit GPT-Modell

• Sobald Sie sich angemeldet haben, können Sie auf die Schaltfläche für den neuen Chatbot klicken. Das erste, was Sie tun müssen, ist, Ihre Wissensdateien hinzuzufügen. Einfach per Drag-and-Drop einfügen und auf Chatbot erstellen klicken - und schon ist der Chatbot erstellt. Er wird anhand der Datei, die ich gerade hochgeladen habe, trainiert und ist mit einem GPT-Modell verbunden. Jetzt kann ich ihn anpassen und dann auf meiner Website hinzufügen. Ich gehe also zu den Einstellungen und hier, genauso wie Sie benutzerdefinierte Anweisungen in einem GPT Builder hinzufügen, ist dies ein Fenster, in dem Sie auch Ihre benutzerdefinierten Anweisungen hinzufügen können. Es gibt eine Standardanweisung, die Sie belassen können, aber ich werde sie ersetzen. Ich habe sie vorbereitet, also werde ich sie einfach einfügen. Hier können Sie das GPT-Modell sehen, das in einem kostenpflichtigen Plan verwendet wird. Sie können GPT 4 Turbo auswählen, aber mit der kostenlosen Testversion steht nur GPT 3.5 Turbo zur Verfügung. Ich klicke einfach auf Speichern. Wenn Sie zum Tab Quellen gehen, ist hier eine interessante Funktion. Neben dem Hinzufügen von Dateien mit Wissen können Sie auch Ihre Website-URL hinzufügen und es werden alle Links durchsucht, um das Wissen direkt von Ihrer Website zu sammeln. Das kann in einigen Fällen sehr praktisch sein, aber in meinem Beispiel werde ich einfach das Wissensdokument verwenden, das ich zu Beginn hochgeladen habe. Nun haben wir unsere Wissensbasis und Anweisungen angepasst. Wenn Sie zu den Einstellungen und dann zum Chat-Interface gehen, können Sie das Erscheinungsbild des Chatbots auf Ihrer Website ändern. Sie können die Anfangsnachrichten bearbeiten, das Thema ändern und das Profilbild des Chatbots hochladen sowie den Anzeigenamen usw. Wenn Sie mit dem Design Ihres Chatbots zufrieden sind, klicken Sie auf Einbetten auf der Website und dann auf Öffentlich machen. Alles was wir jetzt tun müssen, ist dieses Skript kopieren und in unseren Website-Code einfügen. Ich scrolle gerade zu diesem Abschnitt mit dem Skript, füge diesen Code ein und speichere. Wenn ich jetzt zu dieser Beispielseite gehe, ist das Chatbot-Symbol erschienen. Lassen Sie uns ihm eine Frage stellen, um zu sehen, wie es funktioniert: 'Was sind Ihre Mitgliedschaftsoptionen?' Und es liefert uns eine Information aus der Wissensdatei, die ich am Anfang hinzugefügt habe. Das ist es, unser Ziel ist erreicht. Der Chatbot ist da, er funktioniert, er ist mit einem GPT-Modell verbunden. Natürlich gibt es einige Nachteile bei der Verwendung von Drittanbietern.

Erstellung eines Chatbots mit GPT-Modell

Schaffung eines benutzerdefinierten GPT-basierten Chatbots auf Ihrer Website

• Bei Diensten wie diesem gibt es zunächst den Kostenfaktor. Sie müssen ihre Gebühren bezahlen, da sie Einnahmen generieren müssen. Zweitens mangelt es an Flexibilität im Vergleich zur Verwendung Ihres eigenen Codes. Sie entscheiden, welches GPT-Modell Ihnen zur Verfügung steht, und Sie können auch keine fortgeschrittenen interessanten Aktionen mit diesem Assistenten-API durchführen, da Sie einfach keinen direkten Zugriff darauf haben. Lassen Sie uns also nun die zweite Methode durchgehen: die Schaffung eines Assistenten-API direkt auf der Open AI-Plattform, den Anschluss an einen Chatbot und die Integration in eine Website. Unser Ziel bleibt genau gleich: Wir werden einen benutzerdefinierten wissensbasierten Chatbot erstellen, der als Kundensupport-Assistent auf unserer Beispielwebsite dient. Dieser Prozess umfasst zwei Hauptkomponenten: das Backend und das Frontend. Für das Backend werden wir RIT verwenden, das den Code hostet, der unsere Chatbot-Funktionalität implementiert. Für das Frontend werden wir Voiceflow verwenden, um die Chatbot-Benutzeroberfläche zu entwerfen und zu erstellen. Wir werden dann RIT, unser Backend, mit Voiceflow, unserem Frontend, verbinden, um es ihnen zu ermöglichen, über API-Aufrufe miteinander zu kommunizieren. Ich verstehe, dass Begriffe wie Frontend, Backend und API-Aufrufe ein wenig technisch klingen, aber es gibt absolut keinen Grund zur Sorge. Sie müssen einfach das, was ich Ihnen zeige, kopieren und einfügen, und es ist nicht notwendig, dass Sie eine einzige Codezeile schreiben, um loszulegen. Melden Sie sich bei RIT an und kopieren Sie den im Video beschriebenen Code. Ich möchte auch Liam Otley danken, der den Code tatsächlich erstellt und ihn mit der Community geteilt hat. Das wird sehr geschätzt. Sie müssen auf „Fork“ klicken, um den Code zu duplizieren, ihm einen Namen geben und auf „Fork“ klicken. Hier ist der Code: Er wird ein neues System erstellen oder ein vorhandenes starten, Konversationsthreads generieren, Antworten generieren usw. Wenn Sie daran interessiert sind, zu verstehen, wie dieser Code aufgebaut ist, hier ist eine Idee: Kopieren Sie den gesamten Code und fügen Sie ihn in Chat GPT ein und fragen Sie nach einer Erklärung. Das ist eine ausgezeichnete Möglichkeit zu lernen, wenn das Ihr Ziel ist. Aber wenn Sie ihn einfach verwenden möchten, um einen benutzerdefinierten GPT zu Ihrer Website hinzuzufügen, müssen Sie wie immer nur die benutzerdefinierten Anweisungen anpassen.

Schaffung eines benutzerdefinierten GPT-basierten Chatbots auf Ihrer Website

Einrichten von OpenAI und Voiceflow für die Entwicklung eines Chatbots

• Wissen Sie, wie man benutzerdefinierte Anweisungen einrichtet? In diesem Teil können Sie diese Anweisungen löschen und Ihre eigenen eingeben. Das Wissensdokument finden Sie links. Das Gleiche gilt hier für das Löschen dieses Beispiels und das Einfügen Ihres eigenen Textes. Ein weiterer wichtiger Schritt ist das Hinzufügen Ihres OpenAI-Geheimschlüssels. Gehen Sie dazu zu platform.open.com. Wenn Sie an Chpt als OpenAI-Produkt für Kunden denken, ist diese Plattform für Entwickler konzipiert. Gehen Sie zunächst zu Einstellungen, dann zu Abrechnung und fügen Sie Ihrem Konto Guthaben hinzu. Andernfalls können Sie das GP4 Turbo-Modell nicht nutzen. Sie müssen immer noch für die Nutzung der OpenAI-Assistant-API bezahlen, aber wenn Sie das direkt tun, ist es viel günstiger als die Verwendung von Drittanbieterlösungen, wie wir es im ersten Ansatz getan haben. Nachdem Sie etwas Guthaben hinzugefügt haben, gehen Sie zu API-Schlüssel und klicken Sie auf Neuen Geheimschlüssel erstellen. Geben Sie ihm einen Namen und klicken Sie auf Erstellen. Kopieren Sie nun Ihren geheimen API-Schlüssel und fügen Sie ihn hier als Wert ein. Klicken Sie dann auf Geheimnis hinzufügen. Das ist alles, unser Backend ist eingerichtet. Jedes Mal, wenn Sie diesen Code ausführen, wird er zunächst überprüfen, ob eine Assistant-Json-Datei vorhanden ist. Wenn nicht, wird eine erstellt. Beim ersten Ausführen des Codes wird der Assistant erstellt, bei allen weiteren Durchläufen wird der vorhandene Assistant verwendet. Wenn Sie zur OpenAI-Plattform zurückkehren, werden Sie feststellen, dass ein neuer Assistant erstellt wurde, der diese benutzerdefinierten Anweisungen aus unserem Code und das Wissensdokument verwendet, das wir haben. Der zweite Teil besteht darin, Voiceflow einzurichten. Dies ist unser Frontend, unser Chatbot-Builder. In der Video-Beschreibung finden Sie eine Vorlagendatei, die Sie direkt in Voiceflow hochladen können. Ändern Sie hier nur eine Sache: Fügen Sie Ihre Replit-URL hinzu, um die Kommunikation zwischen dem Code in Replit und Voiceflow zu ermöglichen. Klicken Sie einfach auf dieses Feld „Thread erstellen“ und fügen Sie Ihre URL ein. Um Ihre URL zu finden, gehen Sie zurück zu Replit, klicken Sie auf Neu Tab und kopieren Sie diese URL aus dem neuen Tab. Fügen Sie sie in Voiceflow ein und stellen Sie sicher, dass sie am Ende mit „/start“ endet. Klicken Sie dann auf dieses Feld „Antwort generieren“ und fügen Sie erneut dieselbe URL ein. Diesmal sollte sie jedoch mit „/chat“ enden. Das war's. Führen Sie einen Test durch, um zu sehen, wie es funktioniert. Fragen Sie ihn, wann er öffnet.

Einrichten von OpenAI und Voiceflow für die Entwicklung eines Chatbots

Die Verwendung von KI-Tools zur Optimierung Ihres Geschäfts

• Stundenlang konnte verfolgt werden, was hier im Repit-Konsole passiert, sodass Sie bei Problemen alles hier sehen können. Unser Chatbot antwortete richtig, dass die Öffnungszeiten von Neo James von Montag bis Freitag von 5:00 bis 22:00 Uhr sind, genau wie es in unserer Wissensdatei festgelegt wurde. Der letzte Schritt ist nun, dieses Chatboard zu unserer Website hinzuzufügen. Klicken Sie auf Veröffentlichen, geben Sie einen Namen ein, veröffentlichen Sie, und jetzt können wir das Widget einbetten. Ähnlich wie beim ersten Verfahren mit Chatbase haben wir dieses Skript, das wir in den Code unserer Website kopieren und einfügen müssen. Hier können Sie auch das Erscheinungsbild ändern. Ich habe bereits einige Farben, Assistentenbild und Avatar hinzugefügt, aber Sie können sie nach Belieben ändern. Das ist unsere Website, sauber und noch ohne Chatbots. Lassen Sie uns zum Code der Website selbst gehen und unter anderen Skripten unser Voice-Flow-Skript einfügen, speichern und die Website neu laden. Nun wird unser Widget unten angezeigt. Ich habe wohl die schlimmstmögliche Farbe ausgewählt, aber das ist in Ordnung. Lassen Sie uns einfach testen, wie es funktioniert: 'Was sind Ihre Mitgliedschaftsoptionen?' Und schon werden alle Mitgliedschaftsoptionen aus unserer Wissensdatei genannt. Es funktioniert gut. Lassen Sie uns die Farben in Voice-Flow ändern und es ansprechender gestalten. Ich denke, Schwarz wäre besser. Website erneut laden und voilà, das Chatbot-Symbol und das Layout sind jetzt schwarz und gefallen mir viel besser. Ich hoffe, Sie fanden diesen Leitfaden hilfreich. Schon vor 6 Monaten in meinem Video 'Wie man ein Unternehmen mit KI-Tools startet' habe ich über die Zeit- und Geldersparnis durch KI gesprochen. Vor einem Jahr noch verließen sich die meisten Unternehmen auf Kundensupport-Teams aus echten Personen, die diese grundlegenden Anfragen beantworteten. Heutzutage können die meisten dieser Anfragen jedoch effizient und einfach von einem KI-Assistenten behandelt werden, der mit Ihrer benutzerdefinierten Wissensdatenbank trainiert ist und von einem GPT-Modell betrieben wird. Hoffentlich haben Sie bereits begonnen, KI in Ihrem Unternehmen zu nutzen. Dies ist nur eine von vielen möglichen Anwendungen von KI in Geschäfts- und Privatleben. Ich werde weiter lernen und dieses Wissen mit der Community teilen. Bleiben Sie dran, abonnieren Sie bitte und bis bald im nächsten Video!

Die Verwendung von KI-Tools zur Optimierung Ihres Geschäfts

Conclusion:

Die Integration eines benutzerdefinierten GPT in Ihre Website kann Ihre Kundenerfahrung verbessern und Effizienz steigern. Folgen Sie diesem Leitfaden und erstellen Sie Ihren eigenen Chatbot mit GPT Modell für eine personalisierte Nutzung.

Q & A