Platform
Builder: de AI-pair die echte apps levert
Beschrijf wat je wilt in gewone taal en kijk hoe, naast het gesprek, een echte React-, TypeScript- en Supabase-applicatie vorm krijgt — met git, checkpoints en live preview ingebouwd.
Builder is de ontwikkelworkspace van Ciao: chat links, je live applicatie rechts. In tegenstelling tot AI-codingtools die stoppen bij gegenereerde code, geeft Builder elk gesprek inspect-to-prompt, een promptwachtrij, branch-native git, ongedaan maken, checkpoints, live preview en een full-stack console — zodat verzoeken in gewone taal echte, werkende software worden die je bezit.
Gepubliceerd 2026-07-03 · Laatst bijgewerkt 2026-07-03
Eén venster tussen een idee en een werkende app
De meeste AI-codingtools produceren code en beschouwen het werk als klaar. Die code draaien, previewen, versiebeheren en herstellen van de wijziging die het inloggen brak blijft jouw taak — en precies daar lopen niet-engineers vast en verliezen engineers hun middag. De afstand tussen een gegenereerde diff en een werkende applicatie is de echte kost van AI-assisted development, en die is zelden te zien in de demo.
Builder overbrugt die afstand. Het is één workspace: het gesprek met Ciao links, je live applicatie rechts. Beschrijf wat je wilt in gewone taal, Ciao schrijft echte React en TypeScript op een Supabase-backend, en de preview voor je ogen werkt bij. Branching, checkpoints, ongedaan maken en logs zitten al in het venster, zodat een serieuze wijziging het nooit hoeft te verlaten.
Hoe een Builder-sessie werkt
1. Beschrijf de wijziging
Schrijf wat je wilt in gewone taal — een nieuw scherm, een regelwijziging, een rapport. Ciao plant het werk en schrijft echte code, geen configuratie in een gesloten tool.
2. Wijs aan in plaats van beschrijven
Met inspect-to-prompt klik je op elk element in de live preview en je volgende prompt haakt precies in op dat component. Geen alinea's nodig om uit te leggen welke knop je bedoelt.
3. Zet volgende gedachten in de wachtrij
De promptwachtrij houdt volgende verzoeken op orde terwijl de huidige build draait. Ideeën komen in de wachtrij terecht, niet in een notitiebestand dat je vergeet.
4. Werk op een echte branch
Builder is branch-native: elk stukje werk gebeurt op een git-branch, zodat experimenten geïsoleerd blijven en niets direct de gepubliceerde applicatie wijzigt.
5. Bekijk hem live draaien
De live preview is de echte applicatie — echte routes, echte data, echte authenticatie — geen statische mock-up. Wat je ziet is wat er live gaat.
6. Maak ongedaan, of spring naar een checkpoint
Ongedaan maken met één klik draait de laatste wijziging terug; checkpoints markeren bekende, werkende staten waar je altijd naar terug kunt. Gedurfde pogingen worden minder risicovol.
7. Kijk onder de motorkap
De full-stack console toont frontend-fouten, backend-logs en databaseactiviteit op één plek, zodat 'waarom is dit kapot' maar één plek heeft om te kijken.
Waarom dit ertoe doet
Builder produceert standaard React, TypeScript en Tailwind waar je volledig eigenaar van bent — op elk moment exporteerbaar naar je eigen repository. Dat telt omdat het alternatief momentum is binnen het format van iemand anders: maanden werk die je niet kunt meenemen.
Het telt ook omdat Builder niet alleen werkt. Elke Ciao-workspace komt met een AI software-organisatie — CTO, Doctor, QA-analist, Security-engineer, Coder en SysOps-operator — zodat wat je in Builder bouwt doorstroomt naar Guardrails-review, geautomatiseerde QA en live security-tests voordat het gebruikers bereikt. Het chatvenster is de ingang tot een delivery-loop, niet het hele product.
Wie gebruikt Builder
- Founders en operators — Mensen die het product precies kunnen beschrijven maar geen code schrijven — krijgen een echte applicatie in eigen bezit, geen prototype met een vervaldatum.
- Product managers en domeinexperts — De mensen die het dichtst bij de workflow staan bouwen zelf het interne tool, op een branch, met review vóór elke merge.
- Engineers — Ontwikkelaars gebruiken Builder om sneller te bewegen op goed begrepen werk, met behoud van de git-discipline, checkpoints en full-stack zichtbaarheid die ze toch al zouden instellen.
- Bureaus — Klantwerk krijgt dezelfde loop: bouw in gesprek, toon de live preview in reviewgesprekken, lever via de gates.
Security- en governance-notities
- ✓ Elke wijziging gebeurt op een git-branch — niets wijzigt direct de gepubliceerde applicatie.
- ✓ Guardrails brengt code in kaart naar bedrijfsonderdelen en past beleid in gewone taal toe voordat risicovolle wijzigingen worden gemerged.
- ✓ QA voert smoke gates uit vóór publicatie en productiechecks daarna.
- ✓ Een append-only audit trail dekt prompts, merges, deploys en admin-acties.
- ✓ Klantcode wordt niet gebruikt om modellen te trainen; inferentie draait onder zero-retention modelcontracten.
- ✓ 100% code-eigenaarschap — exporteer standaard React, TypeScript en Tailwind op elk moment naar je eigen repository.
Builder versus een solo-promptworkflow
Het verschil is niet het model dat de code schrijft — het is alles rond de code.
| Solo-prompt AI-coding | Ciao Builder | |
|---|---|---|
| Het resultaat zien | Kopieer de code eruit, draai hem lokaal | De live preview werkt bij naast de chat |
| Een fix aanwijzen | Beschrijf het element in woorden | Klik erop — inspect-to-prompt haakt in op het component |
| Volgende ideeën | Wacht op uitvoering, herschrijf dan | De promptwachtrij houdt ze op orde |
| Versiebeheer | Handmatige commits, indien aanwezig | Branch-native git, ongedaan maken en checkpoints |
| Debuggen | Aparte terminals en dashboards | Full-stack console in hetzelfde venster |
Veelgestelde vragen
Moet ik git kennen om Builder te gebruiken?
Nee. Builder is onder de motorkap branch-native: het maakt branches, commit werk en beheert merges voor je. Engineers kunnen naar het git-niveau afdalen wanneer ze willen, en de volledige geschiedenis is beschikbaar bij het exporteren van de code.
Wat doet inspect-to-prompt precies?
Je klikt op een element in de live preview — een knop, een tabel, een formulier — en Builder voegt de context van dat component toe aan je volgende prompt. Een verzoek als 'maak dit sorteerbaar' komt de eerste keer op de juiste code terecht, in plaats van geïnterpreteerd te worden uit een geschreven beschrijving.
Wat gebeurt er als een wijziging iets breekt?
Je hebt drie niveaus: ongedaan maken met één klik voor de laatste wijziging, checkpoints om terug te gaan naar een bekende, werkende staat, en QA-smoke gates die fouten opvangen vóór publicatie. Productiechecks draaien ook na publicatie.
Kan ik de code elders meenemen?
Ja. Ciao genereert standaard React, TypeScript en Tailwind met een Supabase-backend, en je bezit het 100%. Exporteer op elk moment naar je eigen repository — er is geen proprietary runtime waar de app van afhangt.
Hoe begin ik, en wat kost het?
Individuele bouwers beginnen self-serve met credits — beschrijf je eerste app en begin. Serieuze productieprogramma's beginnen bij 10.000 USD per jaar; bekijk de prijzenpagina of praat met sales over wat jouw team nodig heeft.