[V0_FILE]typescriptreact:file="page.tsx" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, SendHorizontal, Sparkles } from "lucide-react" export default function Home() { return (

{/* Navigation */} {/* Main Content */}

What can I help with?

{/* Message Input */}

) } [V0_FILE]typescriptreact:file="layout.tsx" isQuickEdit="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( ChatBotX {children} ) } [V0_FILE]css:file="styles/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: 0 0% 9%; --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; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="pages/api/chat.ts" import type { NextApiRequest, NextApiResponse } from "next" import { streamText } from "ai" import { openai } from "@ai-sdk/openai" export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ error: "Method not allowed" }) } try { const { messages } = req.body const response = await streamText({ model: openai("gpt-4o"), prompt: messages.map((m: any) => `${m.role}: ${m.content}`).join("\n") + "\nAssistant:", onChunk: ({ chunk }) => { if (chunk.type === "text-delta") { res.write(chunk.text) } }, }) res.end() } catch (error) { console.error("Error in chat API:", error) res.status(500).json({ error: "An error occurred while processing your request." }) } } [V0_FILE]typescriptreact:file="pages/index.tsx" isFixed="true" isQuickEdit="true" isDeleted="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, SendHorizontal, Sparkles } from "lucide-react" type Message = { role: "user" | "assistant" content: string } export default function Home() { const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(scrollToBottom, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim()) return const userMessage: Message = { role: "user", content: input } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: [...messages, userMessage] }), }) if (!response.ok) { throw new Error("Failed to fetch response") } const reader = response.body?.getReader() const decoder = new TextDecoder() let assistantMessage = "" while (true) { const { done, value } = await reader!.read() if (done) break const chunk = decoder.decode(value) assistantMessage += chunk setMessages((prev) => [...prev.slice(0, -1), { role: "assistant", content: assistantMessage }]) } } catch (error) { console.error("Error:", error) } finally { setIsLoading(false) } } return (

{messages.map((message, index) => (

{message.content}

))}

) } [V0_FILE]typescriptreact:file="pages/_app.tsx" import "@/styles/globals.css" import type { AppProps } from "next/app" function MyApp({ Component, pageProps }: AppProps) { return } export default MyApp [V0_FILE]typescriptreact:file="pages/_document.tsx" import { Html, Head, Main, NextScript } from "next/document" export default function Document() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, SendHorizontal, Sparkles } from "lucide-react" type Message = { role: "user" | "assistant" content: string } export default function Home() { const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(scrollToBottom, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim()) return const userMessage: Message = { role: "user", content: input } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: [...messages, userMessage] }), }) if (!response.ok) { throw new Error("Failed to fetch response") } const reader = response.body?.getReader() const decoder = new TextDecoder() let assistantMessage = "" while (true) { const { done, value } = await reader!.read() if (done) break const chunk = decoder.decode(value) assistantMessage += chunk setMessages((prev) => [...prev.slice(0, -1), { role: "assistant", content: assistantMessage }]) } } catch (error) { console.error("Error:", error) } finally { setIsLoading(false) } } return (

{messages.map((message, index) => (

{message.content}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/styles/globals.css" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "ChatBotX", description: "A ChatGPT clone", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" import { NextResponse } from "next/server" import { streamText } from "ai" import { openai } from "@ai-sdk/openai" export async function POST(req: Request) { try { const { messages } = await req.json() const stream = streamText({ model: openai("gpt-4o"), prompt: messages.map((m: any) => `${m.role}: ${m.content}`).join("\n") + "\nAssistant:", }) return new NextResponse(stream) } catch (error) { console.error("Error in chat API:", error) return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 }) } }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This