Speeding up headless Sitecore development through V0.dev
By Derk Hudepol on 11/12/2024
With GenAI becoming more and more advanced, it is very important to understand what you can do with it. One of those fast evolving tools is V0 from Vercel. I will dive into the benefits of V0 and how it can help you build components for Sitecore and such enhance your developing speed.
What is V0?
V0 by Vercel is a tool that makes it easy to add AI-powered features to apps and websites. Whether it’s creating content or completing tasks with AI, V0 simplifies the process so developers can focus on building great experiences. If you’re building something modern and innovative, V0 is here to help make AI a natural part of your work. And not to forget : there is a free tier if you want to try it out which is only limited on the amount of messages you can send per day :)
Lets build a component together
We will start out by opening V0 at v0.dev . Once there we will need to grab a component we want to build. For our guide i went with one of the components that can be found on the sitecore.com website:
The first step we will take when creating a component with V0 is that we will upload the image and ask v0 to generate a component based upon this image.
TIP Be aware that i am asking it to generate a component with a very basic prompt and no further improvements. the first iteration can be better by adding some guidance
after asking V0 to generate a component you will see it will now show the generated code to the right and it will also show a preview of the generated code results. As you can see it is a nice start but it missed some details :
the title and text are not aligned to the left
the font is not completely accurate
icons instead of images
no borders
TIP Be aware that by default V0 uses tailwindcss and shadcdn for generating code. the best outcomes are with these 2 frameworks but if you dont like them you can ask V0 to work without them. I useually exclude shadcdn and it still generated decent code.
Lets take the next step to improve the generated component. we will ask it to align the text, add the surrounding border and change the font to something clsoe to the sitecore website (i chose the Open Sans font)
What you will see is that the result is a lot better. It didn't seem to pickup on the font but i later found out that is a small bug and that if you have it create a separate page and use that in the preview, the font actually shows. As you will see in one of the later screenshots.
TIP i have noticed after working with V0 over a couple of examples, it works best to iterate in smaller steps rather then updating it in one big set. sometimes it gets confused and changes things you dont want to when you take bigger steps
No lets take the next step to improve our component: lets add a border around the components. In this step i will use the selection tool to help v0 identify what i want to change:
Now the result after taking that command:
As you can see V0 took my command literal but didn't really interpret my meaning, this goes to show that it is really important to be very specific with your prompts. Lets try and make it fix the spacing between the borders:
This version is a lot better! Now why i didn't use the selection tool this time: because the context is actually the whole component and not specifically a smaller part of it, it is better to have it look at the whole. That is why i didn't use the selection tool.
TIP you can now see that in this example screenshot the preview is pointing to /promo. Now the right font is actually showing. this is because of my earlier tip around seperate pages
Now lets wrap this up by asking it to convert the icons to images like it is on the Sitecore website:
This is very very close to what we are aiming to achieve. at this point i usually choose to take the code that was generated and make the final tweaks on my own. I do this because when it comes to the small adjustments its usually more time efficient to make the changes on your own.
TIP I haven't done it in my example today but i could have uploaded the 3 images from the Sitecore website and ask it to use those instead of the placeholder images. I didn't do so here because this should become a Sitecore component, meaning all the content will turn into Sitecore fields anyways
Output code
So the big question is : is the code created by V0 any good ? in my opinion the output is quite good. It is nowhere perfect but that is where you can make some improvements or use specific prompts to improve the outcome code. It does heavily depend on if your a fan of Tailwindcss or not, if not you will likely not be a fan of the v0 output. But enough said. Take a look for yourself and judge:
1export default function ThreeColumnPromo() {
2 return (
3 <section className="py-16 px-4 md:px-6 lg:px-8">
4 <div className="max-w-7xl mx-auto border border-gray-200">
5 <div className="p-8 mb-12">
6 <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
7 Why brands choose us
8 </h2>
9 <p className="text-lg text-muted-foreground">
10 Build and create faster with composable, connected, and intelligent solutions.
11 </p>
12 </div>
13
14 <div className="grid grid-cols-1 md:grid-cols-3 border-t border-l border-gray-200">
15 <div className="space-y-4 p-6 border-r border-b border-gray-200 last:border-r-0 md:last:border-r md:last:border-b-0 md:nth-child(3n):border-r-0 md:nth-last-child(-n+3):border-b-0">
16 <div className="w-16 h-16">
17 <img
18 src="/placeholder.svg?height=64&width=64"
19 alt="Total flexibility"
20 className="w-full h-full object-cover"
21 />
22 </div>
23 <h3 className="text-xl font-semibold mt-4">Total flexibility</h3>
24 <p className="text-muted-foreground">
25 Access the best-connected DXP in the industry. Choose the capabilities you need today and add more as your goals and vision evolve.
26 </p>
27 </div>
28
29 <div className="space-y-4 p-6 border-r border-b border-gray-200 last:border-r-0 md:last:border-r md:last:border-b-0 md:nth-child(3n):border-r-0 md:nth-last-child(-n+3):border-b-0">
30 <div className="w-16 h-16">
31 <img
32 src="/placeholder.svg?height=64&width=64"
33 alt="For marketers and technologists"
34 className="w-full h-full object-cover"
35 />
36 </div>
37 <h3 className="text-xl font-semibold mt-4">For marketers and technologists</h3>
38 <p className="text-muted-foreground">
39 Our solutions are meticulously designed—whether it's creating simplicity for marketers, agility for developers, or robust scalability for IT.
40 </p>
41 </div>
42
43 <div className="space-y-4 p-6 border-r border-b border-gray-200 last:border-r-0 md:last:border-r md:last:border-b-0 md:nth-child(3n):border-r-0 md:nth-last-child(-n+3):border-b-0">
44 <div className="w-16 h-16">
45 <img
46 src="/placeholder.svg?height=64&width=64"
47 alt="Unrivalled global ecosystem"
48 className="w-full h-full object-cover"
49 />
50 </div>
51 <h3 className="text-xl font-semibold mt-4">Unrivalled global ecosystem</h3>
52 <p className="text-muted-foreground">
53 Join a 25,000+ strong community of expert customers, developers, and partners—all working to share knowledge and inspiration.
54 </p>
55 </div>
56 </div>
57 </div>
58 </section>
59 )
60}
61
62the component in this example is fairly simple. but i have also used it to create multistep forms including validations and user interactions and the results were actually very useable.
Bonus: improving the code in V0
If you want to improve the output , one of the things you can actually do is ask V0 to extract subcomponents out of the overall component:
this will result in :
What do you still need to do yourself?
We now have a very nice starting code but it is not Sitecore code yet. To finalize a component by V0 i generally take the following steps:
Change all content to Sitecore fields
Make any last minor fixes layout
Make the component compatible with the Pages editor where needed (hidden sections per example)
Off course you can still enhance the component further but with these steps you will have a very good first version of a component
Is V0 worth it ?
in my opinion: absolutely. I have now created several components with it and i estimate it has on average saved me 30-50% of the time needed to build components. I also believe this can be further improvement as i grow familiar with it.
I also know there are other tools out there like Kajoo.ai. If i compare Kajoo and V0 i actually think that Kajoo.ai will probably save you more time if you can start a project from scratch with is since its a end to end tool. However in existing projects not started with Kajoo, V0 is an easier tool to integrate into your process. I also believe these two can work side-by-side as with Kajoo you are more limited in creating interactive components.
End result
You can find the complete chat and code output on my shared block here : Shared block
Make sure to enter the url /promo in the preview. For some reason the root page has broken in my example :)