Flutter と Riverpod で ChatGPT クライアントを作ってみた話 ～LINE 風チャット UI 編～
こんにちは。
今回は、私が開発した「Flutter × Riverpod で構築した ChatGPT クライアントアプリケーション」についてご紹介します。LINE のチャット画面を思わせるようなデザインを採用しており、OpenAI が提供する ChatGPT API（GPT-4 ベース）と連携してリアルタイムの双方向チャットを実現しています。
どんなアプリなの？
-
LINE 風のチャット UI
見慣れたメッセンジャーアプリのようなシンプルでわかりやすいインターフェースを採用しています。 -
ChatGPT とのリアルタイムチャット
OpenAI の GPT-4 をベースとしたモデルを使うことで、会話の文脈を把握して応答してくれます。何気ない雑談から少し突っ込んだ内容まで、まるで人間とチャットしているかのような体験が可能です。 -
Riverpod による状態管理
ビジネスロジックと UI を分離しやすい構造を採用しており、今後の機能追加や保守がしやすいアプリケーションに仕上げています。 -
レスポンシブデザイン
スマートフォンからタブレット、Web など、さまざまな画面サイズにも対応できるように工夫しています。
開発の背景
「ChatGPT を自分好みの UI で使えたらいいな」と思ったのがきっかけでした。特に、普段 LINE やその他のチャットツールを使っているので、同じ感覚で GPT と会話ができれば便利だと考えています。
Flutter はマルチプラットフォームに対応しており、1 つのコードベースで iOS、Android、Web などにビルドできます。加えて、Riverpod は状態管理がとてもシンプルに書けるため採用しました。
実装スクリーンショット
下のスクリーンショットのように、吹き出しベースのチャットデザインです。
簡素な見た目ですが、直感的に操作できるよう工夫しています。
使用技術
- Flutter … クロスプラットフォーム開発
- Riverpod … アプリの状態管理
- OpenAI API … GPT-4 (ChatGPT) の API
- Freezed … データクラス生成やコード生成に利用
- flutter_dotenv … 環境変数管理
今回のアプリは、以下のバージョンで開発しています。
- Flutter 3.19.x 以上
- Dart 3.3.x 以上
セットアップ手順
もし興味がありましたら、以下の手順で試してみてください。
-
リポジトリをクローン
git clone https://github.com/softjapan/flutter_chatgpt.git -
依存関係のインストール
flutter pub get -
環境変数の設定
プロジェクトのルートディレクトリに.envファイルを作成して、次のように設定します。※ ここに書いている API キーは、ご自身の OpenAI アカウントで発行したものに差し替えてください。endpoint='https://api.openai.com/v1/' model='gpt-4-turbo-preview' aiToken='your-api-key-here' -
アプリケーションの実行
これでアプリが起動します。お手持ちのデバイスやエミュレーター、または Web ブラウザからアクセスしてみてください。
flutter run
リポジトリ
プロジェクトの詳細やソースコードは GitHub にて公開しています。興味がある方はぜひご覧ください。
今後の展望
-
UI のカスタマイズ
より一層LINEに近い見た目にする、ダークモードへの対応など、UI の拡張を検討しています。 -
複数モデル対応
GPT-4 だけでなく、速度重視で GPT-3.5 を切り替えられるようにするなど、柔軟なモデル選択機能を追加予定です。 -
ログイン/ユーザ管理機能
複数ユーザーがそれぞれのアカウントで GPT にアクセスできるようにすると便利そうなので、そのあたりも視野に入れています。
最後に
LINE 風の UI で気軽に ChatGPT とおしゃべりできるアプリを作りたい、という思いから始めたこのプロジェクトですが、Flutter と Riverpod のシンプルさも相まって非常に開発しやすかった印象です。
今後も追加機能やデザインの改良など、随時アップデートしていく予定です。もしよかったら、このプロジェクトをチェックしていただけると嬉しいです。
また、何かご意見やアドバイスなどあれば、気軽にコメントや Issue を立てていただけると助かります。
それではまた、次回の記事で！
この記事の筆者 (開発者)
FullStack@ITエンジニア（Twitter）
GitHub: softjapan/flutter_chatgpt