Je klikt op een element, Claude Code past de code aan: zo werkt Airship
Tutorials

Je klikt op een element, Claude Code past de code aan: zo werkt Airship

· 10 min leestijd

Sinds 10 augustus staat er een gratis tool op GitHub die het omslachtigste deel van websitewerk wegneemt: uitleggen wélk element je bedoelt en in welk bestand het staat. De tool heet Airship. Je klikt de knop aan die te dicht op de rand staat, typt in gewone taal wat er anders moet, en Claude Code past de broncode aan terwijl je toekijkt. In drie dagen tijd verzamelde het project ruim 400 sterren, en het aardige is dat je niets hoeft te installeren om het te proberen.

Kort antwoord

Airship is een gratis, open source commandoregel-tool die een visuele editor voor je draaiende website zet. Je klikt een element aan, beschrijft de wijziging, en Claude Code, Codex of OpenCode past de echte broncode aan. Er komt niets in je project terecht: Airship draait als tussenlaag voor je ontwikkelserver.

Wat doet Airship precies?

Airship zet een oneindig canvas voor de ontwikkelserver die je toch al draait. Op dat canvas staat je app niet als plaatje maar als echt browservenster, en meestal in meerdere maten tegelijk: een desktopvenster en een iPhone-venster naast elkaar, allebei live, allebei aanklikbaar. Verander je iets, dan zie je het in beide tegelijk gebeuren.

Het Airship-canvas met een desktopvenster en een iPhone-venster van dezelfde pagina naast elkaar, links het agentpaneel en rechts de inspector
Het canvas van Airship: dezelfde pagina als desktop- en iPhone-venster naast elkaar, links de agent, rechts de inspector. Bron: Airship-repository op GitHub, augustus 2026.

De slimmigheid zit in iets wat je ontwikkelserver al bijhoudt. Tijdens het ontwikkelen registreert je build namelijk per element waar het vandaan komt: welk bestand, welke regel. Die informatie ligt er dus al, alleen deed niemand er iets mee. Airship leest hem uit en geeft hem door aan je AI-assistent. Vandaar dat je niets hoeft uit te leggen.

Denk aan een verbouwing waarbij je normaal door de telefoon aan de aannemer uitlegt wélk stopcontact verkeerd zit. Airship geeft je in plaats daarvan een laserpointer.

Wat er precies naar de agent gaat, is volgens de documentatie beperkt en overzichtelijk: het element dat je aanklikte, het bestand en de regel waar het vandaan kwam, wat je in de inspector veranderde, de vensters waarin je werkte, en je eigen tekst. Verder niets.

Zo heb je het in vijf minuten draaien

Je hebt drie dingen nodig: Node 22.13 of nieuwer, een project met een ontwikkelserver, en Claude Code, Codex of OpenCode die al werkt op je machine. Airship gebruikt de login die je voor die assistent al hebt, dus er komt geen nieuwe API-sleutel bij. Werkt Claude Code in je terminal, dan werkt het hier ook.

Stap 1. Start je project zoals altijd. Niets veranderen aan je gewone werkwijze:

pnpm dev    # draait op http://localhost:3000

Stap 2. Wijs Airship naar die poort. Eén commando, niets te installeren:

npx @airshiplabs/cli --target 3000

Airship opent de editor op de eerstvolgende vrije poort. Laat je --target weg, dan zoekt hij de poort zelf: eerst in je dev-script, dan op basis van je framework (3000 voor Next en Remix, 5173 voor Vite en SvelteKit, 4321 voor Astro, 6006 voor Storybook), en anders de gangbare poorten op volgorde. Dat framework-lijstje is met zorg gemaakt: staan zowel Vite als Storybook in je project, dan gokt Airship op Vite, want dat is volgens de documentatie een Vite-app met een componentencatalogus en niet andersom.

Stap 3. Kies je assistent en zet hem vast. Claude Code is de standaard, maar noem hem gerust expliciet en zet meteen de veilige modus aan:

airship --target 3000 --agent claude --safe

Stap 4. Laat Airship je server ook starten. Wil je maar één venster openhouden, geef dan het startcommando mee. Airship start je ontwikkelserver dan zelf en zet hem weer uit als je stopt:

airship --exec "pnpm dev"

Stap 5. Zet je voorkeuren vast. Werkt het, dan schrijf je met airship init een airship.config.json weg, zodat de vragen achterwege blijven. En loopt er iets mis, dan is er een diagnosecommando dat je omgeving langsloopt en per onderdeel zegt wat er mankeert:

airship doctor && airship

Zit je in een monorepo, dan is er één valkuil: --cwd moet wijzen naar de map die je ontwikkelserver als basis ziet, niet naar de bovenste map van je repository. Voor een app in apps/web is dat dus --cwd apps/web.

Wat gebeurt er als je op een element klikt?

Het geselecteerde element vult de inspector, en die heeft drie tabbladen die allemaal naar hetzelfde ding kijken. Onder Edit zitten positie, afmeting, marges en layout. Onder CSS zie je het box-model, welke regels het element daadwerkelijk raken en je eigen aanpassingen daarbovenop. Onder DOM staat de boom, waarin je een element kunt aanklikken of naar een andere plek kunt slepen.

Airship midden in een bewerking: links de opdracht om er een GitHub-icoon van te maken met de bestanden die de agent leest en wijzigt, rechts de inspector met positie en layout van het geselecteerde element
Na de opdracht leest de agent de betrokken bestanden en toont hij regel voor regel wat hij schrijft en wijzigt. Bron: Airship-repository op GitHub, augustus 2026.

Daarnaast is er het tekstvak. In de demo van de makers staat er een opdracht van vijf woorden in, ongeveer zoals je het tegen een collega zou zeggen: maak hier een GitHub-icoon van. De agent leest daarna de navigatiebestanden, ziet hoe bestaande iconen in dit project gebouwd zijn, schrijft een nieuw component in diezelfde stijl en vervangt de tekst door het icoon. Je ziet het paneel voor paneel gebeuren, inclusief welke regels erbij komen en welke verdwijnen.

Bevalt het niet, dan draai je het terug vanuit Airship zelf. Airship bewaart de vorige versie van elk bestand dat het aanraakt. Let op één ding: bij Codex en OpenCode haalt Airship die vorige versie uit Git, dus daar heb je een repository voor nodig. Bij Claude Code niet.

Hoe hou je de agent binnen de lijntjes?

Standaard draait je AI-assistent hier net zo onbeperkt als in je terminal, en de makers zeggen dat zelf met zoveel woorden in hun documentatie.

“By default the agent runs unsandboxed. It can write anywhere you can and reach the network.”

Airship-documentatie, hoofdstuk Safety

Dat is precies het scenario waar Claude Code sinds 14 augustus standaard minder vaak om toestemming vraagt: hoe minder de agent vraagt, hoe belangrijker het wordt dat je vooraf de grenzen zet. De vlag --safe is daarvoor bedoeld, maar hij is niet bij elke assistent even sterk, en Airship zegt dat bij het opstarten ook eerlijk.

AssistentWat --safe doetHoe hard is het?
CodexEchte sandbox: opgesloten in je projectmap, geen netwerk, geen zoekopdrachtenHet besturingssysteem blokkeert het
Claude CodeWijzigingen blijven in je project, gevaarlijke commando's worden geblokkeerdEen controle vooraf, geen muur
OpenCodeVraagt voor elke wijziging en elk commando, niets buiten je projectEen controle vooraf, geen muur

De documentatie is verrassend open over waar die controle tekortschiet: hij herkent bekende gevaarlijke commando's zoals rm -rf, maar begrijpt de commandoregel niet echt. Een schrijfopdracht die ergens anders naartoe wijst, glipt er dus langs. En bij Claude Code en OpenCode kan een commando alsnog het internet op. Wil je een harde garantie, dan is er maar één route: airship --agent codex --safe.

Overigens zijn er nog twee remmen, allebei alleen bij Claude Code. Met --max-turns begrens je hoeveel beurten de agent per wijziging mag nemen, standaard 24. En met --max-budget stopt een wijziging zodra die meer dan het opgegeven bedrag in dollars kost. Dat laatste is de eenvoudigste manier om te voorkomen dat een simpel klusje ongemerkt uitgroeit tot een half uur redeneren.

airship --target 3000 --agent claude --safe --max-budget 1.50 --commit

Die laatste vlag, --commit, legt elke geaccepteerde wijziging meteen vast in Git met een nette commitboodschap. Handig als je een middag lang kleine dingen zit bij te schaven.

Wat kost het?

Airship zelf kost niets. Het is een MIT-gelicenseerd project op GitHub, er is geen account, geen betaalde variant en geen dienst waar je je voor aanmeldt. Je betaalt alleen wat je AI-assistent toch al kost, en dat verbruik loopt via je eigen abonnement of API-sleutel.

Voor de meeste Nederlandse gebruikers betekent dat Claude Pro: 20 dollar per maand, omgerekend 21,02 euro inclusief 21 procent btw. Op dat niveau werkt Claude Code gewoon, en Airship gebruikt precies die login. Wie meer ruimte nodig heeft, zit bij Max rond de 105 euro per maand inclusief btw, zoals we eerder op een rij zetten in ons overzicht van de Claude-abonnementen in euro's. Alle bedragen staan in dollars op de prijzenpagina van Anthropic en worden ook in dollars afgeschreven.

Eén kostenpost verdwijnt wel: de heen-en-weer-tijd. Een designwijziging die normaal langs een ticket, een screenshot met een rode pijl en een terugkoppeling gaat, is hier een klik en een zin.

Waar loopt het spaak?

Airship werkt alleen op je ontwikkelserver, op je eigen machine. Het is geen knop waarmee je collega's je live website aanpassen, en dat is maar goed ook. Verder zijn er vier dingen waar je tegenaan loopt.

  • Het project is drie dagen oud. De eerste versie verscheen op 10 augustus, versie 0.2.5 volgde een dag later. Reken op scherpe randjes en op wekelijkse wijzigingen.
  • Zonder Git verlies je iets. Bij Codex en OpenCode werkt terugdraaien via Git. Geen repository betekent geen undo bij die twee.
  • Node 22.13 is het minimum. Draai je nog op een oudere versie, dan begin je met een upgrade van Node.
  • De veilige modus is geen slot. Bij Claude Code is --safe een controle vooraf. Wie met klantcode of productiegevoelige repositories werkt, kiest Codex of laat het bij een testproject.

Er is nog een reden om dit lokale karakter serieus te nemen. Airship draait volledig op localhost, heeft geen telemetrie en stuurt je code nergens heen; alleen je eigen assistent doet dat, met de credentials die je al gebruikte. In een land waar veel bedrijfsdata via omwegen bij gratis AI-tools belandt, is dat geen detail. Uit het Shadow AI-onderzoek van TheAIDaily onder Nederlandse mkb-bedrijven blijkt dat 44 procent van de respondenten bedrijfsgegevens in een gratis AI-tool zette, terwijl slechts 28 procent wist dat zulke tools die invoer voor training mogen gebruiken. Meer van die cijfers staan in de MKB-data van TheAIDaily.

Veelgestelde vragen

Moet ik een plug-in installeren of mijn build aanpassen?

Nee. Airship draait als tussenlaag voor je bestaande ontwikkelserver. Er komt niets bij in je dependencies, je configuratie of je bundel.

Werkt het met Tailwind of styled-components?

Ja. Airship gebruikt het stylingsysteem dat al in je project zit, inclusief je eigen tokens en conventies. Visuele wijzigingen worden teruggeschreven naar de waarden die je designsysteem al kent.

Gaat mijn code naar Airship toe?

Nee. Airship draait volledig op localhost, zonder account of telemetrie. Alleen je gekozen AI-assistent stuurt verzoeken naar zijn eigen provider, met dezelfde credentials als vanuit je terminal.

Kan ik het gebruiken zonder Git?

Ja, Airship vereist geen Git. Maar bij Codex en OpenCode komt de vorige versie van een bestand uit Git, dus zonder repository verlies je bij die twee de undo-functie. Bij Claude Code werkt undo altijd.

Welke AI-assistenten worden ondersteund?

Claude Code, OpenAI Codex en OpenCode. Claude Code is de standaard. Codex is de enige met een echte sandbox in veilige modus, OpenCode moet je zelf installeren.

Voor wie dit vandaag al zin heeft

Heb je een eigen webapplicatie of website die je zelf onderhoudt, en gebruik je Claude Code toch al, dan is de drempel bijna nul: één commando, geen installatie, en je kunt het na een middag weer weglaten zonder dat je project er iets van merkt. Begin met een testproject, zet --safe aan en geef jezelf een budgetgrens mee, dan weet je binnen een half uur of deze manier van werken bij je past.

Werk je met klantcode of gevoelige repositories, dan is het te vroeg om dit als vaste werkwijze aan te zetten. Kies dan Codex met de echte sandbox, of wacht een paar releases tot de scherpe randjes eraf zijn. Wil je dit soort tools eerder voorbij zien komen, dan houdt onze dagelijkse AI-nieuwsbrief je op de hoogte.

Michael Groeneweg
Geschreven door Michael Groeneweg AI-consultant bij Digital Impact en oprichter van UnicornAI.nl

Michael is AI-consultant bij Digital Impact in Rotterdam en oprichter van UnicornAI.nl, waar hij AI-oplossingen en SaaS-integraties bouwt voor bedrijven. Al tien jaar ondernemer, en sinds een paar jaar weigert hij iets te doen waar geen AI in verweven zit, zakelijk noch privé, tot mild ongenoegen van zijn omgeving. Zijn reizen door de wereld zijn inmiddels een serie experimenten in wat AI wel en niet kan vanaf een terrasje in Lissabon of een treinstation in Tokio. Hij test obsessief nieuwe tools, bouwt oplossingen voor klanten, en vindt dat niemand de hype moet geloven, maar ook niemand meer kan doen alsof AI niet alles verandert. Houdt van goede koffie, lange vluchten en mensen die met AI bouwen in plaats van er alleen over praten.

Gemaakt door een mens, met AI als assistent bij research en redactie. Meer over onze werkwijze in de AI-disclosure en het redactiestatuut.