こんにちは。「FlutterFlowで2時間でChatGPTアプリのクローンが作れる（Streaming API使って）」という動画がFlutterFlow公式から出てまして、
ChatGPT Clone in 2 hours | Streaming API | Custom Action | Speed Coding
ChatGPT Clone | Stream API | Custom Code Explanation
これを試してみました！
動画をみながら作りましたが、動画では完璧ではなく端折って書いていたりコードについてはちゃんと書いてないので、なかなか動画通りにやるのは難しかったです...！
とはいえ、完成し、動くと気持ちいいですね。
以下のページのように、FlutterFlowでChatGPTのAPIを利用することは普通にできるのですが、
【FlutterFlow x ChatGPT】FlutterFlowでChatGPTのAPIに接続。
今回のはChatGPTのStreaming APIを利用しています。これにより、ChatGPTからのレスポンスがストリーミングで返却されます。
すごくきもちいいです！
今回は、そもそもStreaming APIについてや、FlutterFlowのChatGPTクローンアプリの作り方について概要を説明したいと思います。
プログラミングする部分も出てきますが、あくまでノーコードとして、プログラミングを知らない人向けに書いてみます。玄人の方が見るとちょっと違うと思うかもしれないですが、わからない人向けに分かりやすく書く方を優先させたいため、その辺りはご了承ください。
最後にYoutube動画解説もあるので、ご興味のある方はそちらもどうぞ。
そもそもStreaming APIとは？
ChatGPTのAPIをノーコードなどのアプリから叩いてみたことがある人はわかると思いますが、普通に実行すると、レスポンスが一気に返ってきます。つまり、GPTの処理が全部終わるまでレスポンスを受け取れません。
ですが、通常のChatGPTを使うと（APIを介してではなく、本家のChatGPTの画面から使うと）、文字がちょっとずつ表示されますよね？処理が進む度に文字が少しずつ表示されます。
この機能を実現するのがStreaming APIです。
例えばChatGPTからのレスポンスが"I am really good" だった場合、
一回目でまず"I"が返ってきて、
次に"am"が返ってきて、
その次に"really"が返ってきて、、、
という具合に、単語ごとにレスポンスが返ってくるので、それを受け取ればアプリ側で都度文字を表示していくことができるのです。
ChatGPTをAPIで呼ぶと、レスポンスが長い場合は全部受け取るまで時間がかかりユーザーはイライラしてしまいますよね？でも少しずつ表示されるならイライラも解消されます。
ぜひこれを実装してみましょう！
FlutterFlowのAPI機能は使えない
ChatGPTのAPI的には、以下のようにNO STREAMINGとSTREAMINGがあって、
以下のようにSTREAMINGにすると、"stream": trueとすればいいことがわかります。
ただこのやり方の場合、FlutterFlowのAPIは使えません。
FlutterFlowにはAPIを利用する機能が備わってあり、プログラミングしなくてもAPI呼び出しが可能です。
ですが、ChatGPTのStreamingのようなケースには対応していないようで、カスタムファンクションでプログラムコードを書かないと実現できません。
ただ今回はそのコードを貼り付けて置くので、プログラミングがわからなくてもできるように書いていきたいと思います。
ChatGPTのUIの作成
まずはUIを作成していきましょう。
画面はとてもシンプル。ChatGPTの最初のページとして「NewChatPage」を作ります。
完全にChatGPTの見た目ですね！細かいことはブログだと大変なので動画で解説しますが、見た目がここまでGPTっぽくなるとテンション上がります...！
次に、ChatGPTとやりとりする「ChatPage」を作ります。いい感じですね。
Date Typesの設定
お次はDate Typesを設定します。
大事なポイントだけ言うと、チャットのレスポンスを保持するChatResponseを用意します。
ChatResponseにはauthor（user or assistantを保持する）と、content（レスポンスの内容）を持ちます。
AppStateの設定
次はAppStateを設定しましょう。全部説明すると大変なので、要点だけを解説します。
1つ目のポイントはチャット履歴を保持するchatHistoryです。先ほど作ったDataTypeのChatResponseのリストとして持たせます。
2つ目のポイントはapiKeyです。今回はとりあえずここにAPIキーを設定します。
カスタムアクション①：StreamApiResponse
次にAPIを作成していきましょう。
StreamApiResponseという名前で作成し、以下のようにDefine Argumentsを書きます。
次に、以下のようにコードを書いていく必要があるのですが、こちらFlutterFlow公式の動画をみても大変です... 特にプログラミングを知らない人にはハードルが高すぎる感じですね。。
なので、こちらからstreamapiresponse.dartをダウンロードして中身をテキストエディタで開き、中身を丸っとコピーして貼り付けましょう。それで動くと思います。
（ただし私が本家の動画をみながら見よう見まねで書いたものなので特に保証はしません。ご了承ください。）
カスタムアクション②：convertListToJson
今度はリストをJsonにするカスタムファンクションを作ります。
以下のように作りましょう。
参考のconvertListToJsonのコードはこちら（あくまでご参考まで）
以上でAPI関連はおしまいです。
カスタムウィジェット：MarkdownWidget
こちらはMarkdownWidgetです。GPTのレスポンスをMarkdown形式で出力するために持ちいます。以下のように記述します。
参考のMarkdownWidgetのコードはこちら（あくまでご参考まで）
メッセージ送信ボタン押下時のアクション
諸々準備が整ったので、いよいよGPTへメッセージを送るアクションを書いていきます。
まず、以下のように作っていきます。まずはUpdate App Stateです。
以下のようにCreate Data TypeからChatResponseを作ります。authorが"user"で、contentは入力されたテキストウィジェットから取ります。
次にReset Form Fieldでテキストフィールドをクリアしたら、
お次は、Custom Actionでさっき作ったconvertListToJsonを呼びます。パラメータにはchatHistoryを渡してあげましょう。
そしてAction output variable Nameに名前をつけます。"jsonOutput"と名づけました。
最後は、Custom ActionでstreamApiResponseを呼び出しますパラメータにさっき定義したjsonOutを指定しましょう。
その後、一番下にCall Back Actionがあるので、ここをクリックしてアクションを設定します。
以下のようにUpdate App Stateをして、Scroll To でListvViewをEndに設定してあげれば完了です。
ChatPageのOn Page Loadアクションにも同様の処理を入れる
On Page Loadにも以下のように「メッセージ送信ボタン押下時のアクション」と同様の処理を書きましょう。
ConvertListToJsonを行い、streamApiResponseをしてScrol Toしてあげています。
説明は結構端折ってしまいましたが、概ねこれで完了です！
動画解説：FlutterFlowでChatGPTアプリのクローン作成をYoutube動画で見たい方はこちら
以下に動画で解説しているので、興味がある方はこちらもどうぞ
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。