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 ファイルを作成して、次のように設定します。
```
endpoint='https://api.openai.com/v1/'
model='gpt-4-turbo-preview'
aiToken='your-api-key-here'
```
※ ここに書いている API キーは、ご自身の OpenAI アカウントで発行したものに差し替えてください。
アプリケーションの実行
```
flutter run
```
これでアプリが起動します。お手持ちのデバイスやエミュレーター、または Web ブラウザからアクセスしてみてください。

リポジトリ

プロジェクトの詳細やソースコードは GitHub にて公開しています。興味がある方はぜひご覧ください。

Flutter ChatGPT リポジトリ

今後の展望

UI のカスタマイズ
より一層LINEに近い見た目にする、ダークモードへの対応など、UI の拡張を検討しています。
複数モデル対応
GPT-4 だけでなく、速度重視で GPT-3.5 を切り替えられるようにするなど、柔軟なモデル選択機能を追加予定です。
ログイン/ユーザ管理機能
複数ユーザーがそれぞれのアカウントで GPT にアクセスできるようにすると便利そうなので、そのあたりも視野に入れています。

最後に

LINE 風の UI で気軽に ChatGPT とおしゃべりできるアプリを作りたい、という思いから始めたこのプロジェクトですが、Flutter と Riverpod のシンプルさも相まって非常に開発しやすかった印象です。
今後も追加機能やデザインの改良など、随時アップデートしていく予定です。もしよかったら、このプロジェクトをチェックしていただけると嬉しいです。

また、何かご意見やアドバイスなどあれば、気軽にコメントや Issue を立てていただけると助かります。

それではまた、次回の記事で！

この記事の筆者 (開発者)
FullStack@ITエンジニア（Twitter）

GitHub: softjapan/flutter_chatgpt