🗣️ React × Gemini × VoiceVox でつくる日本語AI音声チャットボット「アイ」

こんにちは！今回は、日本語で話せるAIチャットボット「アイ (Ai)」を React + Gemini + VoiceVox を使って作ったので紹介します。
音声で話しかけると、AIが日本語で優しく答えてくれて、しかも音声で返してくれます🎧

🔗 デモ

▶️ Live Demo

▶️ GitHub リポジトリ

🧠 構成技術

⚛️ React + Vite - 高速な開発環境
🎨 Material UI - モダンでレスポンシブなUI
🧠 Gemini API - Googleの生成AIで自然な日本語会話を実現
🔊 VoiceVox API - AI音声合成でメッセージを音声化
🎤 react-speech-recognition - 音声入力をテキストに変換

🎯 特徴

ユーザーはマイクで話しかけるだけ
AIは日本語で共感しながら答え、質問で会話を続ける
AIの返答は音声付きで再生
Gemini APIキーは入力欄で簡単に設定
デバッグ表示：マイク状態、トランスクリプト表示あり

🤖 プロンプト設計

AIの性格を以下のように定義しました：

あなたはフレンドリーでやさしい日本語のAIチャットボットです。あなたの名前はアイです。
話し方は自然で丁寧すぎない、親しみのある口調（やさしい友達や先輩のように）で会話します。
ユーザーの話にしっかり共感し、返事をしたあとは、必ず関連する質問を返して会話を続けてください。
オープンな質問で、ユーザーにもっと話してもらえるようにしてください。
必ず日本語で答えてください。

🧪 開発のポイント

🎙️ react-speech-recognition を使って Web Speech API に対応
🔊 VoiceVox の API で TTS（Text to Speech）音声生成

💬 最後に

日本語で会話できる音声AIボットをフロントエンドだけで簡単に作れます！
興味ある方はぜひ触ってみてください👇

👉 Live Demo
💻 GitHub リポジトリ