nuxt3-ai-chat-poc

[PoC] Nuxt 3 + VTutor + Groq + TTS Integration
VTutor is an interactive web-based talking avatar that responds to chat messages with synthesized speech and real-time facial animation. It uses Vue 3 for the chat interface and HTML5 Canvas with the Web Audio API to animate the avatar’s mouth and eyebrows based on voice volume and emotion.

Features

• Japanese and English TTS support
• Responsive design
• Audio playback
• VTutor integration
• Groq API integration
• TTS fallback

Project Structure

├── public/
│ ├── avatar-base.png # Avatar face image
│ ├── mouth-open.png # Open mouth overlay
│ ├── background.jpg # Chat background
│ └── vtutor.html # Animated avatar (iframe target)
│
├── components/
│ └── ChatBox.vue # Chat interface + iframe integration
│
├── pages/
│ └── api/chat.ts # Returns audioUrl for spoken message
│
├── README.md

Getting Started

1. Install dependencies

npm install

2. Start development server

npm run dev

💡 How It Works

1. User types a message in ChatBox.vue

2. The message is sent to /api/chat, which returns a TTS audio URL

3. The Vue component sends the audio URL + text to the embedded vtutor.html via postMessage

4. vtutor.html plays the audio, analyzes volume, and animates the avatar:

• Mouth opens based on volume level
• Eyebrows change shape to reflect emotion (angry/happy/neutral)

🧪 Example API Response (/api/chat)

{
"replyText": "こんにちは！お元気ですか？",
"audioUrl": "https://unreal-expire-in-90-days.s3-us-west-2.amazonaws.com/
0bd43948-ec5c-44d9-9521-cf40c2a7ce6c-0.mp3",
"ttsProvider": "UnrealSpeech"
}

🔧 Customization

Expression thresholds (vtutor.html)

if (volume > 15) emotion = 'angry'
else if (volume > 7) emotion = 'happy'
else emotion = 'neutral'

Mouth animation easing

currentMouthScale += (targetScale - currentMouthScale) * 0.4

Make this value lower (e.g., 0.3) for slower/smoother animation.

Avatar art

Replace these files in public/:

• avatar-base.png
• mouth-open.png
  

With your own illustrations.

📜 License

MIT License © 2025 Brian Ryder