FlutterFlowでChatGPT APIと連携する方法

FlutterFlowは、コードを書かずにアプリ開発ができるノーコードツールとして人気です。ChatGPT APIとの連携により、自然言語処理や文章生成といったAI機能をアプリに簡単に追加することができます。本記事では、FlutterFlowでChatGPT APIを連携し、簡単なチャットボットを作成する方法をステップバイステップで解説します。

実装手順
まとめ

実装手順

1.ChatGPT APIの準備

OpenAIのウェブサイトにアクセスし、アカウントを作成します。
APIキーを取得します。URLは「https://platform.openai.com/account/api-keys」
以下のページが表示されるのでCreate new secret keyからAPIキーを作成できます。

2.画面にTextFieldとボタンを配置

以下の図のように画面にTextFieldとボタンを配置します。
上側のTextFieldはChatGPTへの質問事項を入力、下側は受信した結果を表示するための者です。

3. FlutterFlowでAPIの準備

左側のアイコンをクリックしてAPI Callsを開きます。

「+ Add」→「Create API Call」を選択

API Call Nameは適当に設定。Method Typeは「POST」、API URLは「https://api.openai.com/v1/chat/completions」を設定します。OpenAIのURLがバージョンアップすることもあるので最新の情報は以下のページから確認してください。
今回の設定も以下のページのMaking requestsを参考にして実装していきます。

Just a moment...

ヘッダーは上記ページの記載を参考に以下の通り設定
Bearerの以下にはステップ１で取得したAPIキーを設定してください。

参考とするopenai社のページの記載はこちら。-Hの部分がヘッダーです。

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
     "model": "gpt-3.5-turbo",
     "messages": [{"role": "user", "content": "Say this is a test!"}],
     "temperature": 0.7
   }'

BodyはJSONで以下の通り設定。ここでは上記のopenai社のページの記載をそのまま使います。
bodyの部分（-dの中身）をそのまま張り付けてください。
「Format」ボタンを押すときれいに並べてくれます。

第一弾のAPIの設定は完了です。

4. APIの動作テスト

Response & Testで動作確認をします。先ほどAPIを作成した箇所（Call Definition)の右側のタブになります。
こちらでTest API Callを実行するとJSONでChatGPTのAPIから返信が返ってきます。
statusで200 successが返ってきていれば問題有りません。

5. APIで変数の設定

先ほどの試験では”content”に”Say this is a test!”と設定していました。
これがChatGPTへの命令になります。なのでChatGPTからの返信は”This is a test!”になっていました。
ChatGPTに自由に指示を出すように変数の設定をします。
APIの設定を行う”Call Definition”の配下にある”Variables”（変数）を選択します。
こちらで変数を設定します。今回は変数名を”Input_question”としました。Default Valueは仮で”日本の総理大臣は？”としています。

次にBodyの設定に戻り、Contentの箇所に先ほど作成した変数を設定するようにします。
Bodyの上部にVariables：”Input_question”が表示されているのでそれをドラッグして”content”の値に設定します。
こんな感じです。

そして重要なのが”Advanced settings”でEncode Body as UTF-8 BytesとDecode Response as UTF-8のチェックをONにすることです。（一番したの２つをONに設定）
これをしないと日本語が適切に表示されません。

これで再度Response & Testで動作確認を実施してください。
2021年12月段階で岸田文雄さんが総理大臣だと返ってきました。

最後にAdd Callをしておいてください。

6. ChatGPTからの戻り値を取り出す準備

APIで受信したレスポンスを画面上のアクションで取得する準備をします。
“Response & Test”のタブ配下にあるJSON PathsでChatGPTから戻ってきた値のうち、必要なものを取得します。
APIのテストを実施するとJSON Pathsが以下のようになります。
この中で必要なデータ（ここではchoices[:]message.content）だけ”Add JSON Path”で登録します。
以下のように適当なName (ここでは”Output”と設定）を設定します。このOutputというNameで取得した値を画面上に後ほど設定します。
ちゃんとSaveしておいてくださいね。

画面からAPIの呼び出し

”質問の送信”ボタンにActionsを登録します。

ActionでAPI Callをまず選択してください。

Group or Call Nameは先ほど作成した”ChatGPT”です。
Variables（変数）は”Input_question”とします。”Input_question”に渡す値はWidget stateの”TextField1(ChatGPTへの質問)”としています。これは画面上部の入力ボックスの値を変数としてAPIに渡す処理になっています。