Een spraakagent met Tsjechisch nummer in uw Lovable-app
Lovable bouwt apps op React met een Supabase-backend - aanroepen van de volai REST API horen daarom op de server thuis, in een Edge Function, niet in de app in de browser.
1Sla de API-sleutel op als Supabase-secret
Voeg in het Supabase-project dat Lovable voor uw app heeft aangemaakt de omgevingsvariabele VOLAI_API_KEY toe met de waarde van uw sleutel (portaal, sectie API en MCP). Zet hem nooit in frontendcode of in een repository - iedereen die hem zou zien, kan namens u tegoed verbruiken.
2Roep volai aan vanuit een Edge Function
Maak een Edge Function die het verzoek uit uw app ontvangt en pas DIE https://volai.cz/v1/messages aanroept met de header Authorization: Bearer ${VOLAI_API_KEY}. Op dezelfde manier bouwt u een functie voor POST /v1/calls (een gesprek via de spraakagent).
// 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 });
});3Roep de functie aan vanuit de gebruikersinterface
Roep de Edge Function vanuit een component van de app aan via supabase.functions.invoke(...) - de sleutel blijft uitsluitend op de server, de app verstuurt alleen to en de tekst van het bericht.
const { data, error } = await supabase.functions.invoke("send-sms", {
body: { to: "+420777123456", body: "Uw bestelling ligt klaar om opgehaald te worden." },
});4Stel een webhook in, zodat de app het resultaat van het gesprek te weten komt
Maak een tweede Edge Function die een gebeurtenis (call.completed, call.failed, call.no_answer, call.missed, message.sent, message.received) ontvangt en naar een Supabase-tabel schrijft - de app leest die terug via Realtime of een gewone query. Sla het adres op via PUT /v1/webhook; een leeg veld events zou alle gebeurtenissen betekenen, som de gewenste daarom liever afzonderlijk op. Supabase laat standaard alleen verzoeken met een sleutel in de header Authorization door naar een Edge Function en antwoordt anders met 401: schakel bij deze functie verify_jwt uit en controleer de gebeurtenis aan de hand van de handtekening Volai-Signature, of verstuur de sleutel in een eigen header via het veld 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"]}'5Optioneel: laat Lovable AI volai zelf toevoegen
Lovable kan tijdens het bouwen van de app via een eigen MCP-integratie ook een extern hulpmiddel gebruiken (Custom MCP servers / Custom connectors in de integratie-instellingen). Het serveradres is https://volai.cz/mcp, de authenticatie Authorization: Bearer vk_TVUJ_KLIC - de exacte knoppen in de interface van Lovable veranderen sneller dan deze pagina kan bijhouden, de actuele stappen vindt u op docs.lovable.dev/integrations.
Wat u ermee doet
Bevestigings-sms na een bestelling of reservering
Een met Lovable gebouwde webshop of reserveringsapp roept na de betaling een eigen Edge Function aan, die een bevestigings-sms met de details van de bestelling verstuurt.
Een spraakagent die de telefoon opneemt voor uw app
De app koopt een telefoonnummer en maakt via REST een agent aan (of u richt die handmatig in het portaal in) - de klanten van uw app bellen dan een echt Tsjechisch nummer, geen platform van een derde partij.
Lovable AI voegt gesprekken en sms toe aan de app zelf
Laat Lovable AI bij het bouwen van de app via Custom MCP bij volai komen - u beschrijft de functie in gewone woorden („voeg een knop toe die de klant belt”) en de AI kiest zelf het passende hulpmiddel.
Veelgestelde vragen
- Kan ik de volai API rechtstreeks vanuit de frontendcode van de app aanroepen?
- Nee. Een API-sleutel hoort niet in de browser - iedereen die de ontwikkelaarsconsole opent, kan hem zien en uw tegoed verbruiken. Ga altijd via een Edge Function of een andere serverroute die de sleutel alleen in de backend bewaart.
- Is er een native volai-connector voor Lovable?
- Nog niet - native connectors in Lovable zijn altijd partnerschappen (zo werkt bijvoorbeeld die voor ElevenLabs). Vandaag loopt de route via REST vanuit een Edge Function of via de hierboven beschreven algemene Custom MCP-server.
- Hoe weet de app dat een gesprek is afgelopen, zonder voortdurend te vragen?
- U schrijft de webhook
call.completedvia een Edge Function naar een Supabase-tabel en de app leest de wijziging via Supabase Realtime - helemaal zonder polling. - Wat kost het om de app te laten draaien?
- Dezelfde tarieven als in de prijslijst, geen toeslag voor Lovable: sms 1,36 kr (≈ 0,06 EUR), uitgaand gesprek 0,92 kr/min (≈ 0,04 EUR), spraakagent extra 2,50 kr/min (≈ 0,10 EUR). De exacte prijslijst vindt u op
/cenik.
Probeer het meteen
Registreer u en de eerste 50 kr is voor onze rekening.