LangChain + Flutter + Riverpod によるリアルタイム ChatGPT クライアント
Flutter × Riverpod × LangChain で構築した、LINE 風 UI のモダンな ChatGPT クライアントです。
チャットは LangChain 経由で OpenAI のストリーミング API と連携し、AI 応答をリアルタイムで描画。Markdown レンダリングやアニメーション付きローディング、ハイブリッドなテキスト＆画像生成（/image コマンド）、フルスクリーン画像ビューア／ダウンロードなど、実務投入を想定した機能を備えています。
UI は純 Flutter なので、モバイル／デスクトップ／Web へシームレスに展開できます。
flutter-chatgpt-1018.mov
- リアルタイム・ストリーミング応答
LangChain のChatOpenAIでチャット履歴をストリーム処理。部分的なデルタが届くたびにバブルが更新され、Markdown と連動して自然なレンダリングを実現。 - テキスト & 画像生成の両対応
.envのmodel/imageModelを切り替えることで最新 GPT モデルへ柔軟に接続。/image <prompt>コマンドで画像生成 API を呼び出し、トーク内にサムネイルを埋め込み。 - リッチな画像体験
画像バブルをタップするとフルスクリーンプレビュー（ピンチズーム対応）が開き、その場でローカルへダウンロード可能。Base64/URL いずれのペイロードも自動判別。 - 洗練された UI/UX
LINE 風のチャットバブル、アニメーションする「thinking...」インジケーター、Markdown を多用したドキュメント風レスポンス、SelectableText によるコピー体験を提供。 - 堅牢なアーキテクチャ
Riverpod + ChangeNotifier で状態を管理し、LLM との通信は Repository 層へ集約。モジュールごとにテスト容易性と変更耐性を確保。 - 柔軟な環境設定
.envで API キーやエンドポイントを完全に切り替え可能。OpenAI 互換プロキシや社内ゲートウェイを通した接続にも対応。
lib/
├── main.dart # エントリポイント + UI ルート
├── model/
│ ├── chat_message.dart # 不変メッセージモデル (データ層)
│ └── chatmodel.dart # ChangeNotifier (状態管理)
├── repository/
│ └── openai_repository.dart # LangChain を使った LLM アクセス
└── widgets/ # プレゼンテーション層
├── ai_message.dart
├── loading.dart
├── user_input.dart
└── user_message.dart
- Presentation: Flutter Widgets (Material Design) + Markdown 表示
- State Management: Riverpod ChangeNotifier を利用したメッセージストア
- Domain / Data: LangChain による LLM 呼び出し、OpenAI 互換エンドポイント対応
- Testing:
flutter_testによるスモークテストを用意し、ProviderScope での依存解決を検証
| Layer | Technology & Packages |
|---|---|
| UI/Presentation | Flutter, Material Design, flutter_markdown, flutter_svg, cached_network_image |
| State Management | Riverpod (flutter_riverpod) |
| LLM Integration | LangChain (langchain), LangChain OpenAI (langchain_openai), langchain_tiktoken |
| Networking | http, OpenAI REST endpoints |
| Storage/IO | path_provider (画像保存) |
| Config/Env | flutter_dotenv |
| Tooling | Dart 3.3+, Flutter 3.19+, Very Good Analysis, Flutter Test |
-
リポジトリを取得
git clone https://github.com/softjapan/flutter_chatgpt.git cd flutter_chatgpt -
依存関係の取得
flutter pub get
-
環境変数の設定
ルート直下に.envを作成し、以下を設定してください。endpoint=https://api.openai.com/v1 model=gpt-4o-mini-2024-07-18 imageModel=gpt-image-1 aiToken=your-openai-api-key
-
アプリの起動
flutter run
| Purpose | Command |
|---|---|
| 依存関係の更新 | flutter pub get |
| LangChain の追加例 | flutter pub add langchain |
| テスト実行 | flutter test |
| L10n/ビルド等 | flutter build <platform> |
- 通常のメッセージはそのまま送信すれば GPT の応答が Markdown として表示されます。
- 画像を生成したい場合は
/image 空に浮かぶ近未来都市のように/imageもしくは/imgプレフィックスを付けて送信してください。 - 生成された画像はタップで全画面表示 → 拡大縮小 → ダウンロードが可能です（モバイル／デスクトップアプリで動作）。
.envのendpointを差し替えれば OpenAI 互換 API（プロキシ、Azure OpenAI 等）にも接続できます。
- リポジトリを Fork
- ブランチを作成
git checkout -b feature/awesome-feature
- 変更をコミット
git commit -m "Add awesome feature" - Push & Pull Request
git push origin feature/awesome-feature
このプロジェクトは MIT License の下で公開されています。
- Twitter: システムエンジニア@JP
- GitHub: softjapan/flutter_chatgpt
A Flutter + Riverpod ChatGPT client leveraging LangChain’s ChatOpenAI for streaming responses, delivering a LINE-style chat experience with Markdown rendering, responsive UI, and environment-driven configuration. Cross-platform ready, production-oriented architecture with clear separation of concerns and automated testing.