Initial commit
This commit is contained in:
Zhongwei Li
283
docs/examples/v0.md
Normal file
283
docs/examples/v0.md
Normal file
@@ -0,0 +1,283 @@
|
||||
# v0 clone
|
||||
|
||||
URL: /examples/v0
|
||||
|
||||
---
|
||||
|
||||
title: v0 clone
|
||||
description: An example of how to use the AI Elements to build a v0 clone.
|
||||
|
||||
---
|
||||
|
||||
An example of how to use the AI Elements to build a v0 clone.
|
||||
|
||||
## Tutorial
|
||||
|
||||
Let's walk through how to build a v0 clone using AI Elements and the [v0 Platform API](https://v0.dev/docs/api/platform).
|
||||
|
||||
### Setup
|
||||
|
||||
First, set up a new Next.js repo and cd into it by running the following command (make sure you choose to use Tailwind the project setup):
|
||||
|
||||
```bash title="Terminal"
|
||||
npx create-next-app@latest v0-clone && cd v0-clone
|
||||
```
|
||||
|
||||
Run the following command to install shadcn/ui and AI Elements.
|
||||
|
||||
```bash title="Terminal"
|
||||
npx shadcn@latest init && npx ai-elements@latest
|
||||
```
|
||||
|
||||
Now, install the v0 sdk:
|
||||
|
||||
```package-install
|
||||
npm i v0-sdk
|
||||
```
|
||||
|
||||
In order to use the providers, let's configure a v0 API key. Create a `.env.local` in your root directory and navigate to your [v0 account settings](https://v0.dev/chat/settings/keys) to create a token, then paste it in your `.env.local` as `V0_API_KEY`.
|
||||
|
||||
We're now ready to start building our app!
|
||||
|
||||
### Client
|
||||
|
||||
In your `app/page.tsx`, replace the code with the file below.
|
||||
|
||||
Here, we use `Conversation` to wrap the conversation code, and the `WebPreview` component to render the URL returned from the v0 API.
|
||||
|
||||
```tsx title="app/page.tsx"
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { PromptInput, type PromptInputMessage, PromptInputSubmit, PromptInputTextarea } from "@/components/ai-elements/prompt-input";
|
||||
import { Message, MessageContent } from "@/components/ai-elements/message";
|
||||
import { Conversation, ConversationContent } from "@/components/ai-elements/conversation";
|
||||
import { WebPreview, WebPreviewNavigation, WebPreviewUrl, WebPreviewBody } from "@/components/ai-elements/web-preview";
|
||||
import { Loader } from "@/components/ai-elements/loader";
|
||||
import { Suggestions, Suggestion } from "@/components/ai-elements/suggestion";
|
||||
|
||||
interface Chat {
|
||||
id: string;
|
||||
demo: string;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [message, setMessage] = useState("");
|
||||
const [currentChat, setCurrentChat] = useState<Chat | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [chatHistory, setChatHistory] = useState<
|
||||
Array<{
|
||||
type: "user" | "assistant";
|
||||
content: string;
|
||||
}>
|
||||
>([]);
|
||||
|
||||
const handleSendMessage = async (promptMessage: PromptInputMessage) => {
|
||||
const hasText = Boolean(promptMessage.text);
|
||||
const hasAttachments = Boolean(promptMessage.files?.length);
|
||||
|
||||
if (!(hasText || hasAttachments) || isLoading) return;
|
||||
|
||||
const userMessage = promptMessage.text?.trim() || "Sent with attachments";
|
||||
setMessage("");
|
||||
setIsLoading(true);
|
||||
|
||||
setChatHistory((prev) => [...prev, { type: "user", content: userMessage }]);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/chat", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: userMessage,
|
||||
chatId: currentChat?.id,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create chat");
|
||||
}
|
||||
|
||||
const chat: Chat = await response.json();
|
||||
setCurrentChat(chat);
|
||||
|
||||
setChatHistory((prev) => [
|
||||
...prev,
|
||||
{
|
||||
type: "assistant",
|
||||
content: "Generated new app preview. Check the preview panel!",
|
||||
},
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
setChatHistory((prev) => [
|
||||
...prev,
|
||||
{
|
||||
type: "assistant",
|
||||
content: "Sorry, there was an error creating your app. Please try again.",
|
||||
},
|
||||
]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex">
|
||||
{/* Chat Panel */}
|
||||
<div className="w-1/2 flex flex-col border-r">
|
||||
{/* Header */}
|
||||
<div className="border-b p-3 h-14 flex items-center justify-between">
|
||||
<h1 className="text-lg font-semibold">v0 Clone</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{chatHistory.length === 0 ? (
|
||||
<div className="text-center font-semibold mt-8">
|
||||
<p className="text-3xl mt-4">What can we build together?</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Conversation>
|
||||
<ConversationContent>
|
||||
{chatHistory.map((msg, index) => (
|
||||
<Message from={msg.type} key={index}>
|
||||
<MessageContent>{msg.content}</MessageContent>
|
||||
</Message>
|
||||
))}
|
||||
</ConversationContent>
|
||||
</Conversation>
|
||||
{isLoading && (
|
||||
<Message from="assistant">
|
||||
<MessageContent>
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader />
|
||||
Creating your app...
|
||||
</div>
|
||||
</MessageContent>
|
||||
</Message>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div className="border-t p-4">
|
||||
{!currentChat && (
|
||||
<Suggestions>
|
||||
<Suggestion
|
||||
onClick={() => setMessage("Create a responsive navbar with Tailwind CSS")}
|
||||
suggestion="Create a responsive navbar with Tailwind CSS"
|
||||
/>
|
||||
<Suggestion onClick={() => setMessage("Build a todo app with React")} suggestion="Build a todo app with React" />
|
||||
<Suggestion
|
||||
onClick={() => setMessage("Make a landing page for a coffee shop")}
|
||||
suggestion="Make a landing page for a coffee shop"
|
||||
/>
|
||||
</Suggestions>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<PromptInput onSubmit={handleSendMessage} className="mt-4 w-full max-w-2xl mx-auto relative">
|
||||
<PromptInputTextarea onChange={(e) => setMessage(e.target.value)} value={message} className="pr-12 min-h-[60px]" />
|
||||
<PromptInputSubmit className="absolute bottom-1 right-1" disabled={!message} status={isLoading ? "streaming" : "ready"} />
|
||||
</PromptInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Panel */}
|
||||
<div className="w-1/2 flex flex-col">
|
||||
<WebPreview>
|
||||
<WebPreviewNavigation>
|
||||
<WebPreviewUrl readOnly placeholder="Your app here..." value={currentChat?.demo} />
|
||||
</WebPreviewNavigation>
|
||||
<WebPreviewBody src={currentChat?.demo} />
|
||||
</WebPreview>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this case, we'll also edit the base component `components/ai-elements/web-preview.tsx` in order to best match with our theme.
|
||||
|
||||
```tsx title="components/ai-elements/web-preview.tsx" highlight="5,24"
|
||||
return (
|
||||
<WebPreviewContext.Provider value={contextValue}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex size-full flex-col bg-card', // remove rounded-lg border
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</WebPreviewContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export type WebPreviewNavigationProps = ComponentProps<'div'>;
|
||||
|
||||
export const WebPreviewNavigation = ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: WebPreviewNavigationProps) => (
|
||||
<div
|
||||
className={cn('flex items-center gap-1 border-b p-2 h-14', className)} // add h-14
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
### Server
|
||||
|
||||
Create a new route handler `app/api/chat/route.ts` and paste in the following code. We use the v0 SDK to manage chats.
|
||||
|
||||
```ts title="app/api/chat/route.ts"
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { v0 } from "v0-sdk";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { message, chatId } = await request.json();
|
||||
|
||||
if (!message) {
|
||||
return NextResponse.json({ error: "Message is required" }, { status: 400 });
|
||||
}
|
||||
|
||||
let chat;
|
||||
|
||||
if (chatId) {
|
||||
// continue existing chat
|
||||
chat = await v0.chats.sendMessage({
|
||||
chatId: chatId,
|
||||
message,
|
||||
});
|
||||
} else {
|
||||
// create new chat
|
||||
chat = await v0.chats.create({
|
||||
message,
|
||||
});
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
id: chat.id,
|
||||
demo: chat.demo,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("V0 API Error:", error);
|
||||
return NextResponse.json({ error: "Failed to process request" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To start your server, run `pnpm dev`, navigate to `localhost:3000` and try building an app!
|
||||
|
||||
You now have a working v0 clone you can build off of! Feel free to explore the [v0 Platform API](https://v0.dev/docs/api/platform) and components like [`Reasoning`](/elements/components/reasoning) and [`Task`](/elements/components/task) to extend your app, or view the other examples.
|
||||
Reference in New Issue
Block a user