シンプルチャットアプリケーション デモンストレーション

1. プロジェクト概要

このプロジェクトは、AIチャットボットとの会話を通じて、AIアプリケーションにおけるコンテキスト（文脈）の活用方法と、クライアント・サーバー間の簡易的な情報交換の取り決め（プロトコル）を学ぶためのデモンストレーションアプリケーションです。

ユーザーがメッセージを送信すると、バックエンドのAI（このデモではシンプルなロジック）が応答します。この際、過去の会話の履歴（コンテキスト）を考慮して、より自然な会話の流れを実現することを目指しています。

2. 学習目的

• AIアプリケーションがどのように会話の文脈を理解し、それに基づいて応答を生成するかの基本的な仕組みを理解する。
• フロントエンドとバックエンド間で、会話の履歴を含む情報をどのように交換するかの一例を学ぶ。
• シンプルなチャットインターフェースの実装方法を学ぶ。

3. プロジェクトの起動方法

3.1. バックエンド (FastAPI)

バックエンドサーバーはPythonのFastAPIフレームワークで構築されています。

1. ターミナルを開き、backend ディレクトリに移動します。

   cd backend
   

2. 必要なライブラリをインストールします。

   poetry install
   

3. 開発サーバーを起動します。

   poetry run uvicorn app.main:app --reload --port 8000
   

   サーバーは http://localhost:8000 で起動します。

3.2. フロントエンド (React + Vite)

フロントエンドはReactライブラリとViteビルドツールを使用して構築されています。

1. 別のターミナルを開き、frontend ディレクトリに移動します。

   cd frontend
   

2. 必要なライブラリをインストールします。

   npm install
   

3. 開発サーバーを起動します。

   npm run dev
   

   通常、フロントエンドアプリケーションは http://localhost:5173 でアクセス可能になります（起動時にターミナルに表示されるURLを確認してください）。

ブラウザでフロントエンドのURLにアクセスすると、チャットインターフェースが表示されます。

4. ディレクトリ構成

.
├── backend/        # バックエンド (FastAPI) アプリケーション
│   ├── app/
│   │   ├── main.py # APIエンドポイントとAIロジック
│   │   └── ...
│   ├── tests/      # テストコード
│   ├── pyproject.toml # Pythonプロジェクト設定、依存関係 (Poetry)
│   └── README.md   # バックエンド固有の説明
├── frontend/       # フロントエンド (React + Vite) アプリケーション
│   ├── src/
│   │   ├── App.tsx # メインのReactコンポーネント（チャットUI）
│   │   └── ...
│   ├── package.json # Node.jsプロジェクト設定、依存関係
│   └── README.md   # フロントエンド固有の説明
└── README.md       # このファイル (プロジェクト全体の概要)

5. 技術スタック

• バックエンド: Python, FastAPI
• フロントエンド: TypeScript, React, Vite
• パッケージ管理: Poetry (Python), npm (Node.js)

---

このデモンストレーションを通じて、AIとの対話システムにおける基本的な概念や実装の流れを掴んでいただければ幸いです。