Fix API key placeholder - add valid MiniMax key in .env.local

2026-02-26 19:02:48 +01:00
parent ba775f3fb7
commit 57a7674b5c
4 changed files with 554 additions and 30 deletions
@@ -0,0 +1,134 @@
+# 🎙️ SiteMente Custom Voice Widget
+
+A custom voice AI chat widget using **MiniMax** as the brain, **Web Speech API** for input, and **Browser TTS** for output.
+
+---
+
+## ✅ What's Included
+
+1. **MiniMaxVoiceWidget.tsx** - React component
+2. **API endpoint** - `/api/ai/voice-chat`
+
+---
+
+## 🚀 Quick Deploy
+
+### 1. Copy Files to Production
+
+Copy these files to your SiteMente repo:
+- `components/MiniMaxVoiceWidget.tsx` → `SiteMente/components/MiniMaxVoiceWidget.tsx`
+- `app/api/ai/voice-chat/route.ts` → `SiteMente/app/api/ai/voice-chat/route.ts`
+
+### 2. Update .env.local (if needed)
+
+```env
+MINIMAX_API_KEY=your_minimax_key_here
+```
+
+### 3. Add to Page
+
+In any page (e.g., `app/page.tsx` or `app/demos/[vertical]/page.tsx`):
+
+```tsx
+import MiniMaxVoiceWidget from "@/components/MiniMaxVoiceWidget";
+
+export default function DemoPage() {
+  return (
+    <>
+      {/* Your page content */}
+      
+      <MiniMaxVoiceWidget 
+        businessName="Restaurante Ejemplo"
+        businessType="restaurant"
+        theme="dark"
+      />
+    </>
+  );
+}
+```
+
+### 4. Deploy
+
+```bash
+git add .
+git commit -m "Add custom voice widget"
+git push origin develop
+```
+
+---
+
+## ⚙️ Configuration Options
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `businessName` | string | "SiteMente" | Name shown in chat |
+| `businessType` | string | "restaurant" | restaurant, real-estate, clinic, car-rental |
+| `theme` | string | "dark" | "dark" or "light" |
+| `apiUrl` | string | "/api/ai/voice-chat" | Custom API endpoint |
+
+---
+
+## 🌍 Language Behavior
+
+- **Default:** Spanish
+- **Switch:** After first user message, detects language and switches automatically
+- **Manual toggle:** Button in chat header
+
+---
+
+## 💰 Cost
+
+- **Input (Speech → Text):** FREE (Web Speech API)
+- **Output (Text → Speech):** FREE (Browser TTS)
+- **Brain (MiniMax):** Your existing API key (~€0.001/msg)
+
+**Total cost: Nearly zero for POCs!**
+
+---
+
+## 🔧 Customization
+
+### Change Voice
+
+In `MiniMaxVoiceWidget.tsx`, find `speak()` function:
+
+```tsx
+// Different voices available
+const voices = synthRef.current?.getVoices();
+// Spanish voices
+const spanishVoice = voices?.find(v => v.lang.includes("es"));
+utterance.voice = spanishVoice;
+```
+
+### Add More Business Types
+
+Edit `SYSTEM_PROMPT` in `route.ts` to customize responses per business type.
+
+---
+
+## 🐛 Troubleshooting
+
+### "Speech recognition not supported"
+- Use Chrome, Edge, or Safari (not Firefox)
+- HTTPS required (or localhost)
+
+### "API request failed"
+- Check MiniMax API key is valid
+- Check API endpoint is accessible
+
+### Widget not showing
+- Ensure client-side import: `"use client"`
+- Check for CSS conflicts
+
+---
+
+## 📦 Next Steps (Optional)
+
+1. **Voice cloning** - ElevenLabs ($5-15/month)
+2. **Emotions** - Custom prompts for personality
+3. **Multi-turn** - Longer conversation history
+4. **Vapi integration** - For phone calls later
+
+---
+
+**Status: Ready to test! 🚀**