[V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ClusterAI", description: "AI-powered crypto trading assistant", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/sidebar.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { LayoutDashboard, ArrowLeftRight, Wallet, History, Table2, Users, UserCircle } from "lucide-react" export function Sidebar() { return (

ClusterAI

$0.00

) } [V0_FILE]typescriptreact:file="app/components/trade-table.tsx" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export interface Trade { id: string time: string coin: string status: "Pending" | "Requested" | "Completed" size: string orderValue: string price: string } interface TradeTableProps { trades: Trade[] onAccept: (id: string) => void } export function TradeTable({ trades, onAccept }: TradeTableProps) { return ( Time Coin Status Size Order Value Price Action {trades.map((trade) => ( {trade.time} {trade.coin} {trade.status} {trade.size} {trade.orderValue} {trade.price} {trade.status === "Requested" && ( )} ))}

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 25 95% 53%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 25 95% 53%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="app/api/chat/route.ts" import { openai } from "@ai-sdk/openai" import { streamText } from "ai" export async function POST(req: Request) { const { messages } = await req.json() const lastMessage = messages[messages.length - 1] const buyCommand = lastMessage.content.match(/^buy\s+(\w+)/i) if (buyCommand) { const token = buyCommand[1].toUpperCase() const confirmation = `Confirmed: Buying ${token}. A new trade has been added to your table.` return new Response(JSON.stringify({ content: confirmation, role: "assistant" })) } const response = streamText({ model: openai("gpt-4-turbo"), messages, system: "You are ClusterAI, an AI trading assistant. You help users analyze crypto market data and make trading decisions. Be concise and professional.", temperature: 0.7, maxTokens: 500, }) return response.toDataStreamResponse() } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { useChat } from "ai/react" import { Button } from "@/components/ui/button" import { Sidebar } from "./components/sidebar" import { ChatInterface } from "./components/chat-interface" import { TradeTable, type Trade } from "./components/trade-table" import { v4 as uuidv4 } from "uuid" export default function Page() { const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ api: "/api/chat", }) const [trades, setTrades] = useState([ { id: "1", time: "09/01/2025, 04:00 UTC", coin: "BTC", status: "Pending", size: "0.011 BTC", orderValue: "$1,000", price: "$95,000", }, { id: "2", time: "10/01/2025, 04:00 UTC", coin: "BTC", status: "Requested", size: "0.010 BTC", orderValue: "$1,000", price: "$95,500", }, { id: "3", time: "11/01/2025, 04:00 UTC", coin: "BTC", status: "Completed", size: "0.021 BTC", orderValue: "$1,000", price: "$94,000", }, ]) useEffect(() => { const lastMessage = messages[messages.length - 1] if (lastMessage?.role === "assistant" && lastMessage.content.startsWith("Confirmed: Buying")) { const token = lastMessage.content.split(" ")[2] const newTrade: Trade = { id: uuidv4(), time: new Date().toUTCString(), coin: token, status: "Requested", size: `0.01 ${token}`, orderValue: "$1,000", price: "$100,000", } setTrades((prevTrades) => [...prevTrades, newTrade]) } }, [messages]) const handleAcceptTrade = (id: string) => { setTrades((prevTrades) => prevTrades.map((trade) => (trade.id === id ? { ...trade, status: "Completed" } : trade))) } return (

ClusterAI

) } [V0_FILE]typescriptreact:file="app/components/chat-interface.tsx" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { SendHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" import type { Message } from "ai" import { useEffect, useRef } from "react" interface ChatInterfaceProps { messages: Message[] input: string handleInputChange: (e: React.ChangeEvent) => void handleSubmit: (e: React.FormEvent) => void isLoading: boolean } export function ChatInterface({ messages, input, handleInputChange, handleSubmit, isLoading }: ChatInterfaceProps) { const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) return (

{messages.length === 0 && (

BRAIN:~$ Welcome to ClusterAI. How can I assist you with crypto trading today?

)} {messages.map((message) => (

{message.role === "assistant" ? "BRAIN:~$ " : "YOU:~$ "} {message.content}

))} {isLoading &&

BRAIN:~$ ▋

}

) }