ウェブサイトにカスタムGPTを統合する方法（ステップバイステップガイド）

カスタムGPTをウェブサイトに統合する方法

• このビデオでは、カスタムGPTをウェブサイトに統合する方法を紹介します。前のビデオでは、GPT Builderを使用してカスタムGPTを構築しました。まだ見ていない場合は、まずそれをご覧いただくことをお勧めします。しかし、このビデオの最後までには、どのウェブサイトにもカスタムGPTを追加する方法が明確に理解できます。この統合には2つの方法があります。最初の方法はまったくコードを必要としません。2つめはもう少し高度ですが、技術的なバックグラウンドは必要ありません。画面に表示される内容をそのままコピー＆ペーストするだけで、必要なテンプレートがすべてビデオの説明に記載されています。チュートリアルに入る前に、GPTとアシスタントAPIの違いを理解することが重要です。GPTはB2C（企業対消費者）向けの消費者向け製品として設計されており、消費者向けアプリケーションに適しています。通常、カスタムな指示や知識ベースを使用して、個人用に通常CH GPT内で使用されます。一方、アシスタントAPIはB2B（企業対企業）向けで、企業向けアプリケーションを目指しています。同様にカスタムな指示や知識ベースを持っていますが、プログラム上で操作できるため、APIを介してこのアシスタントを呼び出すコードを構築できます。これにより、さまざまなアプリケーション、ウェブサイトなどに統合することが可能になります。今回は、アシスタントを作成するコードを使用し、それをチャットボットビルダーに接続し、それをウェブサイトに配置します。もちろん、すでにその統合を行っている多くのスタートアップがあり、定期的な料金を支払うと、ユーザーフレンドリーなインターフェースを提供し、独自の指示や知識ベースを追加し、数回のクリックでウェブサイトにGPTを追加できます。例として、このチュートリアルでは、このサンプルサイトを使用し、私の知識ベースでトレーニングされたカスタマーサポートチャットボットを追加することを目標とします。

カスタムGPTをウェブサイトに統合する方法

チャットボットの作成とカスタマイズ

• ユーザーがサインアップしたら、新しいチャットボットボタンをクリックできます。最初にやるべきことは、ナレッジベースファイルを追加することです。ファイルをドラッグアンドドロップして、チャットボットを作成するだけです。チャットボットは作成され、私が添付したファイルでトレーニングされ、GPTモデルに接続されます。それをカスタマイズしてウェブサイトに追加できます。そのために、設定モデルに移動し、カスタム指示を追加します。ここには、GPTビルダーにカスタム指示を追加するのと同じように、デフォルトの指示もありますが、今回は置き換えます。次に、GPTモデルを選択します。有料プランではGPT 4 Turboを選択できますが、無料トライアルではGPT 3.5 Turboしか使用できません。保存をクリックします。ソースタブに移動すると、興味深い機能があります。ナレッジを追加するだけでなく、WebサイトのURLを追加するだけで、リンクをクロールしてナレッジを直接収集できます。便利な機能ですが、この例では最初にアップロードしたナレッジ文書を使用します。ナレッジベースと指示をカスタマイズしました。設定の次に、チャットインターフェースに移動して、ウェブサイト上のチャットボットの外観を変更できます。初期メッセージを編集したり、テーマを変更したり、チャットボットのプロフィール写真をアップロードしたりできます。デザインに満足したら、埋め込みサイトをクリックし、公開をクリックします。今すぐやることは、このスクリプトをコピーしてウェブサイトコードに貼り付けるだけです。サンプルウェブサイトに戻ると、チャットボットアイコンが表示されています。それを使ってどのように動作するかを見てみましょう。会員オプションは何ですか？と質問すると、最初に追加したナレッジファイルに含まれる情報を提供してくれます。目標を達成しました。チャットボットはそこにあり、動作しています。GPTモデルに接続されています。もちろん、第三者を利用することにはいくつかのデメリットがあります。

チャットボットの作成とカスタマイズ

カスタム知識ベースチャットボットの作成

• このようなパーティーサービスの最初のコスト要因は、彼らが収益を生み出す必要があるため、料金を支払わなければならないことです。第二に、独自のコードを使用する場合と比較して、柔軟性が不足しています。彼らはどのGPTモデルを利用可能にするかを決定し、また、そのアシスタントAPIを直接アクセスできないため、高度で面白いアクションを行うことはできません。それでは、2番目の方法であるOpenAIプラットフォームに直接アシスタントAPIを作成し、チャットボットに接続し、ウェブサイトに統合する方法を見てみましょう。私たちの目標はまったく同じであり、サンプルウェブサイト上で顧客サポートアシスタントとして機能するカスタムナレッジベースのチャットボットを構築することです。このプロセスにはバックエンドとフロントエンドの2つの主要コンポーネントが含まれます。バックエンドでは、チャットボット機能を実装するコードをホストするRITを使用します。フロントエンドでは、Voiceflowを使用してチャットボットインターフェースを設計・構築します。そして、RITのバックエンドとVoiceflowのフロントエンドをリンクし、APIコールを介してお互いと通信するようにします。フロントエンド、バックエンド、およびAPIコールなどの用語が少しテクニカルに聞こえるかもしれませんが、心配することは全くありません。私が実証した内容を単純にコピーして貼り付けるだけで、1行のコードも書く必要はありません。はじめるにはRITにサインアップし、ビデオの説明に記載されているコードをコピーする必要があります。また、このコードを実際に構築し、コミュニティで共有したリアム・オットリー氏にもクレジットを与えたいと思います。このコードを複製するには、ここでForkをクリックし、名前を付けてForkをクリックしてください。ここにはコードがあります。新しいシステムを作成したり、既存のシステムをロードしたり、会話スレッドを開始したり、応答を生成したりします。このコードの構造を理解したい場合は、コード全体をコピーしてチャットGPTに貼り付け、説明を要求すると良いアイデアです。これは学習するための優れた方法です。もし目的がそうであるならば。しかし、ウェブサイトにカスタムGPTを追加するだけで使いたいのであれば、変更する必要のある唯一のことはいつも通りカスタム指示です。

カスタム知識ベースチャットボットの作成

オープンAIプラットフォームのセットアップ

• 知識として、カスタムインストラクションはこの部分を削除して、自分自身のインストラクションを入力し、知識文書はこちらの左側にあります。同じことを行い、このサンプルを削除して自分自身のテキストを貼り付けます。さらに行うべきことは、OpenAIのシークレットキーを追加することです。そのためには、platform.open.comにアクセスしてください。Chptを顧客向けのOpenAI製品と考えるならば、このプラットフォームはビジネス向けです。開発者向けに特に設計されています。まず、設定に移動して、請求をクリックし、クレジットを追加してバランスを調整してください。そうしないと、GP4 Turboモデルを使用することができません。OpenAIアシスタントAPIを使用する際に支払いが発生しますが、これを直接行う方が、最初の方法で行ったようなサードパーティーのソリューションを使用するよりもずっと安く済みます。クレジット残高を追加した後、APIキーに移動して、新しいシークレットキーを作成し、名前を付けて作成をクリックします。今、秘密のAPIキーをコピーし、retに戻って貼り付けて、値として追加をクリックします。これでバックエンドの設定は完了です。このコードを実行するたびに、まずアシスタントのJsonファイルが存在するかどうかをチェックし、存在しない場合は作成します。コードを初めて実行すると、アシスタントが作成され、その後のすべての実行では既存のアシスタントが使用されます。OpenAIプラットフォームに戻ると、カスタムインストラクションと知識文書を使用して新しいアシスタントが作成されていることに気づくでしょう。2番目のパートは、Voiceflowのセットアップです。こちらはフロントエンドであり、チャットボットビルダーです。ビデオの説明欄には、Voiceflowに直接アップロードできるテンプレートファイルがあります。完了後、ここで変更する必要があるのは、ReplitとVoiceflowの間の通信を可能にするために自分のReplitのURLを追加することです。画面上の「Create Thread」ボックスをクリックして、URLを貼り付けてください。URLを見つけるには、Replitに戻って新しいタブをクリックし、その新しいタブからこのURLをコピーして、それをVoiceflowに貼り付けてください。そして、最後に/startが含まれていることを確認してください。次に、「Generate Response」ボックスをクリックし、同じURLを貼り付けますが、この時は/startの代わりに/chatが末尾にあることを確認してください。これでテスト実行して、動作を確認できます。例えば、「開店時間はいつですか？」と尋ねてみましょう。

オープンAIプラットフォームのセットアップ

効率的なビジネス運営にAIツールを活用しよう

• 作業中、repitコンソールで何が起こっているかを追跡できるので、何かが壊れた場合でもここで確認できます。私たちのchatotが正しく返信しました。Neo Jamesの営業時間は、月曜日から金曜日までの午前5時から午後10時までで、これは私たちのナレッジファイルで指定されている通りです。最後に、このチャットボードをサイトに追加する必要があります。'パブリッシュ'をクリックして名前を付け、ウィジェットを埋め込むことができます。最初の方法と同様に、chatbaseの場合、Webサイトのコードにコピーして貼り付ける必要があるスクリプトがあります。外観も変更できます。色やアシスタントの画像やアバターを追加しましたが、お好みで変更できます。これが私たちのサイトです。まだチャットボットはありませんが、サイト自体のコードに移動して、他のスクリプトの下に私たちのVoice Flowスクリプトを貼り付けて保存し、サイトをリロードします。ウィジェットがコーナーに表示されます。最悪の色を選んでしまったと思いますが、大丈夫です。動作をテストしてみましょう。メンバーシップのオプションは何ですか？と尋ねると、ナレッジファイルに含まれるすべてのメンバーシップオプションの名前が表示されます。色を変更してもっと魅力的にします。黒が良いと思います。サイトを再読み込みすると、チャットボットのアイコンとレイアウトが黒になります。

効率的なビジネス運営にAIツールを活用しよう

Conclusion:

このガイドを通じて、ウェブサイトにカスタムGPTを追加する方法について学びました。カスタムナレッジベースを活用して、ウェブサイトのユーザーエクスペリエンスを向上させましょう。

Q & A