Alle artikelen
Tutorial7 min leestijd · 8 juli 2026

Je eerste edge function in Lovable Cloud — zonder pijn

Edge functions klinken enger dan ze zijn. In tien minuten heb je er één draaien die iets nuttigs doet, inclusief error handling en veilige API-keys.

Maarten Vermeulen

Bijdrager · lvbl.nl

Je eerste edge function in Lovable Cloud — zonder pijn
Foto: Taylor Vick / Unsplash
Voor deze tutorial bouwen we een edge function die één ding doet: een AI-call maken via de Lovable AI Gateway en het resultaat teruggeven, met de API-key veilig aan de serverkant. Klein, maar het patroon dekt 80% van waar edge functions voor gebruikt worden.

Waarom edge en niet gewoon client-side? Simpel: als je API-key in de browser staat, kan iedereen 'm zien via de developer tools. Edge functions draaien serverside met environment variables die de client nooit ziet. Dat is de reden dat elk serieus product z'n externe API-calls via een backend routeert, en niet direct vanuit de React-component.

Stap één: de function aanmaken

In een TanStack Start Lovable-project maak je een server function met `createServerFn` uit `@tanstack/react-start`. Vraag Lovable: "Maak een server function 'summarize' die een tekst ontvangt, deze naar Google Gemini via de AI Gateway stuurt, en de samenvatting teruggeeft." De agent zet het bestand op in `src/lib/summarize.functions.ts`, inclusief input-validatie met Zod.

Stap twee: de AI-key

Lovable's AI Gateway is standaard beschikbaar in elke Cloud-project — je hoeft geen eigen API-key toe te voegen. De env-variabele `LOVABLE_API_KEY` staat er automatisch. Voor externe providers (OpenAI direct, Anthropic direct) voeg je de key toe via de secrets-manager, nooit in code.

Stap drie: aanroepen vanuit de UI

In je component gebruik je `useServerFn(summarize)` en roept 'm aan met de input. TanStack Query erbij voor loading- en errorstates. Vijf regels, klaar. De agent kan die glue-code in één prompt genereren.

Stap vier: error handling

Het onderdeel dat mensen vaak vergeten. Wat als de AI-gateway een 429 (rate limit) teruggeeft? Wat als de input te lang is? Wat als de netwerkverbinding wegvalt? Vraag Lovable expliciet: "voeg try/catch toe en geef betekenisvolle foutmeldingen terug". De gateway geeft nette status-codes; jij vertaalt ze naar Nederlandse tekst voor de gebruiker.

Stap vijf: rate-limiting

Standaard heeft Cloud geen ingebouwde rate-limits per gebruiker. Als je een publieke endpoint bouwt (bijv. een demo), voeg je zelf een simpele limiter toe — bijvoorbeeld met een tabel `rate_limits` waar je per user_id of IP-adres de laatste calls telt. Voor een intern MVP kun je dit overslaan.

Aan het einde heb je een minipatroon dat je in élk project hergebruikt. Dezelfde structuur past voor: OCR op geüploade documenten, embeddings genereren, Stripe-calls doen die niet via de connector gaan, of een cron-job die dagelijks je database opschoont. Edge functions zijn het lijmwerk van serieuze apps.

Vond je dit fijn?

Geef een hartje en deel het met een andere Lovable-fan.

Ook interessant

Alle artikelen