This article explores the process, tools, prompts, challenges, outcomes, and guide for developers, designers, and product teams embracing AI in modern web development.
In this guide, we’ll walk through how to use Vercel v0 to design and prototype frontend applications. Then, we will learn how to connect your v0 project or any frontend project to Strapi AI to structure, manage content, and transform your project to a CMS structure.
Let's get started!
You can view the complete YouTube video for this article below by Alexandre Bodin (Strapi) & Alice De Mauro (Vercel).
Vercel's v0 is not just another AI tool. v0 is your personal coding companion that understands the intricacies of web development. With v0, you can:
Let's explore some v0 features that can enhance productivity and creativity in different roles.
Let's build something with AI, v0, and prompting. The goal is to create a project and Strapi AI will figure out the schema.
We will create a presentation slide through vibe coding.
Here is the prompt:
1Can you make some slides based on vercel.com describing how great is v0,
2showing information about v0 policy: https://v0.dev/policy,
3pick the theme of vercel.com, make 6 slides
v0 can also navigate the web when necessary. With v0, you can also create content directly. It is also your expert in Next.js and Vercel.
Here is the slide it was able to create.
Of course, we could add more information in the prompt such as text, PDFs images, and so on. The good news is that with v0, we could do more for example ask v0 to explain more about a concept to beginners as we will see shortly.
With improved prompts and more input files, prompt results can be enriched further.
Thus we can enhance the slides created earlier by using additional materials such as:
V0 can also be used to generate conceptual blurbs when too lazy to write from scratch. For example, using V0 to summarize complex technical ideas (e.g., rendering strategies) thus highlighting V0's versatility in educational content creation.
Take a look at this example of an interactive animation sequence made with v0:
You can create further animations to explain concepts to someone else which could be Vercel, Next.js, Rendering strategies, etc.
You can upload a .txt
spec and global CSS to generate a documentation website for a game engine. The prompt:
1can you build a web application that is a documentation website on a game engine,
2you find the specs in the Txt file and use all the theming from global.css
v0 will go ahead to generate a complete site using the structure and theming.
Note that uploading CSS allows the reuse of design systems, thus giving you dynamic CSS-based theming, design consistency, options to select/fork versions, and tweak UI elements.
v0 currently does not fully integrate design systems except primitives like Tailwind or Shadcn. However, there are plans to support design systems on the roadmap.
v0 allows you to connect to external REST APIs, databases, and other integrations.
You can connect V0 to a REST API by:
Multiple integrations (Neon, Supabase, etc.) are supported, and knowledge within the project evolves dynamically.
When you create a new project, and you navigate to the project settings, you can set the environment variable, authentication token, data source URL, etc.
Say I want to fetch data from an external API: mockapi.io API as shown below. It is a public API that displays user data with fields createdAt
, name
, avatar
, and id
.
After adding my API URL as an environment variable as shown below:
I can add the following prompt.
1Can you connect to a REST API data source using the API_URL in the environment variable?
2Fetch the names in an array of objects with this schema: [{name:string, id:string}]
This is the result of v0 creating a component to display the fetched data.
Although, still in the Alpha version, v0 will be integrated into Cursor. This means that in your Cursor IDE, you are going to have a Next.js expert, a Vercel expert, and so on.
According to internal chats, v0 integration with Cursor achieved a 98% score in high compatibility with outcomes.
The benchmark for v0 says that, compared to other very famous solutions, v0 has a 98% pass rate on model performance.
So, this is an improvement to the way you will use Cursor and v0 integration for your Next.js applications that you are currently working on by giving you the best it can be. These could be questions for best performance optimization, best rendering strategies, use of App router instead of Pages router, etc.
You can download the output of your v0 project in two ways.
npx shadcn@latest add <link to project>
Also, you can quickly deploy to Vercel.
Background tasks are also supported; Developers get notified upon completion.
Below is a summary of v0's capabilities.
👉 Visit the v0 docs to learn more: https://v0.dev/docs
The idea of Strapi AI was because when we start building from a design or vibe coding with v0, at some point we need to get to production. As such, we need to connect to a CMS since we will be managing a lot of content.
With Strapi AI, we want to streamline that transformation from your project to a CMS structure.
To see Strapi AI in action, you can start by importing a project, say the zip file download of the Game Engine Documentation Site project above.
Let us discover some cool capabilities of Strapi AI.
Here are some cool things the Strapi AI does upon project import
.gitignore
file to avoid unnecessary files.The Strapi AI supports:
Developers can:
Users can import newer versions of frontend code to:
Some little but amazing highlights that come with Strapi AI include:
The new CTB UI (without AI) will launch as a free update. Strapi AI integration will be part of the Growth plan.
👉 Register to get early access to Strapi AI Private beta: https://strapi.io/ai
We have gotten a clear glimpse into the future of web development:
Together, they form a stack for building modern, dynamic, and scalable web applications with AI as a reliable co-pilot.
Theodore is a Technical Writer and a full-stack software developer. He loves writing technical articles, building solutions, and sharing his expertise.