はじめに
今回はFlutterFlowでChatGPTアプリを作成します。
FlutterFlowのテンプレートを使用することで非常に簡単にAIチャット機能を実装することが可能です。
それではやっていきましょう。
プロジェクト作成
FlutterFlowダッシュボードからCreate Newボタンをクリックし、プロジェクトを作成しましょう。
ここでは、「ChatGPT Demo」とプロジェクト名を入力し、Blank AppのCreate Blankボタンをクリックします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a0370299504e4e5d2_65c06f6420a16ce87a9e8a03_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.38.36.png)
プロジェクトの設定をします。
今回はFirebaseの設定は必要ないので、Setup FirebaseはオフにしてStart Buildingボタンをクリックし、プロジェクトをセットアップします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e604_65c06f72db6f2c3d9f4c637b_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.39.04.png)
プロジェクトの準備が完了しました。
ChatGPTテンプレート追加
今回はFlutterFlowであらかじめ用意されているChatGPTのテンプレートを追加しましょう。
ページ追加ボタンをクリックしてください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5ec_65c06fb43e490e7d101b29b6_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.39.17.png)
モーダルが開いたらタブからFlowsを選択してください。
その中から「Chat GPT (Component)」を探し、Add to Projectボタンでプロジェクトに追加しましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a0370299504e4e5d5_65c06fc1343c37b1b219b819_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.39.48.png)
そのままAdd to Projectします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5da_65c06fd59cd3b97eabc68ced_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.39.59.png)
Flowの名前はデフォルト名の「ChatGPTComponent」とし、Create FlowボタンでFlowを作成します。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5fc_65c06fe1db6f2c3d9f4ca602_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.40.08.png)
1つのページと3つのコンポーネントが作成されました。
「chat_ai_Screen」ページ内に3つのコンポーネントが配置されている構造となっています。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5ef_65c06feca7461fca4f689eff_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.40.30.png)
テストモードを立ち上げたときに「chat_ai_Screen」ページを表示させるようにしましょう。
左ナビゲーションバーからApp Detailsを選択し、Initial Page > Entry Page、セレクトボックスからchat_ai_Screenを選択してください。
ここで一度、テストモードを立ち上げてみましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5e9_65c06ffd5b2328596b9ad687_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.43.34.png)
テストモードを立ち上げると下の画像のような画面が表示されます。
色々メッセージが表示されていますが、OpenAIのサイトからAPIキーを取得してくださいというのような内容となっています。
OpenAIのAPI Keyを設定していないので、このAIチャットはまだ機能しません。
AIチャットを機能させるため、OpenAIのAPI Keyを作成し、設定しましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5f2_65c0700dab3fd8f47c08b620_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252010.45.34.png)
OpenAI API Keyの作成
以下の記事などを参考にし、OpenAIのAPI Keyを作成し、API Keyをコピーしてください。
[超初心者向け] ChatGPT(OpenAI)のAPI key取得手順|TodoONada株式会社
OpenAIのAPI Keyを作成しました。
このAPI Keyをコピーしておき、FlutterFlowに設定しましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5f8_65c07060735b354f99210060_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252011.21.20.png)
OpenAI API Keyの設定
FlutterFlowの画面に戻り、aiChat_Componentに移動しましょう。
aiChat_Component内のメッセージ送信ボタン(iconButton)を選択し、Actions画面を開いてください。
Actions画面から、Backend Callを選択し、Variables > Valueに、先程コピーしたOpenAI API Keyを貼り付けましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5ff_65c0706a515ee2a80d700710_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252013.06.18.png)
OpenAI API Keyを貼り付けました。
これでAI Chatが機能します。
確認してみましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e607_65c0707626990d4c1cd7a026_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252013.06.32.png)
ChatGPTアプリ完成!
再度、テストモードを開いてください。
メッセージ入力フィールドに何かメッセージを入力し、送信ボタンをクリックしてみましょう。
そうすると、AIからメッセージが返り、AIとのチャットができるようになりました🎉
¥
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44b0370299504e4e5f5_65c0709e9c1a33194f900084_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-05%252013.11.08.png)
AIチャットが機能しない場合、以下の点をもう一度確認してみてください。
- OpenAI API Keyは正しいか?
- テストモードでInstant Reloadをクリックし、更新する
- テストモードでSessionが切れている場合、New Sessionボタンをクリックする
さいごに
今回はFlutterFlowでChatGPTアプリを作成しました。
FlutterFlowのChatGPTテンプレートを使用することで、OpenAI API Keyを設定するだけで、AIチャット機能が完成しました。
FlutterFlowには他にも便利なテンプレートが用意されていますので、試してみるのもいかがでしょうか。