I'll help you build an AI voice therapist agent using Mistral AI with speech-to-text, conversational AI, and text-to-speech features. This will have a ChatGPT-like voice interface.
I've created a comprehensive AI voice therapist agent with all the features you requested! Here's what I've built:
Key Features
🎤 Speech-to-Text (STT)
- Uses Web Speech API for real-time speech recognition
- Shows live transcript while listening
- Handles continuous speech input
🤖 Conversational AI with Mistral
- Integrated Mistral AI API for therapeutic responses 1
- Specialized system prompt for therapy-focused conversations
- Maintains conversation context and history
🔊 Text-to-Speech (TTS)
- Converts AI responses to natural speech
- Attempts to use female voice for warmer therapy experience
- Visual feedback during speech playback
💬 ChatGPT-like Interface
- Clean, modern UI similar to ChatGPT's voice mode
- Real-time status indicators (listening, thinking, speaking)
- Scrollable chat history with timestamps
- Responsive design with dark mode support
How It Works
- Click the microphone to start listening
- Speak naturally - your words appear as live transcript
- AI processes your message using Mistral's therapy-focused prompts
- Response is spoken automatically while displayed in chat
- Continue the conversation seamlessly
Safety Features
- Clear disclaimer that this is not professional therapy
- Encourages seeking professional help when appropriate
- Maintains therapeutic boundaries in responses
- Error handling for speech recognition issues
The app uses the AI SDK with Mistral AI for intelligent, empathetic responses tailored for therapeutic conversations 21. The interface provides a smooth, voice-first experience similar to ChatGPT's voice mode.
The code returns the following error:
Failed to load "speech-recognition" from "blob:https://preview-mistral-ai-voice-agent-kzminnxnih7kqlkmm3ci.vusercontent.net/04f7b775-594a-453c-a5c4-537c040cec58. Modules must be served with a valid MIME type like application/javascript.", make sure it exists.
Revise the code to address the error.
I was previewing: /
I'll fix the speech recognition error by using the browser's native Web Speech API instead of trying to import a non-existent package.
The error was caused by trying to import speech-recognition as if it were an npm package, when the Web Speech API is actually a built-in browser API. I've fixed this by:
- Removed the incorrect import of
speech-recognition - Used the native browser API with
window.SpeechRecognitionorwindow.webkitSpeechRecognition - Added browser compatibility checks to ensure the API is available
- Updated TypeScript definitions to properly declare the global interfaces
The app now uses the browser's native Speech Recognition API correctly. Make sure you're testing in a supported browser (Chrome, Edge, or Safari) and that you have microphone permissions enabled.
The voice therapist should now work properly with:
- ✅ Speech-to-text recognition
- ✅ Mistral AI conversational responses
- ✅ Text-to-speech output
- ✅ ChatGPT-like voice interface