概要
Geminiとかを使用していて時々、自分でもそういうような画面を作りたい思うことがあるので、良い機会かと思い作ってみることにしました
今回やることは、フロントエンドとバックエンドのガワを作るとことまでを目標としています
裏側の実際にAIに質問して回答を得るというところまでは次回以降、開発が進み次第お見せできればと思います
本題
早速ですが出来上がった画面がこちらになります
AI対話型のサービスで見る形とほとんど同じような画面かと思います
あとは実際にテキスト入力欄に質問を入力して、対話を進めていくという感じになります
技術スタックは以下の通りです
- フロントエンド
- フレームワーク: Next.js (v16.2.10) (App Router 構成)
- UIライブラリ: React (v19.2.4)
- 言語: TypeScript (v5)
- スタイリング: Vanilla CSS (globals.css によるカスタム変数管理)
- バックエンド
- 言語: Python (>=3.11)
- フレームワーク: FastAPI (>=0.100.0)
- パッケージ管理: uv (pyproject.toml, uv.lock)
- ORM: SQLAlchemy (>=2.0.0)
- バリデーション: Pydantic (>=2.0.0)
- APIサーバー: Uvicorn (>=0.22.0)
- データベース
- エンジン: SQLite3 (ローカルファイル chat.db への接続設定を database.py に記述)
現状はまだAIとのやりとりは実装していないので、あらかじめ決めた文言ともしもやりとり実装した場合の出力例を出すようにしています
ここから自分好みにカスタマイズしていけるように色々嗜好を凝らして開発に繋げていきたいと思います
おわりに
紹介だけになりますが、今回はここまでです
これからこの分野に関しては継続的にリポジトリを更新して、こんな機能を作りました、工夫しました
みたいな共有がメインになっていくかと思いますが、興味がある方はぜひ継続してウォッチしていただければと思います