Tabnine: een gids met demoproject

Code schrijven kan eentonig worden als je vastzit aan boilerplate of kleine syntaxisdetails. Die wrijving wordt alleen maar groter wanneer je met nieuwe AI-modellen experimenteert en je vooral op het bouwen wilt focussen. Tabnine helpt die vertraging te doorbreken met AI-codeaanvullingen in je editor.

In dit artikel leg ik stap voor stap uit hoe je Tabnine in Visual Studio Code (VS Code) gebruikt om een AI-afbeeldingseditor te maken met Google’s nieuwste afbeeldingsgeneratiemodel, Nano Banana. Aan het einde van dit artikel hebben we een werkende Python-applicatie waarmee gebruikers afbeeldingen kunnen genereren en bewerken met prompts.

Voor wie op de hoogte wil blijven van de nieuwste Google-modellen voor afbeeldingsgeneratie, raad ik onze gids over Nano Banana 2 aan.

Wat is Tabnine?

Tabnine is een AI-aangedreven code-assistent vergelijkbaar met GitHub Copilot en Cursor. Het werkt in de meeste populaire editors, zoals VS Code, PyCharm, Jupyter en meer.

Enkele belangrijke functies van Tabnine zijn:

- Jira-integratie: Tabnine kan verbinden met Jira, een populair platform voor het beheren van softwareprojecten. Dit maakt het eenvoudiger om werk te beheren en stelt Tabnine in staat om taken in de pijplijn te volgen.

- Aangepaste commando’s: Tabnine wordt geleverd met allerlei commando’s, zoals "Leg code uit" of "Repareer code". Het laat gebruikers ook promptgebaseerde, aangepaste commando’s definiëren.

- Aangepast gedrag: Tabnine laat je een prompt configureren die stuurt hoe de AI-modellen antwoorden. Als je bijvoorbeeld duidelijke codeerafspraken hebt, kun je die opgeven om te zorgen dat het code genereert volgens die richtlijnen.

- Slimme autocomplete: Het suggereert volledige regels of blokken code, niet alleen variabelenamen.

- Contextbewust: Tabnine past zich aan jouw projectstructuur en codeerstijl aan.

- Ondersteuning voor meerdere AI-modellen: Tabnine ondersteunt de meest populaire AI-modellen, waardoor je eenvoudig kunt kiezen welk model je gebruikt.

- Teamleren: In enterprise-plannen kan het leren van de privécodebase van je team om suggesties te doen die aansluiten op de patronen van je bedrijf.

Tabnine instellen

Om te beginnen moeten we een Tabnine-account aanmaken en een abonnement nemen op een van hun plannen. Ze bieden een proefperiode van 14 dagen, zodat je het gratis kunt proberen. Na de proefperiode kost Tabnine $9 per maand.

Nadat je je Tabnine-account hebt aangemaakt, open je VS Code. Als je VS Code nog niet hebt, installeer het dan via deze link. Open het tabblad Extensies en typ "tabnine" om de officiële extensie te vinden.

Zodra de extensie is geïnstalleerd, krijgen we de vraag om in te loggen. Daarna vinden we Tabnine in de linker menubalk (de laatste optie in deze screenshot).

De UI van Tabnine verkennen

Voordat we onze AI-afbeeldingseditor bouwen, lopen we snel de belangrijkste onderdelen van Tabnine door.

Wanneer we Tabnine openen, zien we een AI-chatinterface:

Bovenaan staat een modelkiezer. Hier kunnen we kiezen welk model we willen gebruiken. In deze tutorial blijf ik bij de standaardinstelling, Gemini 2.5 Pro.

Onderaan kunnen we de context instellen. Dit bepaalt wat we het AI-model willen laten zien bij het antwoorden.

Standaard omvat de context het huidige bestand en de werkruimte (het project). We kunnen andere dingen toevoegen, zoals de Terminal, wat erg handig is om het model te laten weten welke fouten we tegenkomen. We kunnen ook een specifiek codefragment doorgeven met het "@"-teken en vervolgens de naam typen van de functie die we aan de context willen toevoegen.

Via het hamburgermenu kunnen we Tabnine configureren:

Twee opvallende instellingen zijn aangepast gedrag en aangepaste commando’s. In het gedeelte voor aangepast gedrag kunnen we een prompt instellen die het model stuurt bij het genereren van code. Dat is handig als we willen dat de code specifieke richtlijnen volgt.

In de sectie Commando’s kunnen we aangepaste commando’s definiëren die kunnen worden uitgevoerd met een /<command-name> in de chatinterface. Een commando is in wezen een prompt voor het uitvoeren van specifieke acties. Dit is een goede manier om tijd te besparen en te voorkomen dat je steeds dezelfde prompt moet herhalen.

Vibe-coden van een AI-afbeeldingseditor met Tabnine

In deze sectie laat ik je zien hoe je een Python-app bouwt die Nano Banana, Google’s nieuwste afbeeldingsgeneratiemodel, gebruikt om afbeeldingen te bewerken. De gebruiker kan met een prompt een afbeelding genereren of bestaande afbeeldingen combineren en bewerken met de prompt.

Mijn doel was om te ontdekken of het mogelijk was deze applicatie te vibe-coden, oftewel hem volledig vanuit prompts vanaf nul op te bouwen.

Alle code die in deze tutorial is gegenereerd, vind je in deze GitHub-repository.

De basis-UI maken

Om te starten wilde ik de basis-UI maken waar gebruikers afbeeldingen van hun computer kunnen selecteren en een prompt kunnen typen. Ik heb een nieuwe map gemaakt en VS Code in die map geopend. Ik heb geen bestanden aangemaakt. Dit was mijn eerste prompt:

Achteraf besefte ik dat ik was vergeten te vermelden dat ik een Python-app aan het bouwen was. Ik had geluk, want dat is wat het AI-model blijkbaar aannam dat ik wilde. Het antwoordde op mijn prompt door de commando’s uit te leggen die het zou uitvoeren en de code die het zou schrijven.

Om de wijzigingen door te voeren, moeten we ze ofwel één voor één toepassen, of onderaan op de knop "Apply All" klikken. Let op dat sommige wijzigingen het uitvoeren van commando’s omvatten. In die gevallen installeren de commando’s de nodige Python-pakketten en maken ze de bestanden en mappen aan om de code op te slaan.

Zo zag de interface eruit toen ik het script draaide dat het had gemaakt:

Bovenaan staat een lijst met alle geselecteerde afbeeldingen en een knop om een bestandskiezer te openen. De gebruiker kan één of meerdere bestanden selecteren, en de geselecteerde bestanden worden vermeld. Wanneer echter nieuwe bestanden worden geselecteerd, wordt de oude lijst overschreven, dus ik vroeg om de nieuwe bestanden aan de lijst toe te voegen in plaats van de oude te verwijderen.

Vervolgens wilde ik de UI verbeteren om miniaturen van de afbeeldingen te tonen in plaats van hun paden:

Dit is het resultaat:

Een andere belangrijke functie is de mogelijkheid om eenvoudig afbeeldingen te verwijderen:

Met deze prompt paste het de code aan zodat bij een rechtermuisklik op een miniatuur een pop-upmenu verscheen waarmee we de afbeelding konden verwijderen. Ik wilde dat het op deze manier werkte, dus vroeg ik om die verandering:

Toen ik de applicatie na deze wijziging probeerde, werkte het verwijderen van afbeeldingen niet meer. Ik vermoedde dat dit kwam omdat ik een Mac gebruik, maar ik zei het niet. Ik wilde zien of het dit zelf kon achterhalen.

Het werkte erg goed en ik kon met de rechtermuisknop op een afbeelding klikken om deze te verwijderen:

De laatste stap in de basis-UI was een tekstvak toevoegen voor de prompt.

Hiermee was de basis-UI klaar. We kunnen afbeeldingen selecteren en een prompt typen. We kunnen echter nog geen afbeelding genereren. Dat implementeren we in de volgende sectie.

Nano Banana integreren

Om de code georganiseerd te houden vroeg ik om een nieuw Python-script met een functie die Google’s generatieve AI-API met hun nieuwste beeldmodel gebruikt om afbeeldingen te genereren.

Het maakte het nieuwe script en het .env-bestand. Dit bestand wordt gebruikt om de API-sleutel op te slaan die nodig is om met de Google API te verbinden. Als je meeleest, moet je hier een API-sleutel aanmaken en deze in het .env-bestand plaatsen.

Vervolgens vroeg ik om een nieuwe knop aan de interface toe te voegen die de afbeeldingsgeneratiefunctie aanroept. De knop werd toegevoegd, maar toen ik erop klikte, kreeg ik een fout. Daarom zorgde ik ervoor dat ik de terminal aan de context toevoegde voordat ik vroeg om de fout te verhelpen.

Er werden enkele updates aan de bestanden gedaan, maar de fout bleef. Ik probeerde het te laten oplossen, maar dat lukte niet. Er werd beweerd dat het AI-model niet bestond en het wilde de code veranderen in een richting waarvan ik wist dat die niet klopte.

Om dit te omzeilen, moest ik de code handmatig repareren. Ik ging naar de officiële website van Gemini en kopieerde en paste de voorbeeldcode daarvandaan, aangepast aan mijn project.

Dit is een van de redenen waarom ik het belangrijk vind om basiskennis van programmeren te hebben, zelfs bij vibe-coding. Het komt vaak voor dat we iets tegenkomen wat het AI-model niet kan oplossen, en kunnen programmeren is dan belangrijk zodat we begrijpen dat wat het model zegt niet klopt en we het kunnen repareren. Dit soort tools moet altijd worden gebruikt om het proces te versnellen, niet om het volledig te vervangen.

Zelfs wanneer ik deze code handmatig moest schrijven, was Tabnine behulpzaam dankzij de autocomplete-mogelijkheden. Toen ik bijvoorbeeld de geselecteerde afbeeldingspaden wilde omzetten naar images om aan het model te geven, kon ik gewoon beginnen te typen wat ik wilde en kreeg ik de juiste code:

We zien ook boven de functienaam dat Tabnine tools biedt om de functie te bewerken, testen, repareren, uitleggen en documenteren. Ik gebruikte bijvoorbeeld de documenteerfunctie om de code te documenteren, en het toonde me een diff met de wijzigingen die het van plan was te maken, die ik vervolgens kon accepteren of afwijzen:

Eindresultaat

De applicatie was nu functioneel en klaar voor gebruik. Laten we proberen een actiefiguur te maken voor een bepaalde persoon met accessoires uit andere afbeeldingen:

Hier is het resultaat:

Testen met Tabnine

Het is heel belangrijk om geautomatiseerde tests te schrijven wanneer je aan een project werkt. Een van de functies van Tabnine is om ons te helpen deze tests te schrijven.

Deze functie is beschikbaar op het tabblad "Test" of door te klikken op de optie "Test" boven een functiedefinitie. Wanneer we dat doen, maakt Tabnine een testplan voor die functie.

Een testplan bestaat uit scenario’s met het verwachte gedrag van de functie. Dit zijn enkele scenario’s die Tabnine voor onze functie identificeerde:

Om een test voor een specifiek scenario te genereren, klikken we er simpelweg op. Dan wordt de testfunctie voor dat specifieke scenario gegenereerd, die we vervolgens in onze testsuite kunnen opnemen.

Toen ik deze wijzigingen toepaste, bevatte het testbestand de testfunctie en verder niets. De imports en de omliggende testklasse ontbraken. Ik moest terug naar het tabblad "Chat" om te vragen de test af te maken. Daarna liep ik tegen een fout aan omdat de naam van het aangemaakte bestand onjuist was. Net als eerder gaf ik aan dat er een fout was opgetreden, en die werd verholpen. Nu draait de test succesvol.

Toen ik daarna andere tests toevoegde, ging alles goed.

Conclusie

Tabnine toont zijn potentieel als krachtige tool voor snelle ontwikkeling door naadloos te integreren met populaire code-editors. De AI-ondersteunde codeercapaciteiten versnellen het proces, zodat ontwikkelaars zich kunnen richten op innovatie in plaats van op routinetaken.

Mijn poging om puur via vibe-coding een applicatie te bouwen benadrukte echter het belang van een solide basiskennis van programmeerprincipes. Blind vertrouwen op door AI gegenereerde code zonder de geschiktheid te verifiëren kan tot complicaties leiden, waardoor ontwikkelaars kwetsbaar worden voor fouten die ze niet volledig begrijpen.

Tabnine werkte over het algemeen efficiënt, maar vaak voelde het alsof het onderliggende AI-model het echte werkpaard was, vergelijkbaar met andere tools zoals GitHub Copilot. Hoewel Tabnine zeker een nuttige tool is, onderstreept deze ervaring de onvervangbare waarde van traditionele programmeerkennis om effectieve, duurzame ontwikkeling van complexe softwareapplicaties te garanderen.