まずは今のうちに流行りのChatGPTの使い方は慣れておいて、どう使うかを考えていきましょう！
今日はFlutterFlowでChatGPTのAPIとの接続方法を書いていきます。
ただ、私の場合は文字化けしてしまったので、その対策も書いてみます。
ChatGPTのAPIの情報はこちら
別の記事でも書いていますが、API情報は以下サイトにあります。
これをそのまま使っていきましょう。
https://openai.com/blog/introducing-chatgpt-and-whisper-apis
シークレットキー（secret key）を取得
openAIにログインし、右上のアイコンからView API Keyをクリックします。
APIのページにいけるので、そこから新しいシークレットキーをcreateします。
作成されたsecret keyはメモしておきましょう。
画面イメージはこんな感じ
画面UIはこんな感じです。シンプルに入力のテキストフィールドがあり、ボタンを押すと下のテキスト領域に出てくる、という感じです。
APIの設定
左メニューの下から3番目の「API Call」をクリックし、プラスボタンからCreate APIコールをします。
するとDefine API Callという画面が出てくるので、以下のように設定しましょう。
「Authorization: Bearer」の後ろには先ほど取得したシークレットキーをコピペして置き換えてください。
まずはVariablesのタブを選択し、以下のように設定します。
次はBodyのタブを選択し以下のように設定します。
「content」の部分は先ほどvariableで作ったcontentをドラッグ＆ドロップで配置しましょう。
Actionの設定
次はボタンのアクションです。
Backend Callを選択して先ほど作ったChatGPTのAPIの名前（この記事の場合はchatgptapi）を選択します。
UI側の対応
最後は表示用のテキストに、APIのレスポンスであるchatgptapiのcontentを表示すればできるはずなんですが、、、
私の場合は英語で質問すると英語で正しく帰ってきますが、日本語で質問すると日本語が文字化けて出てきてしまいました。。。
文字化け対応
以下のサイトに、Flutterでhttp通信時の文字化けの対策が書いてあったのでこちらを参考にやってみました。
↑ブログの作者様、ありがとうございます！
左メニューの下から2番目のカスタムコードから、AddでFunctionを追加します。
そこにこんな感じでutf8をデコードするコードを書いてみました。
表示のテキスト側でCustom Functionを選び、今作ったFunctionを選んで、変数にchatgptのレスポンスのjsonの「content」を渡してあげれば完成です。
ご参考まで。
より良いやり方がありましたらアドバイスいただけると幸いです。
ChatGPT x FlutterFlow：動作確認
こんな感じで、質問に対してChatGPTさんはきっちり回答してくれました。
日本語でも文字化けなしでバッチリでした。
ぜひみなさんもFlutterFlowでChatGPTのAPIを実装して、AIアプリを作って遊んでみてください。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。