FlutterFlow × ChatGPT：API Callの設定方法

はじめに

本記事ではFlutterFlowのAPI Callを使ってChatGPTに接続する方法をまとめています。FlutterFlowは、Googleが提供するFlutterベースのアプリ開発プラットフォームで、ChatGPTとは今話題のOpenAIが提供する自然言語処理モデルです。

ChatGPTでは様々な自然言語処理タスクを実現することができるので、FlutterFlowと連携することで、AIチャットボットや記事要約、翻訳アプリなど、多様なアプリケーションを迅速に開発することができそうですね。

今回はFlutterFlowのAPI Callの設定方法についてフォーカスしています。FlutterFlowについては、他にもいくつかまとめていますので、よろしければこちらの記事も併せてご参考ください。

また、本記事で使用しているFlutterFlowのバージョンは執筆時点(2023/4/25)のv3.1(Flutter3.7.3)となっています。

API Callについて

API Callとは、RESTful APIを通じて外部のシステムやサービスとデータをやりとりするための方法です。FlutterFlowでも、このAPI Call機能を使用して外部のRESTful APIにアクセスし、データを取得することができます。今回はOpenAIが公開しているChatGPTのAPIへ接続してAIと対話を行ことができるAPI Callを設定します。

OpenAIでAPIキーの取得

まずはOpenAIのWebサイトからアカウントを作成し、API Callに必要なAPIキーを取得します。

キーはAPIにアクセスするために必要な認証情報のため、安全に管理する必要があります。キーが漏洩したと思われる場合は、すぐに新しいキーを生成して古いキーを無効化しましょう。

アカウントの作成は、Productの「Get started」ボタンから行うことができます。作成が完了すると、ダッシュボードのAPI KeysからAPIキーを取得することができます。

なお、OpenAIへのAPI Callは従量課金制です。使用するモデルや質問の文字数などで料金が変動し、Playgroundと呼ばれる、開発者向けの動作確認ツールで使用した分も同様の料金が発生しますので、ご注意ください。

また最初の3か月間に使用できる無料クレジットに関しても、以前までは18＄でしたが、現時点では5＄に変更されているようです。価格の詳細についてはPricingを参考に最新情報を確認するようにしてください。

参考までに今回使用するモデルは「gpt-3.5-turbo」で、現在の使用料は「$0.002/1Ktokens」となっています。

1Ktokensとは1000トークンのことで、ここで言うトークンとはやり取りの際に消費される単位です。送受信の両方でトークンは消費されますが、リクエスト時のおよそのトークン数は、開発者用のPlaygroundでも確認することができます。

FlutterFlowの設定

API Callを実装したいFlutterFlowのプロジェクトを準備します。

使用するAPIは、OpenAIのCreate chat completionを参考に設定します。

https://platform.openai.com/docs/api-reference/chat/create

FlutterFlowのナビゲーションメニューからAPI Callsを選択し、「+Add」ボタンで新規API Callを作成します。

Call Definition

次に、下表を参考に呼び出しの定義を設定していきます。Headersに設定するYOUR_OPENAI_API_KEYは、先ほどOpenAIのダッシュボードから取得したご自身のAPIキーに置き換えてください。

項目	設定値
API Call Name	任意の名前
Method Type	POST
API URL	https://api.openai.com/v1/chat/completions
Headers1	Content-Type: application/json
Headers2	Authorization: Bearer YOUR_OPENAI_API_KEY

API Call内で使用する変数を「Variables」タブの「+ Add Variable」ボタンから定義していきます。今回は2つのパラメータを変数として作成します。

Name	Type	Is List	Default Value
model	String	False	gpt-3.5-turbo
messages	JSON	---	---

messagesには、会話のリストをセットする必要があるのでTypeを「JSON」としておきます。

Variablesの設定ができたら、「Body」タブで「JSON」を選択してRequest bodyの設定を行います。

modelとmessages以外にも、変数として使用したいパラメーターがあれば、Variablesで追加してください。設定した変数はドラッグアンドドロップでセットすることができます。

{
  "model": "<model>",
  "temperature": 0.7,
  "top_p": 1,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "messages": <messages>
}

Bodyの設定ができたら「Advanced Settings」タブで、日本語でのやり取りで文字化けしないようにUTF-8のトグルを2つオンにしておきます。

ここまで出来たら「Save」ボタンで保存しておきます。

補足：
Advanced Settingsの「Make Private」をオンにすることで、API CallをCloud Functionで安全にルーティングできるようになるようですが、FirebaseをBlazeプランにアップグレードする必要があったため、今回はオフで作成しました。

Response & Test

Call Definitionで定義の設定ができたらAPI Callのテストを実行してみます。Variablesの「messages」のチェックボックスをオンにして「[{"role": "user", "content": "こんにちは！"}]」と入力し「Test API Call」ボタンをクリックします。「こんにちは！」の部分は、質問したい内容などに置き換えていただいても問題ありません。

[{"role": "user", "content": "こんにちは！"}]

API Callが成功すれば、Test Responseで内容を確認できます。

「JSON Paths」の「Recommend」では、Selectedにチェックを入れることで、受け取ったレスポンスのパスに名前をつけることができます。名前を付けておくと、アクションで使用する際にも扱いやすくなるのでおススメです。

AIと会話をやり取りするには、レスポンスで受けっとった内容をmessagesのパラメータにリスト形式で追加していきます。

[{"role": "user", "content": "こんにちは！"},{"role": "assistant","content": "こんにちは！私はAIアシスタントです。何かお手伝いできますか？"}]

実際にFlutterFlowのUI側ではどのように実装するのか？については、また別の記事でご紹介できればと思います。

まとめ

今回はFlutterFlowのAPI Call機能を使って、ChatGPTにリクエストを行う設定方法についてまとめました。

FlutterFlowはビジュアル的なUIエディターにより、アプリのプロトタイプ開発を容易にすることができます。一方、ChatGPTは、自然言語処理に特化したAPIであるため、自然言語を用いた対話型の機能を迅速に実装することができます。FlutterFlowとChatGPTを組み合わせて、アプリの開発時間を短縮しつつ、ユーザー体験を向上させることができると良いですね！

ここまでお読みいただき、ありがとうございました😌

参考リンク

https://openai.com/blog/chatgpt

https://platform.openai.com/docs/api-reference/chat

https://docs.flutterflow.io/data-and-backend/api-calls