Tidligere i høst lanserte Vercel v0.dev, en tjeneste som bruker generativ AI for å la deg beskrive med tekst hvordan du vil at UI-elementer på en nettside skal se ut. V0 vil så automatisk lage UI-elementene for deg, basert på UI-biblioteket Shadcn/ui og Tailwind CSS.
«Generativ UI»: – Blåser meg av banen!
Undertegnede har nå endelig fått tilgang til v0, som foreløpig er i privat beta. Jeg var derfor spent på å se om det nye såkalte "generative UI"-verktøyet virkelig var så bra som man kunne få inntrykk av ut fra de første reaksjonene på nettet.
Jeg har bare såvidt kommet igang med å prøve ut v0, og for å teste det ut veldig kjapt prøvde jeg å få den til å lage en kjapp ny forside til kode24.no.
«Jeg ville prøve å se om v0 kan brukes til å lage et enkelt utgangspunkt for en nettside som kode24.»
Slik virker det
Brukergrensesnittet til v0 er temmelig enkelt.
- Du får opp en blank side med et felt der du kan beskrive hva du vil lage, og det er også en del eksempler på hva du kan be om.
- Når du har beskrevet hva du vil ha, vil v0 begynne å "tenke" litt og så komme opp med noen forslag som du kan velge mellom.
- Etter å ha klikket på det forslaget du liker best kan du be om endringer. For eksempel kan du be om å få større tekst, mer padding, endre på layout eller andre ting.
- Så snart du er fornøyd med komponenten, kan du legge den til i React-prosjektet ditt ved å trykke en Code-knapp. Du får da opp den nødvendige koden som du kan kopiere og lime inn i prosjektet ditt. Du kan også trykke Fork for å lagre komponenten til ditt eget private bibliotek.
- Er du fornøyd eller misfornøyd, kan du gi tilbakemeldinger til v0 ved å trykke tommel opp eller ned. Det skal bidra til å øke kvaliteten på forslagene etter hvert.
Kommandolinjeverktøy gjør det enklere
Vercel har laget et kommandolinjeverktøy som skal gjøre det enklere å legge komponentene til i React-prosjektet ditt – foreløpig kun for Next.js. Med dette verktøyet slipper du å opprette filer og kopiere og lime inn kode manuelt.
Det er bare å taste inn npx v0 add og en ID til komponenten, så opprettes de nødvendige filene i en ./components-mappe i Next-prosjektet. UI-komponenter fra Shadcn/UI som brukes legges i ./components/ui-mappen.
Før du bruker v0-kommandolinjeverktøyet første gang, må du starte med å lage en v0-konfigurasjon med å skrive inn npx v0@latest init.
V0 fungerer kun med Next.js-prosjekter med TypeScript. Har du laget et React-prosjekt med noe annet, for eksempel med Vite, må du kopiere og lime inn kodesnuttene manuelt. Og du må installere de nødvendige avhengighetene, som er de som brukes av UI-biblioteket Shadcn/ui.
Prosjekt "ny kode24"
Nettsiden til kode24.no inneholder temmelig mye forskjellig og er ganske kompleks, så jeg hadde ingen ambisjoner om å prøve å gjenskape den 100 prosent med v0. Den hadde neppe blitt like fin som den vår utvikler Jørgen har laget uansett.
I stedet ville jeg prøve å se om v0 kan brukes til å lage et enkelt utgangspunkt for en nettside som kode24 – med navigasjonsmeny øverst, og ulike bokser med nyheter nedover på siden.
I stedet for å be v0 lage en hel nettside (som den kan – mer om det lenger ned), ba jeg den om å lage enkeltkomponenter.
Før jeg begynte, opprettet jeg et nytt Next.js-prosjekt ved å taste inn npx create-next-app@latest. Jeg svarte ja på at jeg ville ha TypeScript, siden dette som nevnt er et krav foreløpig (jeg prøvde først uten, og kan spare deg for bryet ved å si at det ikke virker!).
Trinn #1: Navbar
Det første jeg trengte var en navbar. Jeg tok en kikk på hvordan det så ut på kode24.no og tastet inn prompten:
"A navbar with a logo on the left and links to jobb, kalender, podcast. On the right side there should be a search field and a dark/light mode switch".
Dette ble resultatet:
Som det fremgår av bildet over er det tre ulike alternativer, "A", "B", og "C". Jeg valgte alternativ B og ba om litt forbedringer.
Jeg ville at navbaren skulle være mørkegrå og så ville jeg ha teksten "kode24" ved logoen:
Det var bedre! Jeg trykket Code-knappen for å se koden, og klikket så på feltet med kommandoen npx v0 add Eta4c0fGbvx. Den siste kryptiske bokstav- og tallrekken er en unik ID for komponenten v0 nettopp har laget.
Så gikk jeg til terminalen og limte inn denne kommandoen og trykket enter. Da fikk jeg først spørsmål om hva jeg vil kalle komponenten (jeg kalte den navbar!), og noen sekunder senere har v0 opprettet en fil som heter navbar.tsx inne i components-mappen.
Siden komponenten også trengte en input-komponent fra Shadcn/ui til søkefeltet, ble også denne installert og lagt i en ui-undermappe.
Trinn #2: Nyhetsbokser
En nyhetsside uten nyheter er ingen nyhetsside, og etter en ny kikk på kode24-forsiden ser jeg at det er to nyhetsbokser øverst på siden: Først en boks med tre artikler – hvor den første er en stor "toppsak". Og så er det en ny boks med to nyheter under der igjen.
Jeg tenkte dette kunne få være to separate komponenter. For den første komponenten, som jeg kalte TopStories, prøvde jeg med denne prompten:
"A news section with one big article on the left side and two on the right side. Each article should have an image with rounded corners and a title.".
Resultatet virket absolutt fornuftig:
På kode24 vises imidlertid navnet på journalisten under artikkeltittelen, og det ville jeg også ha. Så skrev inn en ny prompt der jeg forlangte å få lagt til en rund "avatar" med journalistnavn ved siden av.
Resultatet ble ok, men av en eller annen grunn ble da bildet til den store artikkelen altfor lite.
Her har v0 en veldig nyttig funksjon. I stedet for å be om endringer på hele komponenten, kan du klikke på den delen du vil forbedre. Jeg klikket på "Pick and edit"-verktøyet og klikket på den største av artikkelboksene. Så tastet jeg inn "The image should fill the whole width of the container".
V0 skjønte hva jeg mente. Resultatet ble omtrent slik jeg ville ha det, og jeg anså meg ferdig med denne komponenten og installerte den i Next-prosjektet mitt som <TopStories />.
Under toppseksjonen med artikler vil jeg ha en ny komponent som viser to artikler ved siden av hverandre. Igjen for å herme etter kode24-forsiden.
For å unngå at v0 plutselig skulle lage en ny komponent som så helt annerledes ut, prøvde jeg meg med følgende prompt: "In the same style, make a new News component with two articles horizontally."
Det så ut til å fungere veldig bra!
Navbaren ville jeg skulle vises på alle nettsider, så den importerte jeg til filen ./app/layout.tsx:
import { Navbar } from '@/components/navbar';
export default function RootLayout({ children }) {
return (
<html lang='nb-NO'>
<body>
<Navbar />
{children}
</body>
</html>
);
}
Og så la jeg til de to nyhetskomponentene jeg nettopp hadde laget i ./app/page.tsx:
import { TopStories } from '@/components/top-stories';
import { TwoStories } from '@/components/two-stories';
export default function Home() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<TopStories />
<TwoStories />
</main>
);
}
Slik ble resultatet
Etter å ha laget komponentene med v0 var det superkjapt å sette dem sammen til noe som fungerte i Next.js. Alt virket med én gang, bortsett fra at jeg måtte finne et "placeholder"-bilde som v0-komponentene kunne bruke. Alt i alt var nettsiden oppe på noen få minutter.
Slik ble siden:
Litt trist og kjedelig sammenlignet med den virkelige kode24.no, kanskje. Men hvis du vil kan du be v0 om å style ting eller be den om å legge på farger eller fargeoverganger.
I stedet for å bare be om enkeltkomponenter,prøvde jeg også å be v0 om å lage en hel nettside med navbar, hero-seksjon og noen bloggposter under dette igjen.
V0 spyttet ut noen forslag som så helt greie ut – uten at det kommer til å vinne noen designpriser. Men det var i hvert fall ryddig, og siden alt er basert på Shadcns utmerkede UI-bibliotek ble det ganske pent.
Ulempen med å be om å få laget en hel nettside, er at React-koden du får fra v0 da gjør hele nettsiden til én enkelt komponent. Det er neppe slik du vil ha det, så derfor tror jeg det er bedre å be om hjelp til mindre enkeltkomponenter, som du så setter sammen i React-applikasjonen din etterpå.
Men du kan selvfølgelig be om en hel nettside hvis du bare vil ha inspirasjon til hvordan du skal designe siden. Eller du kan bare eksportere all HTML/React-koden til hele nettsiden og så kopiere de ulike delene ut til separate komponenter.
Godt utgangspunkt
Etter veldig kjapp testing av v0, er førsteinntrykket bra. Det er egentlig ganske imponerende hva den kan få til.
Én konkret ting som imponerte meg spesielt, var at komponentene jeg fikk var responsive. For eksempel vil nyhetsboksen jeg lagde som var i breddeformat, automatisk vise artiklene under hverandre på små skjermer. En kikk i koden viste at alt var satt opp med CSS grid via Tailwind CSS.
Så det store spørsmålet: Ville jeg brukt v0 i det daglige?
Jeg vet ikke. Hvis du vet hvordan ting skal se ut, og bruker et godt UI-bibliotek som Shadcn/ui, NextUI, TailwindUI eller noe annet, er det ganske raskt å lage ting da også. Jeg synes faktisk det kan være ganske vanskelig å beskrive med tekst hvordan du vil at noe skal se ut, og det blir mye frem og tilbake: "litt større tekst", "nei, det var for stort", osv. Oftere er det raskere å bare gjøre det selv. Selvfølgelig litt avhengig av kodeferdighetene dine.
Der jeg tror v0 kan komme til nytte, er for å hente inspirasjon. Du kan leke deg og få laget forslag til komponenter, og så kan du kikke på koden og bygge videre på dem selv.
«Der jeg tror v0 kan komme til nytte, er for å hente inspirasjon.»
Ellers må det jo nevnes at selv om du får v0 til å lage komponenter du synes ser fine ut, så gjenstår det gjerne litt arbeid.
Det du får ut er temmelig enkle komponenter med statiske eksempeldata. I vårt eksempel med en forside som skal vise nyheter, må komponentene vi lagde selvfølgelig utvides slik at de for eksempel tar imot nyhetene som skal vises som props og viser disse i stedet for "News Article Title 2". Og koden for å hente alt dette fra et API må du også skrive selv.
Derfor byttet han fra Next.js til Astro
Og selv om navbar-komponenten vi lagde ser ut til å ha både søk og en knapp for å bytte mellom lys/mørk modus, så gjør disse feltene og knappene absolutt ingenting. Jeg tror det er en stund til verktøy som v0 faktisk fikser all kodingen du trenger for å lage et bra fungerende nettsted.
Jeg tror altså ikke v0 tar jobbene til noen frontendutviklere ennå, med mindre du er en innmari dårlig frontendutvikler. Men det er et morsomt verktøy å prøve ut, som til tider imponerer.
Har du ikke allerede gjort det, anbefaler jeg at du setter deg på venteliste. Vercel har begynt å gi tilgang til ganske mange de siste dagene, så det er ikke sikkert du behøver å vente like lenge som det jeg gjorde.
