Bouwen met Gemini 3.1 Pro: De ultieme tutorial voor coding agents

Gemini 3.1 Pro is Google’s meest geavanceerde foundation model voor redeneren, coderen en multimodale interpretatie. Het bouwt voort op de Gemini 3-serie met sterkere prestaties op lange contexten, verbeterd toolgebruik en betrouwbaardere stapsgewijze redenering. 

Op grote benchmarks voor coderen en redeneren behoort het steevast tot de topmodellen. Daardoor is het vandaag een van de sterkste keuzes voor serieuze softwareontwikkeling en agentic workflows.

In deze ultieme gids laat ik je de beste manier zien om Gemini 3.1 Pro te gebruiken voor agentic coding. Je leert hoe je de nieuwe Gemini CLI installeert en configureert, extensies instelt, custom skills maakt en een app met de naam Tinder for Geeks vibe-coded. Ik laat ook zien hoe je een persistente context aanmaakt, het geheugen aanpast, betrouwbaarheid en guardrails toevoegt, je app lokaal test en deze naar de cloud deployt.

Ik raad ook aan onze gids te bekijken over Google’s nieuwste beeldgeneratiemodel, Nano Banana 2.

De Gemini 3.1 Pro Agentic Stack

Er zijn vier hoofdmanieren om Gemini 3.1 Pro te gebruiken voor agentic coding. De juiste keuze hangt af van je ervaring en hoeveel controle je wilt over je techstack en workflow.

1. Google AI Studio Build: Een browsergebaseerde begeleide builder om snel te prototypen en te vibe-coden met Gemini 3.1 Pro.
2. Gemini Code Assist voor VS Code: Een AI-codeerassistent in de editor die agent-achtige workflows rechtstreeks naar je IDE brengt.
3. Google Antigravity: Een volledige AI-native ontwikkelomgeving ontworpen voor end-to-end, autonoom agent-gedreven coderen.
4. Gemini CLI: Een krachtige, terminalgebaseerde agent die je volledige controle geeft over context, geheugen, custom skills en workflows.

1. Google AI Studio Build

Build-modus in Google AI Studio is de snelste instap voor beginners en niet-specialisten. Je kunt full‑stack apps “vibe-coden” met natuurlijke taal, met ondersteuning voor full‑stack runtimes, server-side logica, secrets management en npm‑packages. Ideaal om snel in de browser te prototypen voordat je je vastlegt op een volledige lokale dev-setup.

2. VSCode-extensies

Als je je thuis voelt in VS Code, dan biedt Gemini Code Assist je een agentmodus die code kan genereren, vragen kan beantwoorden en IDE‑context kan gebruiken zoals open bestanden en speciale contextbestanden. 

Wil je een flexibeler multi‑model‑setup, dan kunnen tools zoals Kilo Code binnen VS Code draaien en je laten routeren naar modellen, waaronder Gemini 3.1 Pro, om vervolgens in je editor te itereren met agent‑achtige workflows.

3. Google Antigravity

Antigravity is Google’s agent-first ontwikkelplatform dat een vertrouwde IDE‑ervaring combineert met een “mission control”-achtige manager voor het coördineren van autonome agents. Het is ontworpen voor end‑to‑end taken waarbij de agent plant, codeert, checks draait en verifieerbare artefacten oplevert die je kunt reviewen. 

Kies dit wanneer je een volledig geïntegreerde IDE wilt die om agents heen gebouwd is, in plaats van een chatpaneel dat op je editor is vastgeschroefd.

4. Gemini CLI

Gemini CLI brengt Gemini direct naar je terminal als een open‑source agent, zodat je aan echte repo’s kunt werken, bestanden kunt bewerken, workflows kunt automatiseren en alles dicht bij je lokale tooling houdt. 

Het is de beste keuze wanneer je fijne controle wilt over welke context het model kan zien, welke tools het kan draaien, hoe geheugen zich gedraagt en hoe je het uitbreidt met nieuwe tools en integraties. Het sluit ook aan op Gemini Code Assist‑quota en ondersteunt verschillende auth‑opties afhankelijk van waar je het draait. 

Je ontwikkelomgeving voorbereiden voor Gemini 3.1 Pro

Voor een goede agentic coding‑setup gebruiken we Gemini CLI, omdat dit ons volledige controle geeft over context, permissies, geheugen, extensies, skills, testen en deployment‑workflows. 

In tegenstelling tot uitsluitend browser‑builders draait Gemini CLI direct in je lokale ontwikkelomgeving, zodat je aan echte repositories kunt werken, bestanden kunt beheren en tools op een productieklare manier kunt integreren.

In deze sectie installeren we Gemini CLI, authenticeren we het, configureren we het model op Gemini 3.1 Pro, verkennen we de extensiemarketplace, installeren we de vereiste extensies en maken we vervolgens custom skills die specifiek zijn afgestemd op onze techstack. 

Zo weet de agent vanaf het begin hoe onze architectuur, coding standards en deploymentdoelen in elkaar zitten.

Installeer en authenticeer Gemini CLI voor agentic development 

Controleer vóór de installatie van Gemini CLI of je het volgende hebt:

• Node.js versie 20 of hoger
• npm correct geïnstalleerd
• Een Google Cloud‑account met billing ingeschakeld
• Toegang tot Gemini 3.1 Pro via de Gemini API

Installeer Gemini CLI globaal:

npm install -g @google/gemini-cli

Maak je projectmap en ga ernaartoe:

mkdir love-geek
cd love-geek

Start Gemini CLI:

gemini 

Authenticeer bij de eerste start met je Google‑account of API‑sleutel. Als je API‑sleutel‑authenticatie gebruikt, zorg dan dat die correct is ingesteld in je omgevingsvariabelen. Zorg dat billing is ingeschakeld in Google Cloud, zodat je zonder onderbrekingen toegang hebt tot Gemini 3.1 Pro.

Zo ziet onze Gemini CLI er aan het begin uit. 

Typ eenmaal in Gemini CLI “/model”. Dit opent het modelselectiemenu. Kies de handmatige selectieoptie en selecteer het nieuwste Gemini 3.1 Pro preview‑model uit de lijst.

Het juiste model selecteren is cruciaal. Agentic workflows steunen sterk op lange contexten, toolgebruik en gestructureerde redenering, die het sterkst zijn in Gemini 3.1 Pro.

Breid Gemini CLI uit met extensies

Gemini CLI bevat een extensiemarketplace, vergelijkbaar met VS Code‑extensies. Extensies laten je MCP‑servers, retrieval‑tools, externe API’s en verbeterde contextsysteemen toevoegen, zodat je agent verder kan gaan dan simpele promptcompletion.

Voor onze stack installeren we:

1. Exa MCP Server voor geavanceerd zoeken op het web en in repositories
2. Context7 voor actuele documentatieretrieval voor moderne techstacks

Installeer ze met:

gemini extensions install https://github.com/exa-labs/exa-mcp-server
gemini extensions install https://github.com/upstash/context7

Start daarna Gemini CLI opnieuw:

gemini 

Je zou nu extra MCP‑servers en skills in je omgeving moeten zien. Met deze tools kan de agent het web doorzoeken, GitHub‑repositories ophalen en de nieuwste documentatie direct in zijn redeneercorrect opnemen.

Maak custom skills voor de webapplicatie 

De geïnstalleerde extensies zijn generiek. Om een productieklare applicatie te bouwen, hebben we projectspecifieke skills nodig die best practices voor onze precieze stack vastleggen.

Onze stack:

• Next.js App Router
• Tailwind CSS + shadcn/ui
• Drizzle ORM met Neon Postgres
• Clerk‑authenticatie
• Vitest
• Vercel‑deployment

Gebruik de volgende prompt in Gemini CLI om modulaire custom skills te genereren:

Generate the following skills:

1. nextjs-app-router-skill (enforce App Router + Server Components best practices)
2. drizzle-neon-skill (schema, migrations, relations, Neon connection)
3. clerk-auth-skill (middleware, protected routes, secure server-side auth)
4. vitest-testing-skill (unit tests for core logic and edge cases)
5. vercel-deploy-skill (env setup and production deployment rules)"

Na indienen genereert Gemini 3.1 Pro gestructureerde skill‑definities. Vervolgens vraagt het je om ze lokaal te installeren.

Keur elke installatie goed. Wanneer om toestemming wordt gevraagd, druk op Shift + Tab om de focus naar de terminal te verplaatsen en typ “Y”. Herhaal dit voor alle vijf skills.

Laad na installatie de skills opnieuw door “/skills reload” te typen in de Gemini CLI. 

Typ “/skills list” om te verifiëren. Je ziet al je custom skills. Dit bevestigt dat de skill succesvol is toegevoegd.

Vanaf nu is je Gemini 3.1 Pro‑agent niet meer generiek. Hij begrijpt je stack, je databaserichtlijnen, je authenticatie‑constraints, je testframework en je deploymentdoel.

Hands‑on project: “Tinder for Geeks” bouwen met Gemini 3.1 Pro

We gaan nu een complete, end‑to‑end, productieklare Tinder for Geeks‑applicatie plannen en bouwen met Gemini 3.1 Pro in volledige agentic‑modus. Dit is geen speelgoeddemo. We ontwerpen de architectuur, genereren het schema, implementeren de matching‑engine, voegen authenticatie toe, testen de kernlogica en deployen naar Vercel volgens geldende productiestandaarden.

1. Initiële prompt voor het bouwen van de app

Begin in Gemini CLI met een gestructureerde en expliciete instructie. De kwaliteit van je eerste prompt bepaalt hoe goed de agent de architectuur plant in plaats van lukraak bestanden te genereren.

Typ het volgende:

Build a production-ready MVP called "Tinder for Geeks".

App Requirements:
- Swipe-based profile browsing (like / dislike)
- Mutual likes create a match
- Matches page
- Authenticated users only
- Clean modern UI using Tailwind + shadcn/ui

Tech Stack (do not change):
- Next.js App Router (TypeScript)
- Server Actions + Route Handlers
- Postgres on Neon
- Drizzle ORM with migrations
- Clerk authentication
- Vitest for unit testing
- Deployment-ready for Vercel

Execution Rules:
1. Show folder structure first.
2. Generate database schema and migrations.
3. Implement API logic and matching engine.
4. Build swipe UI.
5. Add protected routes.
6. Generate unit tests for matching logic.
7. Provide an environment variable checklist for Vercel deployment.

Keep explanations minimal.
Focus on clean, modular, production-ready code.
Validate each step before moving to the next.

Na het indienen zal Gemini 3.1 Pro niet meteen willekeurige bestanden genereren. Het redeneert eerst over de algehele projectstructuur en bepaalt welke stackspecifieke skills geactiveerd moeten worden. 

Omdat we eerder custom skills hebben geïnstalleerd, kan de CLI automatisch voorstellen modules zoals de Next.js App Router‑skill of de Drizzle ORM‑skill te activeren.

Je ziet toestemmingsprompts met de vraag of je deze skills wilt activeren. Elke skill injecteert stackspecifieke constraints, architectuurstandaarden en best practices in de redenering van de agent. Door ze goed te keuren, volgt de gegenereerde code de juiste productieregels in plaats van generieke boilerplate.

Wil je sneller werken en niet elke activatie of bestandswijziging handmatig goedkeuren, dan kun je naar YOLO‑modus schakelen met CTRL + Y.

In YOLO‑modus gaat de agent door zonder bevestigingsprompts. Handig voor snel prototypen, maar wees voorzichtig in productierepo’s waar bestandswijzigingen en permissies strakker gecontroleerd moeten worden.

Aan het eind geeft Gemini CLI een gestructureerde samenvatting van:

• Gemaakte bestanden
• Geïmplementeerde features
• Database‑schemadefinities
• API‑endpoints
• Benodigde omgevingsvariabelen

Het genereert ook een Vercel‑deploychecklist, zodat je precies weet welke API‑sleutels en omgevingsvariabelen geconfigureerd moeten worden vóór deployment.

2. Context en geheugen persistent maken

Nu maken we de agent stateful door een persistent projectgeheugen aan te maken met het /init‑commando in Gemini CLI.

Dit genereert een GEMINI.md‑bestand in je projectroot. Dit bestand fungeert als levend geheugen voor de agent. Het vat je projectstructuur, techstack, conventies, build‑commando’s, testcommando’s en deployinstructies samen.

Daarna willen we dat Gemini zich gedraagt als een gedisciplineerde engineer, niet als een losse codegenerator. Voeg de volgende instructie toe aan het geheugen:

“Na elke grote wijziging automatisch relevante bestanden stagen, types en tests valideren, dan een kleine atomische git‑commit maken met het conventional commit‑formaat, nooit secrets committen, en het commitbericht tonen vóór je verdergaat.”

Dit dwingt af:

• Schone, incrementele commits
• Validatie van types
• Testverificatie vóór wijzigingen definitief zijn
• Goede commit‑hygiëne

Nu volgt de agent automatisch een professionele Git‑workflow na elke feature‑toevoeging.

We willen ook dat de agent repository‑publicatie en CI‑validatie afhandelt met GitHub CLI.

Voeg dit toe aan het geheugen:

“Update het geheugen: Onthoud om GitHub CLI (gh) te gebruiken om deze repository te publiceren als dat nog niet is gebeurd, alle commits naar de main‑branch te pushen en vervolgens de status van de huidige GitHub Actions‑workflow te controleren en te rapporteren.”

Dit zorgt ervoor dat:

• De repository automatisch wordt gepubliceerd
• Alle commits consequent worden gepusht
• De CI‑status na elke update wordt gecontroleerd
• Je wordt geïnformeerd als een workflow faalt

Je Gemini 3.1 Pro‑agent is nu niet langer stateless. Hij begrijpt je project, volgt engineeringdiscipline, beheert Git correct en monitort CI. Hier wordt agentic coding echt krachtig.

3. Betrouwbaarheid en guardrails toevoegen

De meeste vibe‑coded apps falen niet door ontbrekende features, maar door ontbrekende waarborgen. Productieklare applicaties moeten omgaan met kwaadwillende input, onverwachte edgecases, race‑conditions en verkeerd API‑gebruik. Als je deze stap overslaat, werkt je app misschien in demomodus, maar breekt hij bij echte gebruikers of geautomatiseerd misbruik.

Nu instrueren we Gemini 3.1 Pro om het systeem te hardenen.

Gebruik het volgende commando in Gemini CLI:

“Voeg betrouwbaarheid en guardrails toe aan dit project door inputvalidatie af te dwingen, juiste foutafhandeling, rate limiting op API‑routes, veilige Clerk‑auth‑verificatie op de server, bescherming tegen dubbele acties, logging voor kritieke flows en het voorkomen van breaking API‑wijzigingen.”

4. Omgevingsvariabelen configureren en lokaal valideren

Nu koppelen we onze applicatie aan echte productiediensten. We gebruiken Clerk voor authenticatie en Neon voor een volledig beheerde Postgres‑database. Deze stap maakt van onze gegenereerde code een werkend full‑stack systeem.

Ga naar clerk.com en maak een gratis account aan.

Maak in het dashboard een nieuwe applicatie. Clerk genereert automatisch:

• Publiceerbare sleutel
• Geheime sleutel

Kopieer de publiceerbare sleutel en geheime sleutel vanuit het hoofd-dashboard. Deze voeg je toe aan je omgevingsvariabelen.

Ga vervolgens naar neon.tech en maak een gratis account aan.

Maak een nieuw project. Neon voorziet je van een beheerde Postgres‑database.

Na het aanmaken van het project:

• Open het dashboard
• Zoek de connection string
• Kopieer de volledige Postgres‑connection‑URL

Deze URL wordt door Drizzle ORM gebruikt om met je database te verbinden.

Gebruik het meegeleverde .env.example‑bestand als template. Maak een nieuw bestand .env.local.

Vervang de placeholder‑waarden door:

• Clerk publiceerbare sleutel
• Clerk geheime sleutel
• Neon database‑connection string

Zorg dat je .env.local nooit commit naar Git.

Zodra je omgevingsvariabelen zijn ingesteld, ga je terug naar Gemini CLI en typ je:

“Ik heb de Clerk‑ en Neon‑API‑sleutels toegevoegd aan de omgevingsvariabelen. Start de applicatie lokaal, verifieer de databaseconnectiviteit, test de authenticatiestroom en rapporteer eventuele fouten.”

Gemini 3.1 Pro zou nu het volgende moeten doen:

• De developmentserver starten
• Databasemigraties draaien
• Neon‑connectiviteit bevestigen
• Clerk‑sessieafhandeling valideren
• Beschermde routes testen
• Eventuele runtime‑fouten rapporteren

Als alles correct is geconfigureerd, geeft de CLI een lokale ontwikkel‑URL zoals http://localhost:3000.

Open de URL (http://localhost:3000) in je browser. 

Klik op “Create Account” en gebruik Google‑aanmelding voor de snelste setup.

Vul na authenticatie je profiel aan met een naam, bio en profielfoto.

Daarna word je doorgestuurd naar de swipe‑interface. Je kunt links swipen om een profiel te weigeren of rechts om het te liken. Als twee gebruikers elkaar liken, ontstaat er een match die op de matches‑pagina wordt getoond.

Binnen enkele minuten heb je nu een volledig functionele, geauthenticeerde, database‑backed webapplicatie lokaal draaien.

Dit is de kracht van agentic coding met Gemini 3.1 Pro. Wat normaal uren aan setup en debugging kost, wordt teruggebracht tot een gestructureerde, begeleide workflow die snel en betrouwbaar een werkende, deploybare applicatie oplevert.

5. Deployen naar productie met Vercel

Nu de app lokaal werkt, is het tijd om naar productie te deployen. Omdat we eerder Git‑automatisering hebben ingesteld, is deployment rechttoe rechtaan.

Instrueer eerst Gemini CLI:

“Commit en push alle wijzigingen naar GitHub.”

Dit zorgt ervoor dat:

• Alle lokale wijzigingen correct zijn gecommit
• Er geen secrets zijn opgenomen
• De main‑branch up‑to‑date is
• De repository klaar is voor deployment

Je repository zou nu beschikbaar moeten zijn op GitHub kingabzpro/love-geek.

Ga naar https://vercel.com en maak een gratis account. Koppel je GitHub‑account wanneer daarom wordt gevraagd. Vercel integreert direct met GitHub‑repo’s en kan automatisch deployen bij elke push.

Eenmaal verbonden:

• Klik op “Add New Project”
• Selecteer de love-geek‑repository
• Importeer het project

Vercel detecteert automatisch dat dit een Next.js‑applicatie is en stelt de build‑instellingen overeenkomstig in.

Scroll vóór deployment omlaag naar de sectie Environment Variables.

Klik op “Import .env” of voeg handmatig toe:

• Clerk publiceerbare sleutel
• Clerk geheime sleutel
• Neon database‑URL
• Alle extra omgevingsvariabelen die je lokaal gebruikte

Zorg dat alle productie‑omgevingsvariabelen overeenkomen met je .env.local‑waarden.

Klik op Deploy.

Vercel zal:

• Dependencies installeren
• Het Next.js‑project bouwen
• De production build draaien
• De deployment provisionen

Na voltooiing staat je applicatie live op https://love-geek.vercel.app.

Open de live‑URL en test:

• Authenticatiestroom
• Profielaanmaak
• Swipe‑functionaliteit
• Match‑aanmaak
• Beschermde routes

Als alles werkt, heb je nu een volledig gedeployde, geauthenticeerde, database‑backed webapplicatie die in productie draait.

Van idee naar gedeployed product in minder dan 30 minuten.

Elke keer dat je nu nieuwe features naar GitHub pusht, zal Vercel je applicatie automatisch opnieuw deployen. Met Gemini 3.1 Pro dat structuur, geheugen en guardrails beheert, kun je vol vertrouwen features blijven toevoegen en dit binnen enkele dagen uitbouwen tot een productieklare startup‑basis.

Tot slot

Als je het mij eerlijk vraagt, was ik oprecht onder de indruk van de eerste build. De app werkte end‑to‑end met authenticatie, database‑integratie, swipelogica en deployment, allemaal gestructureerd afgehandeld. Er waren een paar kleine gaten tijdens het testen, zoals dat ik handmatig tijdelijke seed‑profielen moest aanvragen om de swipe‑functionaliteit goed te testen. Dat was geen beperking van het model, maar iets dat ik duidelijker had moeten specificeren.

Wat het meest opviel, was de debugvaardigheid van Gemini 3.1 Pro. Wanneer de app fouten gaf of configuratieproblemen opdoken, was het erg effectief in het traceren van het probleem, het voorstellen van fixes en het stap voor stap valideren van de oplossing. Het plakte fouten niet zomaar dicht, maar redeneerde erdoorheen.

Het ecosysteem eromheen maakte een groot verschil. De combinatie van Gemini CLI, custom skills, extensies, persistent geheugen en YOLO‑modus creëerde een krachtige ontwikkelworkflow. Het geheugensysteem verminderde herhaalde uitleg, custom skills handhaafden architecturale discipline en de extensies verbeterden documentatie‑ en zoeknauwkeurigheid.

Qua kosten kostte het bouwen, debuggen en deployen van deze full‑stack applicatie me ongeveer 5 dollar aan API‑gebruik. Vergeleken met coding‑modellen uit de hogere klasse is dat zeer redelijk. 

Ik koos er ook voor om niet te vertrouwen op beperkte free tiers of abonnementsgebaseerde coding‑platforms die vaak de verbinding verbreken of het gebruik beperken. Betalen voor een stabiele, hoogwaardige ervaring was het waard.

Al met al was dit meer dan alleen een app bouwen. Het was een leerervaring in agentic development. Begrijpen hoe je geheugen beheert, custom skills maakt, Gemini‑extensies gebruikt en strategisch overschakelt naar YOLO‑modus veranderde mijn aanpak van AI‑ondersteunde engineering.

Ik raad deze workflow ten zeerste aan, vooral aan vibe‑coders die verder willen gaan dan snelle prototypes en sneller gestructureerde, productieklare applicaties willen bouwen met minder debughoofdpijn.

Als je graag meer wilt leren over bouwen met agentische AI, raad ik de Designing Agentic Systems with LangChain‑cursus aan.