I Built an Alternative to v0 Using Copilot

yf-yang — Tue, 17 Dec 2024 12:11:41 +0000

v0.dev is an AI-assisted coding service launched by Vercel, the company behind Next.js. I've been using it to generate UI interfaces with excellent results. Unfortunately, it appears that free users are limited to 10 conversation rounds per day.

Since I have GitHub Copilot, I decided to leverage its capabilities to create a simple alternative called v0-copilot. While it doesn't match v0's full functionality, optimizing my personal workflow allows it to provide a decent level of coding assistance. I'm sharing it here in hopes of improving everyone's productivity and encouraging more people to help enhance this project.

Repository: https://github.com/yf-yang/v0-copilot

What Can v0-copilot Do?

v0's capabilities extend beyond generating UI interfaces; it can create entire projects or websites. In the v0-vscode version, I've focused on component generation. Specifically, my goal is to create a tool similar to v0 to facilitate the following workflow:

Input a Component Description and Generate Its Code
Preview the Generated Component in Real Time

By interactively repeating these two steps, once satisfied, I can migrate the component to other projects.

During my use of v0, the real-time preview feature left a strong impression. It allowed me to adjust the final presentation of the component directly during the conversation, without concerning myself with the generated code (intermediate results), thereby greatly enhancing the coding experience.

The Technology Stack of the Output

Adhering to Vercel's Next.js ecosystem, I expect the generated components to be React components using Shadcn's UI library and styled with Tailwind CSS. Of course, this is just a conceptual framework. By configuring prompts and other inputs for the language model, you can adapt it to your specific needs.

How It Works

Prompt

The current version of GitHub Copilot supports a special file called .github/copilot-instructions.md. This file affects all Copilot Chats in the workspace. I modified a prompt based on a project called dewhale and included it there.

Real-Time Preview of Generated Components

First, we need an environment to preview code changes in real time. Any toolchain that supports Hot Module Replacement can achieve this. For simplicity, starters like Create React App with webpack can be used. However, I chose Storybook because it naturally separates the component itself from its preview cases. In Storybook, developers can quickly switch between and view the component's behavior under different input parameters, providing a better experience.

Enabling the Language Model to Use Shadcn's Components

Currently, the outputs of large language models are limited by the input context. To provide sufficient information to the model, there are two approaches:

Include Shadcn's component information in the prompt.
Place Shadcn's component information into the workspace and direct the model to access it.

Ideally, the second approach is more elegant. However, due to limitations in the current implementation of Copilot Chat, the model isn't very effective at autonomously searching the documentation for material and emulating it. Therefore, we copied the documentation and component code from the Shadcn repository into the current repository and retained many examples from dewhale in the prompt to guide the model's output.

Limitations

The main limitations stem from GitHub Copilot. Due to its internal prompt settings, the model cannot always accurately access the intended locations. This affects the developer's experience in the following ways:

When conversing with Copilot, you need to explicitly specify the two files to be modified (the source Component.ts and the corresponding Storybook file Component.stories.ts), or it may not update the correct files.
When chatting with Copilot, you must include the #codebase tag, which better guides Copilot to retrieve the necessary files from the entire codebase. Without specifying this tag, Copilot may still attempt to search for files but may not always succeed.

Results

Personal Experience and Reflections

I found that Claude-3.5-sonnet produced better results than GPT-4o-preview. The GPT series models seemed to have difficulty understanding the relationship between Storybook and components.
Despite the requirements specified in the prompt, these models did not adequately consider component generality. Without explicit instructions, they generally did not add props to components.
Possibly because the prompt included many examples covering various layouts but lacked examples of color usage, the models' color schemes were not ideal.
Although this workflow is primarily suitable for component generation, Copilot can also be used for code modifications. Therefore, I recommend the following workflow:
1. Creating Files: When you need to create files, discuss with Copilot to determine the folder structure of the entire repository, then create the files for it to fill in (I'm not certain it can create files autonomously).
2. Writing New Components: Create new components in the v0-copilot project, adjust the layout, and then migrate them to your repository.
3. Making Detailed Modifications: Use Copilot for fine-tuning.

Let's Collaborate to Build an Efficient Workflow

This has been my attempt, and if it can help you, feel free to create your own repository based on this template to enhance your development efficiency. Additionally, while this project is limited to the VSCode + React + ShadcnUI tech stack, if you wish to create a similar tool for your own stack, I hope this provides some reference. You're also welcome to open-source your implementation!

Forem: yf-yang