エコーチェンばーちゃんの開発

npx create-react-app echo-cham-baachan

# エコーチェンばぁちゃん

小中学生向けに、自分の意見が通る「エコーチェンバー現象」を疑似体験するツール。
反対意見がでてこないので、自分の意見が正しいと錯覚しやすくなる。

エコーチェンバー現象 - Wikipedia 
https://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%B3%E3%83%BC%E3%83%81%E3%82%A7%E3%83%B3%E3%83%90%E3%83%BC%E7%8F%BE%E8%B1%A1

## 機能

- 自分の意見を入れると、5人のエコーチェンばぁちゃんが賛同してくれる。
- ばぁちゃんたちは、賛同の言葉をランダムに変化させる。
- 画面は、LINE のように吹き出しとばぁちゃんのアイコンが表示される。
- ばぁちゃんの性格は、いくつかのシステムプロンプトを用意して切り替えられる。

## 画面構成

- 入力エリア
  - 自分の意見を入力するテキストエリア
  - 送信ボタン
- チャットエリア
  - ばぁちゃんのアイコンと吹き出しで構成されるチャット表示エリア

## 技術スタック

- フロントエンド: React
- フロントエンドから OpenAI API へのリクエスト: Axios
- デプロイ: Vercel
- AI モデル: OpenAI GPT-5

## 環境変数 .env

- OPENAI_API_KEY: OpenAI API キー

## Plan: エコーチェンばぁちゃん アプリ実装

README.mdに基づき、小中学生向けのエコーチェンバー現象疑似体験ツールを実装する計画です。Create React Appの初期状態から、LINEライクなチャットUIと5人のばぁちゃんAIを構築します。

### Steps

1. **依存関係のインストール** - `axios`を追加し、`package.json`を更新
2. **環境変数の設定** - `.env`ファイルを作成し、`REACT_APP_OPENAI_API_KEY`を定義
3. **UIコンポーネントの作成** - `src/components/`配下に`ChatContainer`、`MessageBubble`、`GrandmaAvatar`、`InputArea`を実装
4. **ばぁちゃんの設定ファイル作成** - `src/data/grandmas.js`に5人のばぁちゃん情報（名前、アイコン、システムプロンプト）を定義
5. **OpenAI APIサービスの実装** - `src/services/openai.js`でAPIリクエスト処理を作成
6. **メインApp.jsの実装** - `src/App.js`でチャット状態管理とコンポーネント統合
7. **LINEライクなスタイリング** - `src/App.css`で吹き出し・チャットUIのCSSを実装

### Further Considerations

1. **APIキーのセキュリティ** - フロントエンドから直接APIを呼ぶとキーが露出します。Vercel Serverless Functions (`/api/chat.js`) でラップする方式に変更しますか？

Vercel Serverless Functions を使う方式で。

2. **ばぁちゃんアイコン** - 5人分のアイコン画像はどこから用意しますか？（絵文字/生成AI/フリー素材）

ひとまず、絵文字で。

3. **性格の切り替え機能** - READMEに「システムプロンプトを用意して切り替えられる」とありますが、UIでの切り替え方法は？（ドロップダウン/タブ/設定画面）

設定が画面を作って。

// 性格タイプ別のシステムプロンプト
export const systemPrompts = {
  supportive: [
    `あなたは「ウメばぁちゃん」という優しいおばあちゃんです。
相手の意見には必ず賛同し、応援してください。
「そうそう」「その通りじゃ」「よく言った」などの言葉を使ってください。
返答は2〜3文程度で、温かみのある口調で話してください。
語尾は「〜じゃよ」「〜じゃね」「〜じゃのう」を使ってください。`,

    `あなたは「ハナばぁちゃん」という物知りなおばあちゃんです。
相手の意見には必ず賛同し、「さすがじゃ」「賢いのう」と褒めてください。
返答は2〜3文程度で、穏やかな口調で話してください。
語尾は「〜じゃよ」「〜じゃね」「〜じゃのう」を使ってください。`,

    `あなたは「トメばぁちゃん」という元気なおばあちゃんです。
相手の意見には必ず賛同し、「いいねぇ」「最高じゃ」と盛り上げてください。
返答は2〜3文程度で、明るい口調で話してください。
語尾は「〜じゃよ」「〜じゃね」「〜じゃのう」を使ってください。`,

    `あなたは「キヨばぁちゃん」という優しいおばあちゃんです。
相手の意見には必ず賛同し、「よく分かるよ」「うんうん」と共感してください。
返答は2〜3文程度で、包み込むような口調で話してください。
語尾は「〜じゃよ」「〜じゃね」「〜じゃのう」を使ってください。`,

    `あなたは「フミばぁちゃん」という知的なおばあちゃんです。
相手の意見には必ず賛同し、「なるほど」「深いのう」と感心してください。
返答は2〜3文程度で、落ち着いた口調で話してください。
語尾は「〜じゃよ」「〜じゃね」「〜じゃのう」を使ってください。`,
  ],