āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ai-elements/v0 ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
An example of how to use the Al Elements to build a vo clone.
Copy Markdown Open
An example of how to use the Al Elements to build a vo clone.
Let's walk through how to build a vo clone using Al Elements and the vO Platform API.
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):
| > Terminal | [ ] 0 | | nox create-next-app@latest ve-clone && cd ve-clone | | | Run the following command to install shadcn/ui and Al Elements. | | | > Terminal | 0 [ ] | | npx shadcn@latest init && npx al-elements@latest | | | Now, install the vo sdk: | | | npm pnpm yarn bun | | | npm i ve-sdk | 0 [ ] |
In order to use the providers, let's configure a vO API key. Create a .env.local in your root directory and navigate to your vO account settings to create a token, then paste it in your .env.local as v@_API_KEY.
We're now ready to start building our app!
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 VO API.
app/page.tsx [ ] 0
'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/a1-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 eatCurrentChatluseStateChat | nu]]>(null).
In this case, we'll also edit the base component components/ai-elements/web-preview. tsx in order to best match
with our theme.
components/ai-elements/web-preview.tax 0 [ ]
return ( <WebPreviewContext. Provider value={contextValue}>
<div className (cn( 'flex size-full flex-col bg-card', // remove rounded-19 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> );Create a new route handler app/api/chat/route.ts and paste in the following code. We use the VO SDK to manage chats.
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(error); return NextResponse.json( { error: 'Internal server error' }, { status: 500 } ); } }
To start your server, run pnpm dev, navigate to localhost:3000 and try building an app!
You now have a working vo clone you can build off of! Feel free to explore the VO Platform API and components like Reasoning and Task to extend your app, or view the other examples.
< Chatbot An example of how to use the AI Elements to build a chatbo...
Workflow > An example of how to use the AI Elements to build a work..
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā