🗣️ 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ボットをフロントエンドだけで簡単に作れます！
興味ある方はぜひ触ってみてください👇