Bouw je eerste persoonlijke AI-uitleg

We gaan in dit bestaande Next.js-project een kleine onderwijsapp met AI-integratie bouwen. Installeer geen nieuwe dependency als dat niet nodig is.

DOEL
De app legt het vaste onderwerp "vraag en aanbod" uit. De leerling vult alleen een hobby in. Na één klik maken twee verschillende AI-modellen via OpenRouter ieder een korte uitleg met een voorbeeld uit die hobby. De leerling vergelijkt de inhoud en de wachttijd.

GEBRUIK DEZE TWEE MODELLEN
- Model A: plak_hier_modelcode_a
- Model B: plak_hier_modelcode_b
- Gebruik deze twee volledige modelcodes rechtstreeks in de servercode voor de twee OpenRouter-aanvragen.
- Zet de modelcodes niet in .env.local. Alleen de geheime API-sleutel hoort daar te staan.

INTERFACE
- Toon bovenaan het vaste onderwerp: Vraag en aanbod.
- Toon altijd deze standaarduitleg:
  "Vraag is hoeveel mensen iets willen kopen. Aanbod is hoeveel ervan te koop is. Als veel mensen iets willen en er weinig van is, stijgt de prijs vaak. Bij veel aanbod en weinig vraag daalt de prijs vaak."
- Voeg een tekstveld toe met het label "Welke hobby past bij jou?" en de placeholder "bijv. vibe coden".
- Voeg één knop toe met de tekst "Maak twee uitleggen".
- Toon tijdens het wachten bij beide modellen een eigen laadstatus en schakel de knop tijdelijk uit.
- Toon naast de standaarduitleg twee antwoordkaarten: Model A en Model B. Zet op iedere kaart de gebruikte modelcode en de gemeten wachttijd in milliseconden.
- Noem dit "Wachttijd in deze app". Leg in kleine tekst uit dat deze tijd ook netwerk en provider bevat en dus geen zuivere snelheidstest van alleen het model is.
- Zet bij ieder AI-antwoord: "Gemaakt met AI. Controleer de uitleg."
- Laat de standaarduitleg staan als één of beide AI-aanvragen mislukken. Toon de fout per model, zodat een geslaagd antwoord wel zichtbaar blijft.

VEILIGE SERVERKOPPELING
- Maak een POST-route op /api/uitleg.
- Lees uitsluitend OPENROUTER_API_KEY op de server uit process.env.
- Stuur de API-sleutel nooit naar de browser, zet hem niet in een NEXT_PUBLIC-variabele en log hem nergens.
- Laat de browser alleen de hobby naar /api/uitleg sturen.
- Controleer op de server dat de hobby na trimmen tussen 2 en 60 tekens bevat.
- Stuur beide aanvragen met fetch naar https://openrouter.ai/api/v1/chat/completions.
- Geef beide modellen exact dezelfde opdracht: leg vraag en aanbod in maximaal vier korte zinnen uit aan een vijftienjarige, gebruik één concreet voorbeeld dat past bij de hobby en verzin geen feiten over de leerling.
- Beperk ieder antwoord tot ongeveer 180 tokens.
- Start beide modelaanvragen tegelijk. Maak voor ieder model een aparte async functie, noteer Date.now() direct voor en na de fetch en voer de twee functies parallel uit met Promise.allSettled.
- Geef per model als JSON terug: model, uitleg of fout, en durationMs. Geef nooit de API-sleutel terug.
- Eén klik veroorzaakt dus twee betaalde OpenRouter-aanvragen.

PRIVACY EN TESTEN
- Zet onder het invoerveld: "Gebruik alleen een hobby. Vul geen naam of andere persoonlijke gegevens in."
- Voeg geen database, accounts of opslag toe.
- Controleer dat de app bruikbare foutmeldingen toont als de sleutel ontbreekt, een modelcode fout is of één model niet reageert.
- Test dat beide aanvragen parallel starten en dat één mislukte aanvraag het andere antwoord niet verwijdert.

Voer daarna de bestaande lint- en buildcontrole van het project uit. Leg kort uit welke bestanden je hebt aangepast, waar ik alleen OPENROUTER_API_KEY in .env.local moet invullen en in welk serverbestand de twee modelcodes staan.