De OpenAI API in je app integreren
Om de OpenAI API te integreren, maak je een API-sleutel aan in een OpenAI-project, bewaar je die als geheim op de server genaamd OPENAI_API_KEY, en roep je de API aan vanaf een route op je eigen server met de officiële SDK van OpenAI, nooit vanuit browsercode. Vanaf september 2026 presenteert de quickstart van OpenAI de Responses API als startpunt voor nieuwe projecten. Stel vóór de lancering een uitgavenlimiet in, beperk de lengte van antwoorden, begrens hoe vaak elke gebruiker de functie kan aanroepen, en vang rate-limitfouten op met nieuwe pogingen.
Deze gids behandelt de installatie, de aanvraagstroom, prompts voor een AI-builder en de fouten die sleutels lekken of geld laten verdwijnen. De details van OpenAI komen uit de officiële documentatie per september 2026. Lees voor de algemene concepten (tokens, contextvensters, prijzen) eerst hoe je LLM-API's gebruikt.
Wat je ermee kunt bouwen
- Een chatassistent in je app (hoe je een AI-chatbotapp bouwt)
- Knoppen voor "Samenvatten", "herschrijf dit" of "concept voor antwoord"
- Gestructureerde gegevens halen uit vrije tekst: een e-mail omzetten naar een bestelling, supporttickets taggen
- Zoeken en vragen beantwoorden over je eigen content
- Afbeeldingen genereren, spraak en andere mediafuncties, afhankelijk van de beschikbare modellen
Meer ideeën staan in hoe je AI-functies aan je app toevoegt.
Je OpenAI-account instellen
- Maak een account en een project aan op het OpenAI-platform. De productiebest practices van OpenAI raden aparte projecten voor staging en productie aan, zodat elk zijn eigen sleutels en limieten kan hebben.
- Maak een projectsleutel aan. OpenAI raadt aan een vervaldatum in te stellen en sleutels regelmatig te vervangen.
- Stel uitgavenwaarschuwingen en een harde uitgavenlimiet in op de limietenpagina. De gids van OpenAI zegt dat waarschuwingen je melden wanneer het gebruik een bedrag overschrijdt, en een harde limiet een maandelijks plafond afdwingt.
- Voeg facturering toe. De documentatie over rate limits van OpenAI beschrijft gebruiksniveaus: je limieten stijgen automatisch naarmate je over tijd meer uitgeeft.
De aanvraagstroom
Browser -> jouw serverroute -> OpenAI API
<- (gestreamd) antwoord <-
- De gebruiker klikt op een knop of stuurt een bericht.
- De browser roept jouw route aan, bijvoorbeeld
POST /api/summarise. - Je server controleert of de gebruiker is ingelogd en mag gebruiken.
- De server bouwt het verzoek: instructies, de invoer van de gebruiker en eventuele gegevens uit je database die de taak nodig heeft.
- Het roept OpenAI aan met de sleutel uit de omgeving. De SDK's van OpenAI lezen
OPENAI_API_KEYautomatisch. - Het streamt of retourneert het antwoord en logt het tokenverbruik.
De officiële SDK-pakketten van OpenAI heten openai, voor zowel JavaScript/TypeScript (npm) als Python (pip).
Een model kiezen
OpenAI biedt verschillende modellen met verschillende prijzen en snelheden, en het aanbod verandert vaak. Begin met een kleiner, goedkoper model, meet de kwaliteit op echte voorbeelden, en ga alleen omhoog als je dat nodig hebt. Bewaar de modelnaam in een configuratiewaarde of geheim, zodat je hem kunt wijzigen zonder de code te herschrijven. Bekijk de prijspagina van OpenAI voor de actuele tarieven.
Opties en afwegingen
| Beslissing | Eenvoudige keuze | Wanneer verder gaan |
|---|---|---|
| Streaming | Het volledige antwoord teruggeven | Streamen voor chat en lange antwoorden; gebruikers zien direct tekst |
| Gespreksgeheugen | Elke keer recente berichten meesturen | Oudere berichten samenvatten wanneer chats lang worden |
| Uitvoerformaat | Platte tekst | Gestructureerde JSON vragen wanneer je code velden moet lezen |
| Je eigen data | Het relevante record in het verzoek opnemen | Zoeken over je content toevoegen wanneer er te veel is om mee te sturen (zie wat RAG is) |
| Bulkwerk dat niet dringend is | Loopen over items | De batchoptie van OpenAI gebruiken voor lagere kosten wanneer resultaten kunnen wachten |
Prompts voor je AI-builder
Een eerste functie:
Voeg een knop "Samenvatten" toe op de ticketpagina. Die roept een serverroute POST /api/summarise aan die controleert of de gebruiker is ingelogd, het ticket laadt en de OpenAI Responses API aanroept met de officiële openai SDK en het geheim OPENAI_API_KEY. Lees de modelnaam uit het geheim OPENAI_MODEL. Instructies: "Vat samen in 3 opsommingstekens en stel daarna een kort antwoord voor. Verzin geen ordernummers." Beperk de lengte van de uitvoer, stream het antwoord naar de pagina en stuur de sleutel nooit naar de browser.
Waarborgen:
Beperk elke gebruiker tot 30 AI-verzoeken per uur, opgeslagen in de database. Log per verzoek de input- en outputtokens met de gebruikers-ID en functienaam. Als OpenAI 429 teruggeeft, respecteer de Retry-After header en probeer opnieuw met exponentieel oplopende wachttijden en jitter, tot 3 keer; toon daarna "De AI is bezet, probeer het over een minuut opnieuw." Toon een vriendelijke foutmelding bij elke andere fout en houd de rest van de pagina werkend.
Fouten en limieten afhandelen
OpenAI meet rate limits op verschillende manieren, waaronder verzoeken per minuut en tokens per minuut, en je raakt degene die het eerst op is. Wanneer je er een overschrijdt, retourneert de API een 429 met een Retry-After header. De documentatie van OpenAI zegt dat je die waarde als minimum moet zien en een kleine willekeurige vertraging moet toevoegen, zodat clients niet allemaal tegelijk opnieuw proberen.
Houd daarnaast rekening met:
- Timeouts bij lange generaties. Streaming helpt, en een verstandige limiet op de uitvoer ook.
- Storingen bij de provider. De AI-functie moet netjes falen zonder de pagina te breken.
- Slechte uitvoer. Valideer gestructureerde uitvoer voordat je die opslaat, en laat modeluitvoer nooit gevoelige acties starten zonder een controle in je code.
Veelgemaakte fouten
- Sleutel in de frontend of in de repository. Browsercode is openbaar, en een gelekte sleutel kan binnen minuten worden misbruikt. Zie hoe je API-sleutels veilig houdt.
- Geen uitgavenlimiet. Een lus of een misbruikende gebruiker kan snel een grote rekening veroorzaken.
- Geen limieten per gebruiker. De limiet van je provider beschermt je portemonnee, niet je andere gebruikers.
- De prompt vertrouwen voor beveiliging. Gebruikers kunnen "negeer eerdere instructies" typen. Rechten horen in servercode.
- Meer sturen dan nodig. Hele documenten en lange geschiedenissen vermenigvuldigen de kosten. Stuur wat de taak nodig heeft.
- De modelnaam hardcoden. Modellen worden bijgewerkt en uitgefaseerd; maak het een instelling.
- Persoonsgegevens meesturen zonder na te denken. Lees de gebruiksvoorwaarden voor data van OpenAI en stuur alleen wat de functie nodig heeft.
Checklist
- Aparte OpenAI-projecten (of sleutels) voor testen en productie
- Sleutel opgeslagen als geheim op de server, nooit in browsercode of de repo
- Uitgavenwaarschuwingen en een harde uitgavenlimiet ingesteld
- Alle aanroepen gaan via je server en controleren de rechten van de gebruiker
- Lengte van de uitvoer begrensd; modelnaam configureerbaar
- Limiet per gebruiker in je app
- 429-afhandeling met Retry-After, backoff en jitter
- Vriendelijke foutstatus; de pagina werkt zonder de AI
- Tokenverbruik gelogd per functie
- Getest met lange, lege en vijandige invoer
De OpenAI API gebruiken in Mythex
AI-functies in apps die je op Mythex bouwt, gebruiken je eigen OpenAI-sleutel, gefactureerd op je OpenAI-account en niet op Mythex-buildcredits. Voeg OPENAI_API_KEY toe als projectgeheim via /secrets, de projectinstellingen of de geheimenkaart die de agent toont wanneer hij een sleutel nodig heeft, en beschrijf de functie daarna met een prompt zoals hierboven. Publiceer opnieuw na het wijzigen van geheimen op een gepubliceerde app, zodat die ze oppikt. Het documentatierecept AI-functies toevoegen met je eigen API-sleutels heeft een startprompt, en Geheimen in de chat legt de geheimenkaart uit. Providers vergelijken? Zie hoe je de Claude API integreert.
Veelgestelde vragen
Welke OpenAI API moet ik gebruiken voor een nieuwe app?
Vanaf september 2026 presenteert de quickstart van OpenAI de Responses API als startpunt voor nieuwe projecten, met voorbeelden die client.responses.create() gebruiken in de officiële SDK's. Controleer de documentatie van OpenAI voor de actuele aanbeveling voordat je begint.
Kan ik de OpenAI API vanuit de browser aanroepen?
Niet met je geheime sleutel. Iedereen kan browsercode lezen en de sleutel hergebruiken om je rekening op te laten lopen. De browser moet je eigen serverroute aanroepen, en je server roept OpenAI aan met de sleutel die als omgevingsvariabele is opgeslagen.
Hoe voorkom ik dat de OpenAI API te veel kost?
De productiegids van OpenAI raadt uitgavenwaarschuwingen en een harde maandelijkse uitgavenlimiet aan op de limietenpagina. Beperk in je app de lengte van antwoorden, limiteer het aantal verzoeken per gebruiker en log het tokenverbruik, zodat je ziet welke functies het duurst zijn.
Wat betekent een 429-fout van OpenAI?
Het betekent dat je een rate limit hebt bereikt. De documentatie over rate limits van OpenAI zegt dat het antwoord een Retry-After header bevat; wacht minstens zo lang, voeg een kleine willekeurige vertraging toe en probeer het opnieuw met exponentieel oplopende wachttijden.