Sprachagent mit tschechischer Nummer in Ihrer Lovable-App
Lovable baut Apps auf React mit einem Supabase-Backend - Aufrufe der volai-REST-API gehören deshalb auf den Server, in eine Edge Function, nicht in die App im Browser.
1API-Schlüssel als Supabase-Secret speichern
Fügen Sie in dem Supabase-Projekt, das Lovable für Ihre App angelegt hat, die Umgebungsvariable VOLAI_API_KEY mit dem Wert Ihres Schlüssels hinzu (Portal, Bereich API und MCP). Legen Sie ihn niemals im Frontend-Code oder im Repository ab - jeder, der ihn sähe, könnte in Ihrem Namen Guthaben verbrauchen.
2volai aus einer Edge Function aufrufen
Erstellen Sie eine Edge Function, die die Anfrage aus Ihrer App entgegennimmt und erst SIE ruft https://volai.cz/v1/messages mit dem Header Authorization: Bearer ${VOLAI_API_KEY} auf. Auf dieselbe Weise lässt sich eine Funktion für POST /v1/calls bauen (Anruf über den Sprachagenten).
// supabase/functions/send-sms/index.ts
Deno.serve(async (req) => {
const { to, body } = await req.json();
const res = await fetch("https://volai.cz/v1/messages", {
method: "POST",
headers: {
Authorization: `Bearer ${Deno.env.get("VOLAI_API_KEY")}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ to, body }),
});
return new Response(await res.text(), { status: res.status });
});3Funktion aus der Benutzeroberfläche aufrufen
Rufen Sie die Edge Function aus einer Komponente der App über supabase.functions.invoke(...) auf - der Schlüssel bleibt ausschließlich auf dem Server, die App sendet nur to und den Nachrichtentext.
const { data, error } = await supabase.functions.invoke("send-sms", {
body: { to: "+420777123456", body: "Ihre Bestellung ist abholbereit." },
});4Webhook einrichten, damit die App das Ergebnis des Anrufs erfährt
Legen Sie eine zweite Edge Function an, die ein Ereignis (call.completed, call.failed, call.no_answer, call.missed, message.sent, message.received) entgegennimmt und in eine Supabase-Tabelle schreibt - von dort liest die App es über Realtime oder eine gewöhnliche Abfrage. Speichern Sie die Adresse über PUT /v1/webhook; ein leeres Feld events würde alle Ereignisse bedeuten, führen Sie die gewünschten daher lieber einzeln auf. Supabase lässt standardmäßig nur Anfragen mit einem Schlüssel im Header Authorization in eine Edge Function und antwortet sonst mit 401: Deaktivieren Sie bei dieser Funktion verify_jwt und prüfen Sie das Ereignis anhand der Signatur Volai-Signature, oder senden Sie den Schlüssel in einem eigenen Header über das Feld headers.
curl -X PUT https://volai.cz/v1/webhook \
-H "Authorization: Bearer vk_TVUJ_KLIC" \
-H "Content-Type: application/json" \
-d '{"url": "https://tvuj-projekt.supabase.co/functions/v1/volai-webhook", "events": ["call.completed", "message.sent"]}'5Optional: volai von Lovable AI selbst hinzufügen lassen
Lovable kann beim Bau der App über einen eigenen MCP-Server auch auf ein fremdes Tool zugreifen (Custom MCP servers / Custom connectors in den Integrationseinstellungen). Die Serveradresse lautet https://volai.cz/mcp, die Authentifizierung Authorization: Bearer vk_TVUJ_KLIC - die genauen Schaltflächen in der Lovable-Oberfläche ändern sich schneller als diese Seite, das aktuelle Vorgehen finden Sie unter docs.lovable.dev/integrations.
Was Sie damit tun können
Bestätigungs-SMS nach Bestellung oder Reservierung
Ein mit Lovable gebauter Onlineshop oder eine Reservierungs-App ruft nach der Zahlung eine eigene Edge Function auf, die eine Bestätigungs-SMS mit den Bestelldetails sendet.
Ein Sprachagent, der für Ihre App ans Telefon geht
Die App kauft eine Telefonnummer und legt über REST einen Agenten an (oder Sie richten ihn manuell im Portal ein) - die Kunden Ihrer App rufen dann eine echte tschechische Nummer an, keine fremde Plattform.
Lovable AI ergänzt Anrufe und SMS in der App selbst
Lassen Sie Lovable AI beim Bau der App über Custom MCP auf volai zugreifen - Sie beschreiben die Funktion mit Worten („füge eine Schaltfläche hinzu, die den Kunden anruft“), und die KI wählt das passende Tool selbst.
Häufige Fragen
- Kann ich die volai-API direkt aus dem Frontend-Code der App aufrufen?
- Nein. Ein API-Schlüssel gehört nicht in den Browser - jeder, der die Entwicklerkonsole öffnet, könnte ihn sehen und Ihr Guthaben verbrauchen. Gehen Sie immer über eine Edge Function oder eine andere Server-Route, die den Schlüssel nur im Backend hält.
- Gibt es für Lovable einen nativen volai-Konnektor?
- Noch nicht - native Konnektoren in Lovable sind immer Partnerschaften (so funktioniert zum Beispiel der für ElevenLabs). Heute führt der Weg über REST aus einer Edge Function oder über den oben beschriebenen allgemeinen Custom-MCP-Server.
- Woher weiß die App, dass ein Anruf beendet ist, ohne ständig nachzufragen?
- Sie schreiben den Webhook
call.completedüber eine Edge Function in eine Supabase-Tabelle, und die App liest die Änderung über Supabase Realtime - ganz ohne Polling. - Wie viel kostet der Betrieb der App?
- Dieselben Tarife wie in der Preisliste, kein Aufpreis für Lovable: SMS 1,36 kr (≈ 0,06 EUR), ausgehender Anruf 0,92 kr/min (≈ 0,04 EUR), Sprachagent zusätzlich 2,50 kr/min (≈ 0,10 EUR). Die genaue Preisliste finden Sie unter
/cenik.
Probieren Sie es gleich aus
Registrieren Sie sich und die ersten 50 kr gehen auf uns.