TL;DR
In this article, you will learn how to build a clone of Vercel's V0.dev. This is an awesome project to add to your portfolio and t...
For further actions, you may consider blocking this person and/or reporting abuse
Wow this is really cool! Now we have v1!!
Thank you, Saurabh! Yes, next is v2 😎
Interesting tech stack and really cool 🤠
Thank you Korada
hmmmm
Wow, awesome work!
Thank youu!
This is really cool!
Thank you :)
Nice
Thank you!
Worth to read . Expecting more advance
Thank you, yes more implementations of CopilotKit are coming.
If this actually works then it's cool...
Yep, it works.
v0 as in Vercel's v0?
Yes, Vercel's v0
Awesome work!
Thank you team Shuttle!
Really really cool! 😎
Thank you :)
Niceee, Looks good!! Good job 👌
Thank you, Ricardo.
Great work, Samuel.
Thank you, Bonnie.
This looks like a cool walkthrough. Excited to try it out over the weekend.
Thank you, William!
Didn't think it would be this easy to clone v0!
It took some work though :)
A really cool concept, but unfortunately the tutorial code and the repository shared doesn't work as expected. The HTML preview returns a string like "quMXj6KfFLs7gqzeX_UMJ" instead of working HTML/CSS.
The history sidebar doesn't match the one in your own screenshots, so it gets a bit confusing.
If possible, I would suggest that you run through your guide yourself and see if you run into the same problems, since I noticed another user had the same issues as me. I have double-checked the API key as well, no issues there.
Thank you. Please ensure that you run
npm installto install all dependencies. Here is the repository:github.com/Tabintel/v0-copilot-next
there is an issue with readableCode defined on line 29 in page.tsx. it returns a string that looks like a unique ID.
I had to replace readableCode with codeToDisplay in JSX to make it work
Thank you, Alex. I have updated it with the changes from my local environment. It's now in sync.
This is awsome! I forked it and I'm working on some minor improvements.
I managed to get a complete component made with gpt 4 turbo but it's not being displayed correctly. The code works however, I just copied it into a component file and rendered it.
Here is the generated code
import React from "react";
import { useState } from "react";
const LoginForm = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
console.log({ email, password, rememberMe });
};
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
{" "}
<form
className="p-6 bg-white shadow-md rounded-lg"
onSubmit={handleSubmit}
>
{" "}
<h2 className="text-2xl font-semibold text-gray-800 mb-4">
Login
</h2>{" "}
<div className="mb-4">
{" "}
<label
htmlFor="email"
className="block text-gray-700 text-sm font-bold mb-2"
>
Email Address
</label>{" "}
<input
type="email"
id="email"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>{" "}
</div>{" "}
<div className="mb-4">
{" "}
<label
htmlFor="password"
className="block text-gray-700 text-sm font-bold mb-2"
>
Password
</label>{" "}
<input
type="password"
id="password"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>{" "}
</div>{" "}
<div className="mb-4 flex items-center">
{" "}
<input
type="checkbox"
id="rememberMe"
className="mr-2"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
/>{" "}
<label htmlFor="rememberMe" className="text-sm text-gray-700">
Remember Me
</label>{" "}
</div>{" "}
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Login
</button>{" "}
<div className="mt-4 text-center">
{" "}
<a href="#" className="text-sm text-blue-500 hover:text-blue-700">
Forgot Password?
</a>{" "}
<br />{" "}
<a href="#" className="text-sm text-blue-500 hover:text-blue-700">
Register
</a>{" "}
</div>{" "}
</form>{" "}
</div>
);
};
export default LoginForm;
That's great Alex! I'm glad you tried it out 😎
Have you tried generating other UI components?
While being incredibly general, the repo didn't work for me. Could you please refine it? The concept looks good.
Thank you, Jonathan. Here is the repo:
github.com/Tabintel/v0-copilot-next
This tutorial neither the shared repository with my API KEY worked... doesn't output code just some random letters numbers.
Hi George, please double-check that the GPT-4 API KEY is entered correctly. Here's the repository:
github.com/Tabintel/v0-copilot-next
Are we persisting data by any chance ?
Currently, it's not, that'll involve integrating a database. Let me know if you need help implementing it in your version.