page icon

AI連携

2024/6/13リリースされた機能です。
今回のアップデートでは、ClickFlowにAI連携機能が追加され、簡単に最新モデルのGPT-4oとの連携が可能になりました。基本的な使い方を説明いたします。
※APIを使用するためStandardプラン以上でご利用可能です。

目次

 
 
  1. 『ホーム』にインプットとボタンを設置する
  1. ClickFlowでAI機能を設定する。
  1. 2にGPTのAPI keyを入力し、命令文の入力をする。
  1. ClickFlowで回答をインプットに表示させる。
 
  1. 『ホーム』にインプットとボタンを設置する。
  1. ClickFlowでAI機能を設定する。
  1. 2にGPTのAPI keyを入力し、命令文の入力をする。
  1. ClickFlowで回答をインプットに表示させる。
 
  1. 『ホーム』にインプットとボタンを設置する。
  1. ClickFlowでAI機能を設定する。
  1. 2にAPI keyを入力し、命令文の入力をする。
  1. ClickFlowのAI機能エレメントで回答のURLをインプットに表示させる。
  1. 画像表示エレメントに、画像ソース>URL、URL>インプット2を設定する。
 
 

事前準備として、OpenAIのAPIキーを取得してください。

OpenAIのHPにアクセスして、ログインしてください。ダッシュボードをクリック。
 
左セクションから、「API キー」を選択。秘密鍵を作成してください。※お支払いの設定も必要となってきますが、省略させて頂きます。
APIキー>+新しい秘密鍵>新しい鍵の手順で作成してください。
ポップアップが表示されるので、今回作成するアプリの名前を入力します。名前は後から変更可能です。
Permission(権限)は検証アプリは一旦Allで問題ないですが、アプリごとに細かく設定することも可能です。
その後、「秘密鍵」を押すとAPIキーが生成されます。
 
作成が完了すると、APIキーが表示されます。セキュリティのため、APIキーは一度しか表示されないため、必ずコピーやメモをしておきましょう。

 

文章生成AIアプリを作成する(GPT-4o)

※サンプルとして、料理コンサルタントAIを作成します。
 
1.『ホーム』にインプットを2つとボタンを設置する。
分かりやすくするために、ここでは各インプットに名前をつけておきます。
インプットの行数は、複数行に設定してください。
 
 
  1. ClickFlowでAI機能を設定する
ボタンをクリックし、ClickFlowの追加>AI機能>テキスト(GPT-4o)と選択してください。
 
AI機能に名前を付けてください。
 
3. 2にAPI keyを入力し、命令文の入力をする。
ボタンをクリックし、ClickFlowを選択、『AI機能』エレメントにAPI keyと、命令文にはプロンプトと文字入力用のインプット(変数)を設定してください。
 
  1. ClickFlowで回答をインプットに表示させる。
ボタンをクリックし、ClickFlowの追加>その他>エレメント値変更を選択してください。
『エレメントの値変更』エレメントに、インプット2と、値を設定します。
値は、先程作成したAI>choices.message.content を選択してください。
 
完成しました。
献立名について質問してみました。
回答が返ってきたら成功です。
 
 

画像分析AIアプリを作成する(GPT-4o)

※サンプルとして、文字起こしAIを作成します。
 
1.『ホーム』に画像入力インプット、インプット2つ、ボタンを設置する。
分かりやすくするために、ここでは各インプットと画像エレメントに名前をつけておきます。
インプットの行数は、複数行に設定してください。
 
  1. ClickFlowでAI機能を設定する
ボタンをクリックし、ClickFlowの追加>AI機能>画像分析(GPT-4o)と選択してください。
AI機能に名前を付けてください。
 
  1. 2にGPTのAPI keyを入力し、命令文に変数の入力をしてください。
ボタンをクリックし、ClickFlowを選択、『AI機能』のエレメントにAPI keyと、命令文には文字入力用のインプット(変数)を設定してください。
 
次に画像URLの設定を行います。
画像URLの右上をクリック>Form Inputs>画像入力>URL と設定してください。
これで入力の設定が完了しました。
 
  1. ClickFlowで回答をインプットに表示させる。
ボタンをクリックし、ClickFlowの追加>エレメント値変更を選択してください。
『ClickFlowのエレメント値の変更エレメントのインプットと、値を設定してください。
値は、先程作成したAI>choices.message.content と選択してください。
 
 
完成しました。
試しにレシートを読み込んでみたところ、正確な文字起こしに成功しました。
 

画像生成AIアプリを作成する(Dall-e-3)

 
  1. 『ホーム』にインプット2つと画像エレメントとボタンを設置する
分かりやすくするために、ここでは各インプットと画像エレメントに名前をつけておきます。
 
  1. ClickFlowでAI機能を設定します。
ボタンをクリックし、ClickFlowの追加>AI機能>画像生成(Dall-e-3)と選択してください。
 
AI機能に名前を付けてください。
 
  1. 2にAPI keyを入力し、命令文にインプット1設定してください。
 
  1. ClickFlowのAI機能エレメントで回答のURLをインプット2に表示させてください。
ボタンをクリックし、ClickFlowの追加>その他>エレメント値変更を選択してください。
『エレメントの値変更』エレメントに、インプット>インプット2を設定します。
値は、先程作成したAI>date.url を選択してください。
 
5. 結果のURLを画像表示エレメントに、画像ソース>URL、URL>インプット2を設定します。
完成しました。
試しにテキストを入れてみたところ、画像を生成する事に成功しました。
 

『AIエレメント』の追加と削除

1.作成したAIエレメントの削除方法

ClickFlow>カスタムClickFlowと選択すると、今まで作成したAIエレメントの一覧がでます。
削除したいAIエレメント選択してください。
 
ClickFlowエレメントの中の編集ボタンをクリックすると、以下の画面になります。
こちらから消去する事が可能です。

2.GPTモデルの変更

既に作成したAIエレメントは、ClickFlowの中から
ニーズに合わせてGPTのモデルの変更等を行う事が出来ます。