🧩 Stack Complète Idéale – AlloKoli (Backend + Frontend)
🧠 1. Intelligence vocale (noyau)
| Composant | Technologie | Rôle |
| ----- | ----- | ----- |
| Voice Intelligence | Vapi.ai | Orchestration ASR → NLP → TTS, appels WebRTC et téléphoniques |
| SDK Server | @vapi-ai/server-sdk | Pour créer assistants, appels, numéros, récupérer l’historique |
| SDK Web | @vapi-ai/web | Pour lancer un appel vocal directement depuis le navigateur |
| Protocol | MCP (Model Context Protocol) | Protocole d’interaction en temps réel entre Vapi et ton serveur |
⚙️ 2. Backend (léger, sécurisé, orchestrateur)
| Composant | Technologie / Outil | Rôle principal |
| ----- | ----- | ----- |
| Fonctions Serveur | Supabase Edge Functions (TS/Deno) | createAssistant, startCall, vapiWebhook, getCalls, etc. |
| Base de données | Supabase PostgreSQL | Stockage des appels, assistants, utilisateurs |
| Authentification | Supabase Auth | Email/password + RLS (filtrage automatique par utilisateur) |
| Webhook handling | vapiWebhook.ts (Edge Function) | Réception des événements Vapi : call-start, call-end, etc. |
| CLI & déploiement | Supabase CLI | Déploiement des fonctions et migrations DB |
🔐 Variables d’environnement (.env) :
env
CopierModifier
VAPI_API_KEY=sk-...
SUPABASE_SERVICE_ROLE_KEY=...
SUPABASE_URL=https://yourproject.supabase.co
🌐 3. Frontend (no-code-friendly, interactif, responsive)
| Composant | Technologie | Rôle |
| ----- | ----- | ----- |
| Framework UI | React ou Next.js | App dynamique, pages multi-étapes, SEO possible |
| Design system | Tailwind CSS | Design rapide, responsive et moderne |
| Animations | Framer Motion | Transitions douces, interactions fluides |
| Appel vocal Web | @vapi-ai/web | Lance des appels vocaux WebRTC à un assistant Vapi |
| Connexion Supabase | @supabase/supabase-js | Auth, fetch, Realtime pour dashboard |
| State Management | React Context / Zustand / TanStack | Pour gérer les sessions, assistants, appels |
Pages clés :
-
/login→ Connexion / inscription Supabase -
/dashboard→ Liste d’assistants + bouton “créer” -
/assistant/[id]→ Test vocal WebRTC + historique d’appels + configuration -
/settings→ Clés, préférences, quotas
☁️ 4. Hébergement & CI/CD
| Élément | Technologie | Description |
| ----- | ----- | ----- |
| Backend Edge Functions | Supabase Hosting | Serverless, déploiement via supabase functions deploy |
| Frontend | Vercel (Next.js) ou Netlify | Déploiement continu (push = build), prévisualisations intégrées |
| Domaines | Cloudflare / Vercel DNS | Pour app.allokoli.com, api.allokoli.com |
| Monitoring | Supabase Logs + Vapi Dashboard | Traces d’appels, erreurs fonctions, stats assistants |
🧱 Arborescence projet typique
bash
CopierModifier
/allo-koli
├── /frontend (Next.js + Tailwind + Vapi Web SDK)
│ ├── /pages
│ ├── /components
│ └── /utils
├── /backend (Supabase Edge Functions + SDK Server)
│ ├── /functions
│ │ ├── createAssistant.ts
│ │ ├── startCall.ts
│ │ ├── getCalls.ts
│ │ └── vapiWebhook.ts
│ ├── /migrations
│ └── supabase.config.json
├── .env.local
├── supabase/.env
└── README.md
📌 Pourquoi cette stack est idéale :
| Avantage | Détails | | ----- | ----- | | 🔐 Sécurisée | Clés privées côté serveur uniquement, isolation des appels par RLS | | ⚡️ Légère | 100% serverless, aucun serveur à gérer ni modèle IA à héberger | | 🧠 Intelligente | Vapi gère tout le flux vocal IA, tu n’as que l’orchestration à coder | | 🛠️ Modulaire | Facile à découper par micro-fonctions (API, dashboard, appels) | | 🚀 Prête pour scale | Supabase et Vapi scalent automatiquement selon l’usage | | 💻 Compatible no-code | Le frontend peut être exposé dans Webflow, WeWeb, ou intégré à Make.com |