天気情報を提供するAPIを用いてプッシュ通知の内容をパーソナライズする

<html><head></head><body><h2 id="はじめに">はじめに</h2>
<p>はじめまして！プレイドでCustomer Engineerをしております渡辺（<a href="https://twitter.com/ikmwtnb" target="_blank" rel="noreferrer">@ikmwtnb</a>）と申します！</p>
<p>2023年に入ってLLM（大規模言語モデル）が本当に盛り上がっていますよね。その中でも、OpenAIが開発したChatGPTは、その高い応答性と自然な文章生成能力により、多くの人々の注目を集めています。（この記事の作成自体も、ChatGPT（GPT4）に助けてもらいながら書いております。）</p>
<p>今回は、ウェブチャットのサービスである<a href="https://talk.karte.io/" target="_blank" rel="noreferrer">KARTE Talk</a>とChatGPTとのAPI連携を実装し、KARTE Talk上（Web）でChatGPTと会話できるようにする方法についてご紹介します。ここでは、<a href="https://ecosystem.plaid.co.jp/product/karte-craft" target="_blank" rel="noreferrer">KARTE Craft</a> と呼ばれるKARTEの新しい機能を用いて、連携を実装します！</p>
<h1 id="注意事項">注意事項</h1>
<p><strong>ChatGPT等最新の技術はビジネスでの活用におけるリスク等がまだ十分に議論・認識されていないため、下記のようなことに注意しながら</strong>読み進めてください。</p>
<ul>
<li>記事中では、エンドユーザーの入力した情報をChatGPTに送信していますが、プレイドではお客様からお預かりしたデータをChatGPT等の外部サービスに送信は実施していません。記事で紹介されているスクリーンショット等は開発環境のものであり、入力するデータを限定して実施しています。</li>
<li>本記事は、KARTEの機能を用いて実現できることを検証する目的で公開しており、読者に対してChatGPTの利用を推奨するものではありません。読者がChatGPT等をビジネスで用いることによって被った損害等に対して責任を負うことはできないため、ご留意ください。</li>
<li>当記事を参考にビジネスでChatGPT等を利用される際は、情報の取り扱いにご注意ください。</li>
</ul>
<h1 id="実現できること">実現できること</h1>
<p><img src="https://ik.imagekit.io/plaid/9dd94443-f207-472b-a17e-49ad9cec0532/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-03-3114.21.45.png" alt="image"><br>
KARTE Talk上でChatGPTと会話をすることが可能になります。上記の画像では、「株式会社プレイドという会社が提供しているKARTEというサービスについて教えてください。」という質問に対して、ChatGPTが回答をしてくれています。（ChatGPTの回答の内容は正確ではないですが。。）<br>
今回は非常にシンプルな実装にしているため、OpenAIが提供しているWEBベースのGUIの画面で実施できるような文脈を読み取って回答するような機能は実現されていません。（もちろん、実装を工夫することで、そうした実装も可能となります。）</p>
<h1 id="ChatGPTとKARTE Talkの連携方法">ChatGPTとKARTE Talkの連携方法</h1>
<p>ChatGPTとKARTE Talkの連携は下記のような構成で実現しています。<br>
<img src="https://ik.imagekit.io/plaid/b8a60364-67a1-4825-9762-f1bff36ee7a5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-04-0715.44.12.png" alt="image"></p>
<p>システムの各登場人物を整理すると下記のようになります。</p>
<ul>
<li><strong>ウィジェット</strong>：エンドユーザーがメッセージを送信する画面</li>
<li><strong>KARTE Talk</strong>：KARTE Talkのサーバー</li>
<li><strong>Talk Hook</strong>：KARTE Talk上のメッセージを検知し、他のシステムの処理をトリガーできるhook</li>
<li><strong>KARTE Craft</strong>：KARTE上で任意のコードを実行できるいわゆるFaaS機能</li>
<li><strong>ChatGPT</strong>：チャットボットサービス</li>
</ul>
<h2 id="API連携処理の実装に必要な情報を取得する">API連携処理の実装に必要な情報を取得する</h2>
<p>ChatGPTとのAPI連携の処理の実装には、いくつかのトークンなどの認証情報を含む情報が必要になります。下記を参考に、必要な情報を取得してください。</p>
<ul>
<li>ChatGPTのAPIキー（<code>CHAT_GPT_API_KEY</code>）
<ul>
<li>OpenAIの公式ウェブサイトにアクセスし、アカウントを作成（もしくはログイン）してAPIキーを取得してください。</li>
</ul>
</li>
<li>KARTEのAPIのアクセストークン
<ul>
<li><a href="https://developers.karte.io/docs/create-api-v2-apps" target="_blank" rel="noreferrer">こちら</a>を参考に、アプリを作成し、アクセストークンを取得してください。</li>
</ul>
</li>
<li>KARTE Talkのチャットの送信者として指定するオペレータ（<code>SENDER_ID</code>）
<ul>
<li>KARTE Talkの[Talk設定] &gt; [オペレーター設定]から任意のオペレーターを選択し、アサインID(<code>オペレーターID</code>)の値を取得してください。</li>
</ul>
</li>
</ul>
<h2 id="ChatGPTとの連携の設定">ChatGPTとの連携の設定</h2>
<p>本連携の実装には、下記のような設定が必要になります。</p>
<ul>
<li>KARTE Craftの設定</li>
<li>Talk Hookの設定</li>
<li>接客の公開</li>
</ul>
<p>馴染みもない機能も多いと思いますので、それぞれの設定についてステップごとに説明致します。</p>
<h2 id="KARTE Craftの設定">KARTE Craftの設定</h2>
<p>KARTE Craft は、KARTE内のイベント/Hook等をトリガーに任意のコードを実行できるFaaS（Function as a Service）のような機能です。<br>
ここでは、この後に設定するTalk Hookから情報を受け取り、その情報を元にChatGPTのAPIにリクエストをし、KARTE TalkにAPI経由でChatGPTの回答を返す処理を実装しています。</p>
<p>[Craft]&gt;[ファンクション]&gt;[作成]から新規のCraft Functions の作成画面に遷移します。次のGithub上のコードを元に、前項「API連携処理の実装に必要な情報を取得する」で取得した情報を元に定数の値を設定しながら、craftのコードエディタ上でコードを設定してください。</p>
<p><a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/reply-chat-by-gpt" target="_blank" rel="noreferrer">craft-codes/craft-functions/reply-chat-by-gpt at main · plaidev/craft-codes</a></p>
<p>コードを設定した後、任意の名前を設定し、[有効化] の<code>Functionを有効にする</code>にチェックを入れて、Funcitonを有効化します。</p>
<h2 id="Talk Hookの設定">Talk Hookの設定</h2>
<ul>
<li>[ストア] &gt; [API v2設定] &gt; [作成]ボタンから新規のアプリを作成します。アプリタイプは<code>token</code>、Scopeとして<code>talk.message.get</code>を設定し、任意の名前をつけ保存します。</li>
<li>作成されたアプリの詳細画面に遷移し、[hook設定]から[編集]ボタンを押下します。トリガー設定に<code>KARTE Talk: ユーザーからのメッセージ送信時</code>を選択します。[チャネル設定]&gt;[Craft]でhook statusを'有効にする'とし、[ファンクション名]を作成したCraftに設定します。</li>
</ul>
<h2 id="チャットウィジェットの接客を公開する">チャットウィジェットの接客を公開する</h2>
<p>KARTEのチャットウィジェットの接客を公開することで、ChatGPTと会話できるようになりました。<br>
<img src="https://ik.imagekit.io/plaid/9dd94443-f207-472b-a17e-49ad9cec0532/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-03-3114.21.45.png" alt="image"></p>
<h1 id="まとめと今後の展望">まとめと今後の展望</h1>
<p>今回は、KARTE Talk上でChatGPTと会話できるようにするという機能を、非常にシンプルなコードで実装しました。<br>
KARTEでは、今回用いた新機能であるKARTE Craft を用いることで、カスタマーデータを起点とした様々な処理を実装することができるようになっています。</p>
<p>ChatGPTを用いたより発展的なユースケースや、KARTE Craft を用いた高度な処理についても当ソリューションブログでどんどん公開していきますので、お見逃しなく！</p>
<p>また、プレイドでは、ソリューションを一緒に作っていく仲間を募集しております！プレイドのテクノロジーを駆使し、お客様に新しい価値を提供できるソリューションを一緒に作っていきましょう！</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineerの募集要項</a></li>
<li><a href="https://blog.plaid.co.jp/n/n6d87538d003f" target="_blank" rel="noreferrer">幅広く活用できるプロダクトの価値を顧客に届ける「カスタマーエンジニア」の道を選択した3人のキャリアを聞きました</a></li>
<li><a href="https://blog.plaid.co.jp/n/nd8a70f686885" target="_blank" rel="noreferrer">2協業案件のリードに、PdMとしての役割も。経験が複利で増えるカスタマーエンジニアの多面性</a></li>
</ul>
</body></html>

[やってみた]KARTE TalkとKARTE Craftを使ってChatGPTとチャットウィジェット上で会話をする