v0 by Vercel

Vercel offers a new service called v0. By using this service, you can easily develop web components using generative AI. This document introduces the standard procedure for using v0.

Introducing v0

Vercel is a company that provides services for hosting various applications. They also offer Next.js, a useful tool for building websites.

The v0 service, which we will cover this time, allows you to create web components using generative AI.

v0 by Vercel

When you access the site, a simple page where you just need to enter commands is displayed as shown below.

v0 by Vercel

You can input prompts on this screen to generate various UIs. Japanese UI is also available in the preview.

v0 by Vercel Japanese

About Pricing Plans

There are plans for using v0, ranging from a free plan with limited usage and features to a subscription plan. For evaluation purposes, you can use the free plan to test it out.

Refer to the following page for pricing plans.

Plans and Pricing

Creating Components

Generating with Chat

This time, we specified the following prompt in the chatbox in Japanese.

Create a list of 12 topics for the top page of a blog site, arranged in 4 columns on large screens, 2 columns on small screens, and vertically on smartphones.

The generated screen is as follows.

Blog Home

Add a project to save the generated component. Select Project from the menu on the left, and create a new project with New Project. This time, name it Blog.

Project

After creating the project, go back to the component you created earlier and click the Deploy button in the upper right corner. The project to deploy will be displayed, so specify Blog.

Deploy

After a while, the component you created will be deployed to Vercel.

Preview

As a result, you can check the page as shown below.

Preview

Checking the Generated Code

You can check the code from the screen above by clicking the tab on the right.

Code

The generated code is as follows.

import { topics } from '@/lib/data';
import { TopicCard } from '@/components/TopicCard';

export default function Home() {
  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="mb-8 text-center text-3xl font-bold">Blog Topics</h1>
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {topics.map((topic) => (
          <TopicCard key={topic.id} topic={topic} />
        ))}
      </div>
    </main>
  );
}

import Image from 'next/image';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Topic } from '@/lib/types';

export function TopicCard({ topic }: { topic: Topic }) {
  return (
    <Card className="h-full">
      <CardHeader className="p-0">
        <Image
          src={topic.imageUrl}
          alt={topic.title}
          width={300}
          height={200}
          className="h-48 w-full rounded-t-lg object-cover"
        />
      </CardHeader>
      <CardContent className="p-4">
        <CardTitle className="mb-2 text-lg">{topic.title}</CardTitle>
        <p className="text-muted-foreground text-sm">{topic.description}</p>
      </CardContent>
    </Card>
  );
}

import { Topic } from './types';

export const topics: Topic[] = [
  {
    id: 1,
    title: 'Introduction to Web Development',
    description: 'Learn the basics of HTML and CSS for web development',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 2,
    title: 'Basics of React',
    description: 'Introduction to React for modern frontend development',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 3,
    title: 'Node.js Backend',
    description: 'Build applications with server-side JavaScript',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 4,
    title: 'Database Design',
    description: 'Techniques for efficient data management',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 5,
    title: 'UI/UX Design',
    description: 'Basic principles of design to enhance user experience',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 6,
    title: 'API Design and Implementation',
    description: 'Design and implement RESTful APIs',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 7,
    title: 'Security Measures',
    description: 'Best practices for web application security',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 8,
    title: 'Performance Optimization',
    description: 'Techniques to improve website speed and efficiency',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 9,
    title: 'Cloud Computing',
    description: 'Utilize cloud services like AWS and Azure',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 10,
    title: 'Introduction to Machine Learning',
    description: 'Basics and applications of machine learning for programmers',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 11,
    title: 'Mobile App Development',
    description: 'Cross-platform development for iOS and Android',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
  {
    id: 12,
    title: 'DevOps Practices',
    description: 'Achieving continuous integration and delivery',
    imageUrl: '/placeholder.svg?height=200&width=300',
  },
];

export type Topic = {
  id: number;
  title: string;
  description: string;
  imageUrl: string;
};

Using Components in Next.js

Creating a Next.js Project

We will use the created components directly in Next.js. Let’s prepare a vanilla Next.js project and display the components. First, create a Next.js project.

npx create-next-app@14.2.18

Create the project as follows.

Code

To make it a Next.js project without sample content, delete the sample data. The changes are as follows.

export default function Home() {
  return (
    <main>
      <h1>Next.js Sample</h1>
    </main>
  );
}

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, Next.js is ready.

Adding Created Components

To use the components created with v0, there is a command provided in the management screen’s upper right corner to add the code.

Add to Codebase

Execute the provided command at the top of the Next.js project. For the initial installation, the following prompts will appear.

Install shadcn@2.1.6: Yes
Create Components.json: Yes
Style: New York
Base color: Neutral
CSS Variables: Yes
Overwrite page.tsx: Yes

After the above settings, the project will be automatically updated.

Update project

The following files will be added or updated. The added files are highlighted.

components.json
package-lock.json
package.json
tailwind.config.ts
Directorysrc
- Directoryapp
  - globals.css
  - page.tsx
- Directorycomponents
  - Directoryui
    card.tsx
  - TopicCard.tsx
- Directorylib
  - data.ts
  - types.ts
  - utils.ts

Running the Project

Now the created components have been added to the project. Run the following command.

npm run dev

The result is as follows, displaying the screen created with v0.

Preview

When executed, the component generation is successful, but errors are also displayed.

Preview

This occurs because the images are not available in the public directory. Create the following SVG file.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#ddd" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#aaa" font-size="20">
    Placeholder
  </text>
</svg>

After placing the above file, the following error message appears.

The requested resource "/placeholder.svg?height=200&width=300" has type "image/svg+xml" but dangerouslyAllowSVG is disabled

To enable the use of SVG files, apply the following settings to next.config.js.

// next.config.msj
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

Now the created image is displayed.

Preview

The sample code up to this point is available on GitHub.

haramizu / Next.js-sample - v0-sample-app

Generating UI from Images

This time, we will access the top page of the Sitecore XM Cloud documentation site and proceed with creating components from its screenshot.

Prepare the image
Upload it to the v0 prompt
Execute the component generation. After a while, the component will be generated, and you can check the component information and preview as shown below.
Open the preview to see that items like dropdown menus are also generated.

Thus, it is possible to create components using images.

Sitecore Integration

The components generated so far were based on Next.js, but now v0.dev can output results that have learned from Sitecore Documentation information. Simply add #sitecore to the prompt to support it.

As shown above, you can easily obtain a prototype for use with Sitecore Headless SXA using v0.dev.

Add #sitecore to the prompt and execute it.
```
Create carousel component #sitecore
```
After a while, two files will be generated. Note that the preview cannot be executed as there is no Sitecore environment.

The generated code includes the following:
- Implementation of the carousel using react-slick
- Fields image, title, and description are assumed to be retrieved from Sitecore.
```
export type CarouselProps = ComponentProps & {
  fields: {
    items: {
      fields: {
        image: Field<string>;
        title: Field<string>;
        description: Field<string>;
      };
    }[];
  };
};
```
Execute the following prompt additionally on the above result.
```
change package to embla carousel #sitecore
```
After a while, the implementation of the created component was changed to the code based on Embla Carousel.

Summary

This time, we confirmed the procedure for generating sample components for use in Next.js using v0. It is very convenient to be able to generate not only from prompts but also from images.

References

v0 by Vercel

haramizu / Next.js-sample - v0-sample-app

Update History

2024-12-16 Added information about #sitecore support by v0.dev - Sitecore Integration