AI Gateway voor Web Apps: LLM-routing, Limieten & Credits

Een ruwe OPENAI_API_KEY in je .env-bestand plakken voelt snel aan — totdat een gelekt build-log, een gescrapete clientbundel of een ongecontroleerde fetch-lus je een nacht duizenden euro's kost. Een AI Gateway voor web-apps lost dit probleem op door als de enige intelligente tussenpersoon te fungeren tussen je applicatie en elke LLM-aanbieder die je gebruikt. Dit artikel legt precies uit hoe een gateway werkt, waarom het belangrijk is voor productie-apps en hoe je er een in een Next.js-project inplugt.

Wat is een AI Gateway en hoe werkt het? Een AI Gateway is een proxylaag — ingezet tussen je web-app en upstream LLM-API's — die authenticatie, model-routing, limieten en creditverantwoording op één plek afhandelt. Je app stuurt een verzoek naar de gateway; de gateway selecteert het juiste model, injecteert de echte API-sleutel tijdens runtime, handhaaft gebruiksbeleid en stuurt de aanroep door. Je code ziet de ruwe sleutel nooit.

Wat Is een AI Gateway en Waarom Creëren Ruwe API-sleutels Risico's?

Wanneer je API-sleutels direct in applicatiecode insluit, ontstaan er meerdere samengestelde problemen:

1. Blootstelling van broncode — Sleutels die aan een repository zijn toegewezen (zelfs een privérepository) zijn één verkeerd geconfigureerde machtiging verwijderd van openbaar worden.
2. Lekkage via build-logs — Veel CI/CD-systemen printen omgevingsvariabelen in uitgebreide modus; een sleutel die in een log verschijnt is feitelijk gecompromitteerd.
3. Lekkage via clientbundel — In frameworks zoals Next.js wordt een variabele met het voorvoegsel NEXT_PUBLIC_ of die per ongeluk in een clientcomponent is geïmporteerd naar elke browser verzonden.
4. Geen centrale intrekking — Als een sleutel in vijf diensten is ingebed, betekent intrekking dat alle vijf tegelijkertijd worden bijgewerkt.

Een AI Gateway verkleint alle vier de problemen tot één: je app authenticeert bij de gateway, en de gateway authenticeert bij OpenAI, Anthropic, Google of welke aanbieder je ook nodig hebt. Draai een sleutel op één plek; elke downstream-dienst blijft werken.

"De gateway is de enige bron van waarheid voor elke LLM-credential in je stack. Trek in, roteer of wissel een model zonder de applicatiecode aan te raken."

Hoe Werkt Model-routing in een AI Gateway?

Model-routing is het vermogen van de gateway om te kiezen welke LLM voor een bepaald verzoek wordt gebruikt, op basis van door jou gedefinieerde regels. Veelgebruikte routingstrategieën zijn:

• Kostenrouting — Stuur korte, laagrisico-prompts naar een goedkoper model (bijv. GPT-4o mini) en reserveer dure modellen (GPT-4o, Claude 3.5 Sonnet) voor complexe redeneertaken.
• Latentierouting — Als een gebruiker wacht op een realtime-reactie, kan de gateway het snelste beschikbare model prefereren en terugvallen op een langzamere maar rijkere optie als de latentiedoelstellingen zijn bereikt.
• Taaktype-routing — Tag verzoeken op intentie (summarize, code, classify) en wijs elke tag toe aan het model met de beste benchmarkprestaties voor die taak.
• Terugvalrouting — Als de primaire aanbieder een 429 of 5xx teruggeeft, probeert de gateway automatisch opnieuw via een alternatieve aanbieder zonder dat je app-code die logica hoeft af te handelen.

Waarom Dit Belangrijk Is voor Multi-aanbiederstrategieën

Het LLM-landschap verandert snel. Een model dat vandaag de codegeneratiebenchmarks aanvoert, kan over drie maanden worden overtroffen. Met routing gecentraliseerd in een gateway wissel je de modeltoewijzing in één configuratie; je applicatie-endpoints blijven identiek. Volgens de modeldocumentatie van Anthropic kunnen nieuwere modelversies, zelfs binnen de lineup van één aanbieder, een 2–3× betere prijs-prestatieverhouding bieden — een gateway laat je upgrades onmiddellijk overnemen.

Wat Zijn de Voordelen van een AI Gateway voor Webapplicaties?

De voordelen stapelen zich op over beveiliging, kosten en ontwikkelsnelheid:

1. Gecentraliseerd sleutelbeheer — Eén versleutelde opslag voor alle LLM-credentials; geen sleutel raakt ooit de code of build-artefacten van je app.
2. Voorspelbare kosten — Per-gebruiker of per-endpoint tokenbudgetten voorkomen dat één misbehavende gebruiker je maandelijkse quotum leegtrekt.
3. Aanbiederonafhankelijkheid — Schakel van OpenAI naar Anthropic (of gebruik beide) zonder een codewijziging in je app.
4. Audit en observability — Elk verzoek via de gateway is logbaar; je krijgt tokentellingen, latentie, gebruikt model en foutpercentages op één plek.
5. Vereenvoudigde compliance — Voor apps in gereguleerde sectoren is het hebben van credentials in een geïsoleerde, versleutelde gatewaylaag veel gemakkelijker te auditen dan verspreid liggende .env-bestanden.

Hoe Verschilt een AI Gateway van een Traditionele API Gateway?

Functie	Traditionele API Gateway	AI Gateway
Primaire zorg	HTTP-routing, authenticatie, throttling	Al het bovenstaande + LLM-specifieke semantiek
Credentialbeheer	API-sleutels voor je eigen diensten	Beheert upstream LLM-aanbiedersleutels
Routinglogica	URL/methode-gebaseerd	Modelselectie op kosten, latentie, taaktype
Kostenbeheersing	Limieten op verzoekenaantal	Tokenbudgetlimieten per gebruiker/sessie
Streamingondersteuning	Gedeeltelijk	Eersteklas SSE / chunked streaming
Terugvalverwerking	Generieke herpoging	Aanbieder-bewuste modelterugval

Een traditionele API gateway (zoals AWS API Gateway of Kong) is uitstekend voor het routeren van HTTP-verkeer naar je eigen microservices. Een AI gateway breidt dat concept uit met LLM-native primitieven: tokentellingen, streaming pass-through, modelaliasen en creditledgers. Je hebt in een productiestapel vaak beide nodig, maar ze lossen verschillende problemen op.

"Tokenbudgetten zijn niet hetzelfde als limieten op verzoekfrequentie. Een AI Gateway handhaaft beide onafhankelijk — een gebruiker kan weinig verzoeken doen die elk enorme context verbruiken, of het endpoint overspoelen met kleine verzoekjes."

Limietbeheer en Creditbeheer: Bescherming tegen Ongecontroleerde Kosten

Ongecontroleerd LLM-gebruik is een van de snelste manieren om een schokkende cloudrekening te ontvangen. Een goed geconfigureerde AI Gateway dwingt meerdere beschermingslagen af:

• Per-gebruiker tokenbudgetten — Elke geauthenticeerde gebruiker krijgt een creditstoewijzing; verzoeken die hun budget overschrijden worden geweigerd met een duidelijke foutmelding, niet stilletjes in rekening gebracht.
• Per-endpoint limieten — Een /api/chat-route kan worden begrensd op, zeg, 20 verzoeken per minuut per IP, onafhankelijk van tokenvolume.
• Globaal bestedingsplafond — Een harde bovengrens voor de totale uitgaven per factureringsperiode; de gateway geeft een 503 terug zodra het plafond is bereikt in plaats van kosten te laten oplopen.
• Modelkostweging — De gateway begrijpt dat één GPT-4o-aanroep ~15× een GPT-4o mini-aanroep kost en trekt credits proportioneel af, niet alleen op basis van het aantal verzoeken.

Best Practices voor Sleutelbeheer: Sleutels Altijd Buiten de Code

Het industriestandaard patroon voor geheimen in LLM-aangedreven apps:

1. Sla geheimen op in een versleutelde kluis — Gebruik een secrets manager (AWS KMS, HashiCorp Vault of een platformeigen equivalent) waarbij waarden versleuteld worden opgeslagen en toegang wordt beheerd via IAM-beleid.
2. Injecteer tijdens runtime, niet tijdens build — Geheimen moeten worden opgelost wanneer de Lambda of container start, niet worden ingebakken in de Docker-image of de Next.js-builduitvoer.
3. Log nooit geheime waarden — Zorg dat je gateway- en app-logboekpipelines elke header redigeren die een bearertoken kan bevatten.
4. Roteer zonder downtime — Met een goede kluis- en gateway-inrichting kun je een sleutel roteren door één vermelding bij te werken; de gateway pikt de nieuwe waarde op bij de volgende credentialvernieuwingscyclus zonder je app opnieuw te deployen.

Hoe Integreer Ik een AI Gateway in Mijn Bestaande Web-app?

Hier is een praktische walkthrough voor een Next.js-app:

Stap 1 — Definieer een server-side API-route

Maak app/api/chat/route.ts. Deze route ontvangt de prompt van de gebruiker vanuit de browser en stuurt deze door naar je gateway-endpoint — nooit rechtstreeks naar OpenAI.

// app/api/chat/route.ts
export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await fetch(process.env.AI_GATEWAY_URL + "/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.AI_GATEWAY_TOKEN}`,
    },
    body: JSON.stringify({ model: "auto", messages }),
  });

  // Stream het antwoord terug naar de browser
  return new Response(response.body, {
    headers: { "Content-Type": "text/event-stream" },
  });
}

Let op: AI_GATEWAY_TOKEN is een kortlevend token dat je app authenticeert bij de gateway — geen OpenAI-sleutel. De OpenAI-sleutel leeft alleen binnen de gateway.

Stap 2 — Sla gateway-credentials veilig op

AI_GATEWAY_URL en AI_GATEWAY_TOKEN gaan in je secrets store, niet in je .env.local (die per ongeluk kan worden gecommit) en absoluut niet in NEXT_PUBLIC_-variabelen. Deze waarden worden tijdens runtime in de Lambda/containeromgeving geïnjecteerd.

Stap 3 — Stel routing- en budgetregels in de gatewayconfiguratie in

Definieer in je gateway-dashboard een routingregel:

• Verzoeken getagd met model: "auto" → routeer standaard naar GPT-4o mini; escaleer naar GPT-4o als de prompt meer dan 2.000 tokens bevat.
• Per-geauthenticeerde-gebruiker budget: 50.000 tokens/dag.
• Terugval: als OpenAI 429 teruggeeft, probeer één keer opnieuw via Claude 3.5 Haiku.

Stap 4 — Controleer of er geen sleutels in de builduitvoer staan

Voer next build uit en doorzoek de .next-map op strings die overeenkomen met het voorvoegselpatroon van je upstream-sleutels. Er mogen nul resultaten zijn — omdat ze nooit in je Next.js-buildpipeline zijn binnengekomen.

Praktijkscenario's Die Profiteren van Gecentraliseerde Model-routing

• AI-chatbots — Routeer alledaagse gesprekken naar een snel, goedkoop model en geef het over aan een redeneermodel wanneer de gebruiker een complexe meerstappenvraag stelt.
• Contentgeneratoren — Een blogartikelgereedschap kan kopregelgeneratie (snel, weinig tokens) apart routeren van de generatie van volledige artikelen (veel tokens, kwaliteitskritisch).
• Slimme formulierassistenten — Een autofill-assistent die bij elke toetsaanslag een LLM aanroept, heeft agressieve limieten nodig; de gateway handhaaft die zonder codewijzigingen in de app-laag.
• Multi-tenant SaaS — Verschillende abonnementsniveaus krijgen verschillende credittowijzingen afgedwongen op de gateway, zodat je applicatielaag niveauagnostisch blijft.

Welke AI Gateways Zijn het Beste voor Web-appontwikkeling?

De juiste keuze hangt af van je stack en controlevoorkeur. Opvallende opties zijn:

Gateway	Het beste voor	Kenmerkende eigenschap
Portkey	Productie-SaaS	Observability, terugvallen, caching
LiteLLM	Zelf gehost / OSS	Brede aanbiedersondersteuning, lokale deploy
OpenRouter	Multi-model routing	Eén API, vele aanbieders
Ingebouwde platformgateway	Startups zonder configuratie	Nul overhead voor credentialbeheer

Als je bouwt op FloopFloop, bevat het platform een ingebouwde AI Gateway die model-routing, limieten en creditbeheer automatisch afhandelt. Je gegenereerde Next.js-app roept de gateway aan via een beheerd endpoint — geen API-sleutelconfiguratie vereist van jouw kant, en er verschijnen nooit sleutels in gegenereerde code of build-logs.

Afronden

Een AI Gateway voor web-apps is geen optionele toevoeging voor grote teams — het is de fundamentele beveiligings- en kostenbeheerslaag die elke LLM-aangedreven app nodig heeft voordat echte gebruikers er gebruik van maken. Door credentials te centraliseren, per-gebruiker tokenbudgetten af te dwingen en modelselectie te abstraheren achter een routinglaag, krijg je een systeem dat tegelijkertijd veiliger, goedkoper te draaien en eenvoudiger te evolueren is naarmate het modellandschap verandert. Begin met de vierstappenintegratie hierboven, vergrendel je sleutelbeheer en laat de gateway het operationele gewicht van multi-aanbieder LLM-beheer dragen.