AI連携
2024/6/13リリースされた機能です。
今回のアップデートでは、ClickFlowにAI連携機能が追加され、簡単に最新モデルのGPT-4oとの連携が可能になりました。基本的な使い方を説明いたします。
※APIを使用するためStandardプラン以上でご利用可能です。
目次
事前準備として、OpenAIのAPIキーを取得してください。
OpenAIのHPにアクセスして、ログインしてください。ダッシュボードをクリック。
‣
左セクションから、「API キー」を選択。秘密鍵を作成してください。※お支払いの設定も必要となってきますが、省略させて頂きます。
APIキー＞＋新しい秘密鍵＞新しい鍵の手順で作成してください。
ポップアップが表示されるので、今回作成するアプリの名前を入力します。名前は後から変更可能です。
Permission（権限）は検証アプリは一旦Allで問題ないですが、アプリごとに細かく設定することも可能です。
その後、「秘密鍵」を押すとAPIキーが生成されます。
作成が完了すると、APIキーが表示されます。セキュリティのため、APIキーは一度しか表示されないため、必ずコピーやメモをしておきましょう。
文章生成AIアプリを作成する（GPT-4o）
※サンプルとして、料理コンサルタントAIを作成します。
1.『ホーム』にインプットを２つとボタンを設置する。
分かりやすくするために、ここでは各インプットに名前をつけておきます。
インプットの行数は、複数行に設定してください。
- ClickFlowでAI機能を設定する
ボタンをクリックし、ClickFlowの追加＞AI機能＞テキスト（GPT-4o）と選択してください。
AI機能に名前を付けてください。
３. ２にAPI keyを入力し、命令文の入力をする。
ボタンをクリックし、ClickFlowを選択、『AI機能』エレメントにAPI keyと、命令文にはプロンプトと文字入力用のインプット（変数）を設定してください。
- ClickFlowで回答をインプットに表示させる。
ボタンをクリックし、ClickFlowの追加＞その他＞エレメント値変更を選択してください。
『エレメントの値変更』エレメントに、インプット２と、値を設定します。
値は、先程作成したAI＞choices.message.content を選択してください。
完成しました。
献立名について質問してみました。
回答が返ってきたら成功です。
画像分析AIアプリを作成する（GPT-4o）
※サンプルとして、文字起こしAIを作成します。
1.『ホーム』に画像入力インプット、インプット２つ、ボタンを設置する。
分かりやすくするために、ここでは各インプットと画像エレメントに名前をつけておきます。
インプットの行数は、複数行に設定してください。
- ClickFlowでAI機能を設定する
ボタンをクリックし、ClickFlowの追加＞AI機能＞画像分析（GPT-4o）と選択してください。
AI機能に名前を付けてください。
- ２にGPTのAPI keyを入力し、命令文に変数の入力をしてください。
ボタンをクリックし、ClickFlowを選択、『AI機能』のエレメントにAPI keyと、命令文には文字入力用のインプット（変数）を設定してください。
次に画像URLの設定を行います。
画像URLの右上をクリック＞Form Inputs＞画像入力＞URL と設定してください。
これで入力の設定が完了しました。
- ClickFlowで回答をインプットに表示させる。
ボタンをクリックし、ClickFlowの追加＞エレメント値変更を選択してください。
『ClickFlowのエレメント値の変更エレメントのインプットと、値を設定してください。
値は、先程作成したAI＞choices.message.content と選択してください。
完成しました。
試しにレシートを読み込んでみたところ、正確な文字起こしに成功しました。
画像生成AIアプリを作成する（Dall-e-3）
- 『ホーム』にインプット２つと画像エレメントとボタンを設置する
分かりやすくするために、ここでは各インプットと画像エレメントに名前をつけておきます。
- ClickFlowでAI機能を設定します。
ボタンをクリックし、ClickFlowの追加＞AI機能＞画像生成(Dall-e-3)と選択してください。
AI機能に名前を付けてください。
- ２にAPI keyを入力し、命令文にインプット１設定してください。
- ClickFlowのAI機能エレメントで回答のURLをインプット２に表示させてください。
ボタンをクリックし、ClickFlowの追加＞その他＞エレメント値変更を選択してください。
『エレメントの値変更』エレメントに、インプット＞インプット２を設定します。
値は、先程作成したAI＞date.url を選択してください。
5. 結果のURLを画像表示エレメントに、画像ソース＞URL、URL＞インプット２を設定します。
完成しました。
試しにテキストを入れてみたところ、画像を生成する事に成功しました。
『AIエレメント』の追加と削除
1.作成したAIエレメントの削除方法
ClickFlow>カスタムClickFlowと選択すると、今まで作成したAIエレメントの一覧がでます。
削除したいAIエレメント選択してください。
ClickFlowエレメントの中の編集ボタンをクリックすると、以下の画面になります。
こちらから消去する事が可能です。
2.GPTモデルの変更
既に作成したAIエレメントは、ClickFlowの中から
ニーズに合わせてGPTのモデルの変更等を行う事が出来ます。
注意事項
AIが動かない場合、プロンプト内に改行が含まれている可能性があります。改行が含まれるとAIが動作しないため、ご注意ください。
最終更新日：2025/03/16