Sitecore Symposium 2024: AI-Powered Component Generation

Howdy folks!

A few weeks ago, I had the privilege of attending Sitecore Symposium 2024 in Nashville Tennessee. This was my first time attending Symposium, and I wasn’t quite sure what to expect. What I found was a ton of like-minded Sitecore fanatics with lots of cool and new information to share.

This post is the first in a series of takeaways from Sitecore Symposium. This year’s conference had a heavy focus on AI. So today, I wanted to talk about a cool, new AI component generator tool.

Vercel’s v0.dev

If you don’t know about Vercel, it’s a cloud-hosting platform that maintains the next.js framework. Vercel is closely aligned with Sitecore, and allows for easy integration with platforms like XM Cloud for hassle-free deployments.

Vercel had a booth set up at Symposium where they were demoing their new v0.dev AI tool. There’s a lot that this tool can do but I want to focus on it’s component generation capability.

v0, I learned is named as such because it gives a “version 0” jumping off point. Essentially, you can feed it a prompt and get a basic component that you can then tailor to your needs.

The tool is really easy to use, and in just seconds I was demoed a pretty nifty looking component. I’ve since used v0.dev to create my own components, of which I’ve showcased below.

Let’s generate a promo component…

The example that was demoed to me was a simple 3-up promo component. All you need to do is feed the tool a prompt indicating that you want it to generate the component.

I saw this and instantly thought it would be perfect for explaining new components to clients. It could show them what certain components will look like. This is particularly useful before the wire framing and design phases of a project. I think this would really help non-technical folks get a grasp on what us developers are building for them!

Let’s run with this idea as our use case:

We want to showcase a mock-up of a 3-up component to a client prior to developing it. We’ll use v0.dev to give them a general idea of what they can expect.

Let’s start with the first prompt:

Generate me a 3-up promo component

It’s really that simple.

Once you’ve typed your prompt, just hit enter and the magic starts!

From that point, v0.dev will quickly generate the component, providing you with an explanation, source code and rendered output of the component. It took 5 seconds for it to start generating, and about 15 seconds until I saw the rendered component. Lightning fast!

The component is rendered on the right, while the explanation and info is listed on the left.

As mentioned, it also gives you the source code. You can take this source code and refine it to fit your needs.

three-up-promo.tsx

import { Zap, Shield, Rocket } from "lucide-react"

interface PromoItem {
  icon: React.ElementType
  title: string
  description: string
}

const promoItems: PromoItem[] = [
  {
    icon: Zap,
    title: "Lightning Fast",
    description: "Experience blazing speeds with our optimized performance."
  },
  {
    icon: Shield,
    title: "Secure & Reliable",
    description: "Your data is safe with our top-notch security measures."
  },
  {
    icon: Rocket,
    title: "Easy to Use",
    description: "Get started quickly with our intuitive user interface."
  }
]

export default function Component() {
  return (
    <section className="py-12 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {promoItems.map((item, index) => (
            <div key={index} className="flex flex-col items-center text-center">
              <div className="mb-4 p-2 bg-primary rounded-full">
                <item.icon className="w-8 h-8 text-primary-foreground" />
              </div>
              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
              <p className="text-muted-foreground">{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

You can also ask the AI tool to refine it for you. While you won’t be able to solely rely on the tool completely, you can get a pretty good head start.

You may want to further and adjust the component to use a client’s brand colors. Let’s assume we want a blue and yellow color scheme, and ask v0.dev to change the theme. Time for our first follow up prompt:

Can you change the colors to use a blue and yellow theme?

Simply ask v0.dev to change the theme to your liking.

Plugging a follow up prompt then gives us this:

Pretty cool huh?

You can even go as far as to adjust the component’s sample content to better fit a client’s business. Check out as I ask v0.dev to change the content to be more suited for a hospital. Let’s submit another prompt:

Can you change the example content to be more related to the healthcare sector?

Maybe our client’s business is healthcare related? Let’s ask the tool to update the sample content!

Within a couple of seconds, we’re shown this:

Is this the end of Lorem Ipsum? 😉

Let’s say you’re finally ready to demo this to the client. During the meeting the client wants to see what this would look like if there was more promos. What do you do? Well it’s just as easy to adjust the component on the fly! Let’s turn it into a carousel using another prompt:

Can you change the component to be a 3-up promo carousel instead?

Again, after just a few moments we’re given this:

This carousel quickly came around!

This final step took a few tries to get right. The first time I ran the prompt, the tool froze while generating the preview. Luckily there’s a “retry” button if things didn’t come out as expected. After running it again, it worked like a charm!

Of course, remember to always thank your AI chatbot! Stay on their good side ;).

You can find the full prompt and response history below:

Prompts and responses

Generate me a 3-up promo component

I’ll create a 3-up promo component for you using React and Tailwind CSS. This component will showcase three promotional items side by side, each with an icon, title, and description. It’s a common pattern used in marketing websites to highlight key features or benefits.

Here’s the implementation of the 3-up promo component:

3-up Promo

three-up-promo.tsx

This component creates a responsive 3-up promo section. Here’s a breakdown of its features:

We define a PromoItem interface to type our promo items, ensuring consistency in the data structure.
The promoItems array contains the data for our three promotional items, including the icon, title, and description for each.
The component uses a grid layout that adjusts based on screen size:
- On mobile devices, it displays as a single column.
- On medium-sized screens and larger, it displays as three columns.
Each promo item is displayed in a flex column layout, centering the content.
Icons are displayed within a circular background using the primary color of your theme.
The component uses Tailwind’s built-in responsive classes and color scheme variables, making it easy to customize and integrate with your existing design system.
The section has a light gray background (bg-gray-50) to make it stand out from surrounding content.

This component is fully responsive and should work well in various contexts within a marketing or product website. You can easily customize the content, colors, and layout to fit your specific needs.

Can you change the colors to use a blue and yellow theme?

I’ll modify the component to use a blue and yellow color theme. We’ll use blue as the primary color and yellow as an accent color. I’ll adjust the background, text, and icon colors to reflect this new theme.

Here’s the updated 3-up promo component with a blue and yellow theme:

3-up Promo Blue Yellow

three-up-promo-blue-yellow.tsx

Here are the changes I made to implement the blue and yellow theme:

Changed the section background color to a light blue shade: bg-blue-50.
Updated the icon background to yellow: bg-yellow-400.
Changed the icon color to a medium blue: text-blue-600.
Set the title text color to a darker blue for contrast: text-blue-700.
Adjusted the description text color to match the icon color: text-blue-600.

These color changes create a vibrant blue and yellow theme while maintaining good contrast and readability. The light blue background provides a subtle backdrop that doesn’t overpower the content, while the yellow accents in the icon backgrounds add a pop of color and draw attention to each item.

You can further adjust these colors by changing the number values (e.g., blue-50, blue-600, blue-700) to find the exact shades of blue and yellow that match your desired theme.

Remember, if you’re using a custom color palette in your Tailwind configuration, you might need to adjust these color classes to match your specific color names or use CSS custom properties.

Can you change the example content to be more related to the healthcare sector?

I’ll modify the 3-up promo component to use content related to the healthcare sector while maintaining the blue and yellow color theme.

Here’s the updated 3-up promo component with healthcare-related content:

Healthcare Promo

healthcare-promo.tsx

Here are the changes I made to adapt the component to the healthcare sector:

Updated the imported icons to use more healthcare-related ones:
- Stethoscope for expert care
- Clock for 24/7 availability
- Users for patient-centered approach
Modified the promoItems array with new healthcare-focused content:
- “Expert Care” highlights the quality of medical services
- “24/7 Availability” emphasizes round-the-clock access to healthcare
- “Patient-Centered Approach” focuses on personalized and compassionate care
Kept the blue and yellow color scheme as requested:
- Light blue background (bg-blue-50)
- Yellow icon backgrounds (bg-yellow-400)
- Blue icons and text (text-blue-600, text-blue-700)
Maintained the responsive grid layout and overall structure of the component

This updated component now showcases key aspects of a healthcare service while maintaining the vibrant blue and yellow theme. The content emphasizes important features that patients often look for in healthcare providers: expertise, availability, and patient-focused care.

The component remains fully functional and can be easily integrated into a healthcare-related website or application. You can further customize the content, icons, or colors as needed to match your specific healthcare organization’s branding and messaging.

Can you change the component to be a 3-up promo carousel instead?

I’ll modify the component to be a 3-up promo carousel that displays all three healthcare-related items at once while still allowing for rotation. This will combine the benefits of the original 3-up layout with the interactivity of a carousel.

Here’s the updated component as a 3-up promo carousel:

Healthcare 3-up Carousel

healthcare-3up-carousel.tsx

Here’s an explanation of the changes and features in this 3-up promo carousel:

Expanded the promoItems array to include six items total, allowing for more content rotation.
Changed the state management to use startIndex instead of currentIndex, as we’re now showing three items at once.
Modified the nextSlide and prevSlide functions to rotate through the items one at a time.
Created a visibleItems array that always contains the three items to be displayed, based on the current startIndex.
Updated the JSX to map over the visibleItems array, displaying all three items at once in a grid layout.
Maintained the auto-advance functionality, accessibility features, and keyboard navigation from the previous version.
Kept the blue and yellow color scheme consistent with the previous designs.
Ensured the component is responsive by using a single column layout on mobile (grid-cols-1) and three columns on medium and larger screens (md:grid-cols-3).
Retained the navigation buttons on the left and right sides of the carousel for manual control.

This 3-up promo carousel component now displays all three healthcare-related items simultaneously while still providing the interactive, rotating functionality of a carousel. It maintains the requested color scheme, is fully accessible, and provides both automatic and manual navigation options. The component is complete and ready to use without any placeholders or sections to be filled in.

Thank you!

You’re welcome! I’m glad I could help create that internal reminder. Is there anything else you’d like me to do or any questions you have about web development, React components, or any other topic I can assist with?

Overall Thoughts

I found v0.dev to be incredibly fun and useful to play around with. While I only went over a simple example above, there’s much more that you can do with this. I plan to continue to tinker around with it and find new and exciting things to use this for.

When speaking with the Vercel reps at Symposium, they informed me that there is still much to come to v0.dev. One thing in particular that piqued my interest was better integration with Sitecore, including proper template field mapping. I thought that was pretty interesting, and I am excited to see what else is coming!

Do I think that this replaces the need for developers? Absolutely not. This is a starting point tool and should not be used as a final product. Use this to save time or as simple visuals when written explanations aren’t enough.

This is a great tool to start learning react & next.js development if you’re the learn-by-example type (like me!).

If you have any thoughts or ideas on how you’d use or have used v0.dev, let me know in the comments below!

Happy component generating!