Generativ AI muliggjør stadig nye måter å jobbe på. En av de mest spennende er hvordan man kan generere fungerende grensesnitt med produksjonsklar kode via et verktøy som heter v0.dev. La oss dykke ned i hva det er, hvordan det fungerer og hva det lar deg gjøre!
Hva er v0.dev?
Før vi dukker ned i hvorfor det er så nyttig, kan det være nyttig å faktisk ta en titt på hva denne tjenesten jeg skryter sånn opp i skyene faktisk er for noe.
v0.dev er en webapp som lar deg generere relativt produksjonsklar frontend-kode i nettleseren din, interagere med det man har laget, og iterere på både design og funksjonalitet. Det er laget av Vercel, som står bak både hostingplattformen med samme navn og Next.js.
Det er gratis å teste ut, med sånn ca 20 meldinger i døgnet, men utover det koster det $20 i måneden. For den summen kan du sende mange flere meldinger, samt få noen features som er nyttige når du bruker tjenesten til noe annet enn å eksperimentere.
Hvorfor er jeg så frelst?
Autogenerert kode er kanskje ikke så nytt som det en gang var. Githubs CoPilot har vært tilgjengelig lenge, og nye AI-først editorer som Cursor og Bolt gjør at man knapt trenger å faktisk skrive syntaks lenger. Så hva er det v0.dev tilbyr som de andre ikke gjør?
For det første, så er opplevelsen av hvor kreativ denne AI-agenten er på dine vegne, helt utrolig. Du kan be den lage alt fra en landingsside, til et spill, til en liten widget som du kan inkludere på siden din. Du kan be den bruke spesifikk teknologi (som Remix eller shadcn/ui), egne komponentbiblioteker,
For det andre, så lar den deg iterere på det den genererer. Du kan be om designtweaks, be den legge til eller slette felter i et skjema, eller legge til en feature. Det gjør at du kan gjøre utrolig mye kreativ utforskning rett på siden, uten at du trenger å kode så mye som en linje. Og trenger du å endre litt på koden direkte, så kan du det også.
For det tredje, så skjønner v0 at du mest sannsynlig ikke kommer til å lage et komplett produkt der. Derfor har de gjort det veldig enkelt å eksportere koden til din egen maskin, slik at du kan jobbe videre i riktig kontekst.
Ikke bare for utviklere
En annen ting jeg synes er ganske unikt for v0.dev, er at dette er et produkt som er nyttig for andre yrkesgrupper enn bare utviklere.
Som designer kan du lage et raskt utkast til et design i Figma, ta et skjermbilde, laste det opp og be den implementere det for deg. Det blir ikke helt likt nødvendigvis, men det blir i alle fall interaktivt, og du kan iterere på hvordan designet ser ut og oppfører seg.
Et godt eksempel kan være et skjema. Du kan laste opp et bilde av f.eks. en påloggingsskjerm, be den implementere den, og så legge til støtte for feilmeldinger, last-tilstand og kanskje Facebook-pålogging. Du kan be den legge til lenker for tilbakestilling av passord og til brukspolicyen. Og før du vet ord av det har du gjort mesteparten av jobben utvikleren ellers ville brukt mange timer på – en fin ting å legge til i JIRA-tasken.
Forretningssiden kan også ha nytte av dette verktøyet. Der analytikere og strateger før måtte vente pent til noen hadde tid til å hjelpe dem med å f.eks. lage et OKR-dashboard, kan man få satt opp noe fint og funksjonelt på ganske kort tid. Sure, du trenger fortsatt en utvikler til å integrere faktisk data, men du kan designe det slik at du får opp de tallene du trenger.
Mulighetsrommet her er egentlig ganske enormt. For selv om koden som spyttes ut må skrives om til å passe med teknologivalg, sikkerhetskrav og andre ting, kan man komme ganske langt på vei til mål uten å måtte vente på sin tur i backloggen. Og utviklerne som tar i mot koden du genererer vil forhåpentligvis sette pris på innsatsen du har gjort.
Også for utviklere
Men selv om dette er et veldig nyttig verktøy for andre folk enn utviklere, er nok de som kommer til å spare mest tid på dette verktøyet, nettopp de som skal implementere ting i kode.
Du kan for eksempel laste opp et Figma-design og be v0.dev implementere det, basert på ditt egne komponentbibliotek eller teknologivalg. Du kan laste opp et eksisterende skjermbilde, og be dem utvide det med en ny feature. Er den nye featuren spesielt interaktiv, kan det spare deg for timesvis med knoting for å få det grunnleggende på plass.
Et godt eksempel på hvor intelligent dette systemet kan oppleves, så ba jeg v0 lage et enkelt skjema med Nav sine komponenter, fra deres fantastiske designsystem Aksel. Jeg lenket til dokumentasjonssiden, som den så besøkte, og ga meg fungerende kode i retur. Er ikke det rett og slett litt mind-blowing?
Og når du sier deg fornøyd, etter å ha iterert en gang eller tre, kan du kopiere koden inn i din egen kodebase. Det er et eget CLI-verktøy som gjør det for deg, eller så kan du copy-paste inn den koden du vil ha endret.
Som betalende bruker har du også muligheten til å laste opp hele kodebasen din. Det er nok mer nyttig for hobbyprosjekter og indie-makers enn for de fleste profesjonelle kodebaser, men det vil også gi deg enorme muligheter til å forbedre og videreutvikle koden din.
Test det ut, da vel
v0.dev har gjort det utrolig lett å lage veldig mye, veldig fort. Sure, det blir ikke perfekt, og det er litt igjen til mål, men det lar deg iterere på idéer, og teste ut ting som ellers ville vært altfor dyrt å teste ut mange.
Det er gratis å prøve, så test det ut en kveld du ikke har noe annet å gjøre. Det har i alle fall revolusjonert min arbeidshverdag, og jeg er sikker på at den vil revolusjonere din også.