[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@ai-sdk/react": "2.0.72", "ai": "5.0.72", "shaders": "2.1.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" isMerged="true" import { consumeStream, convertToModelMessages, streamText, type UIMessage } from "ai" export const maxDuration = 30 export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json() const prompt = convertToModelMessages(messages) const result = streamText({ model: "anthropic/claude-sonnet-4.5", prompt, abortSignal: req.signal, system: "You are a helpful AI assistant. Provide clear, concise, and accurate responses.", }) return result.toUIMessageStreamResponse({ onFinish: async ({ isAborted }) => { if (isAborted) { console.log("[v0] Chat request aborted") } }, consumeSseStream: consumeStream, }) } [V0_FILE]typescript:file="app/api/generate-image/route.ts" isEdit="true" isMerged="true" import { generateText } from "ai" export const maxDuration = 30 export async function POST(req: Request) { try { const { prompt, referenceImage } = await req.json() if (!prompt) { return Response.json({ error: "No prompt provided" }, { status: 400 }) } const messages: any[] = [] if (referenceImage) { messages.push({ role: "user", content: [ { type: "image", image: referenceImage, }, { type: "text", text: prompt, }, ], }) } const result = await generateText({ model: "google/gemini-2.5-flash-image-preview", prompt: messages.length > 0 ? undefined : prompt, messages: messages.length > 0 ? messages : undefined, }) const images = [] for (const file of result.files) { if (file.mediaType.startsWith("image/")) { images.push({ base64: file.base64, mediaType: file.mediaType, }) } } if (images.length > 0) { const imageDataUrl = `data:${images[0].mediaType};base64,${images[0].base64}` return Response.json({ imageUrl: imageDataUrl, text: result.text, usage: result.usage, }) } else { return Response.json({ error: "No image was generated" }, { status: 500 }) } } catch (error) { console.error("Error generating image:", error) return Response.json({ error: "Failed to generate image" }, { status: 500 }) } } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.99 0 0); --foreground: oklch(0.09 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.09 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.09 0 0); --primary: oklch(0.28 0 0); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.09 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.96 0 0); --accent-foreground: oklch(0.09 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.92 0 0); --input: oklch(0.92 0 0); --ring: oklch(0.28 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0rem; /* removed border radius */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); /* Add smooth transition for theme switching */ transition: background-color 0.3s ease, color 0.3s ease; } .dark { --background: oklch(0.09 0 0); --foreground: oklch(0.99 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.99 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.99 0 0); --primary: oklch(0.99 0 0); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.99 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.2 0 0); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.6 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; /* Add smooth transition to all elements for theme changes */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Ensure html and body fill viewport and don't create extra space */ html, body { @apply h-full w-full; overflow-x: hidden; } body { /* Remove bg-background to let shader show through */ @apply text-foreground; } /* Dialogue bubble tails */ .bubble-message { animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useChat } from "@ai-sdk/react" import { DefaultChatTransport } from "ai" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { ArrowUp, Upload, X, Download, Moon, Sun } from "lucide-react" import { useRef, useEffect, useState } from "react" import { Shader, Pixelate, SineWave, SolidColor } from "shaders/react" type Mode = "chatbot" | "image" type Theme = "light" | "dark" export default function ChatPage() { const [mode, setMode] = useState("chatbot") const [theme, setTheme] = useState("light") const [imagePrompt, setImagePrompt] = useState("") const [generatedImage, setGeneratedImage] = useState(null) const [isGenerating, setIsGenerating] = useState(false) const [referenceImage, setReferenceImage] = useState(null) const [referenceFile, setReferenceFile] = useState(null) const [isDragging, setIsDragging] = useState(false) const [isFullscreen, setIsFullscreen] = useState(false) useEffect(() => { const savedTheme = localStorage.getItem("theme") as Theme | null const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches if (savedTheme) { setTheme(savedTheme) document.documentElement.classList.toggle("dark", savedTheme === "dark") } else if (systemPrefersDark) { setTheme("dark") document.documentElement.classList.add("dark") } }, []) const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light" setTheme(newTheme) localStorage.setItem("theme", newTheme) document.documentElement.classList.toggle("dark", newTheme === "dark") } const { messages, sendMessage, status } = useChat({ transport: new DefaultChatTransport({ api: "/api/chat" }), }) const messagesEndRef = useRef(null) const inputRef = useRef(null) const fileInputRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) useEffect(() => { const handleDragOver = (e: DragEvent) => { e.preventDefault() e.stopPropagation() if (e.dataTransfer?.types.includes("Files")) { setIsDragging(true) } } const handleDragLeave = (e: DragEvent) => { e.preventDefault() e.stopPropagation() if (e.target === document.body || e.target === document.documentElement) { setIsDragging(false) } } const handleDrop = async (e: DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) const files = e.dataTransfer?.files if (files && files.length > 0) { const file = files[0] if (file.type.startsWith("image/")) { setMode("image") setReferenceFile(file) const reader = new FileReader() reader.onloadend = () => { setReferenceImage(reader.result as string) } reader.readAsDataURL(file) } } } document.addEventListener("dragover", handleDragOver) document.addEventListener("dragleave", handleDragLeave) document.addEventListener("drop", handleDrop) return () => { document.removeEventListener("dragover", handleDragOver) document.removeEventListener("dragleave", handleDragLeave) document.removeEventListener("drop", handleDrop) } }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const formData = new FormData(e.currentTarget) const message = formData.get("message") as string if (message.trim()) { sendMessage({ text: message }) e.currentTarget.reset() inputRef.current?.focus() } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() const form = e.currentTarget.form if (form) { form.requestSubmit() } } } const handleReferenceImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { setReferenceFile(file) const reader = new FileReader() reader.onloadend = () => { setReferenceImage(reader.result as string) } reader.readAsDataURL(file) } } const clearReferenceImage = () => { setReferenceImage(null) setReferenceFile(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } const handleDownloadImage = () => { if (!generatedImage) return const link = document.createElement("a") link.href = generatedImage link.download = `generated-image-${Date.now()}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) } const handleUseAsReference = () => { if (!generatedImage) return setReferenceImage(generatedImage) setImagePrompt("") setGeneratedImage(null) } const handleGenerateImage = async () => { if (!imagePrompt.trim()) return setIsGenerating(true) setGeneratedImage(null) try { const response = await fetch("/api/generate-image", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt: imagePrompt, referenceImage, }), }) const data = await response.json() setGeneratedImage(data.imageUrl) } catch (error) { console.error("Error generating image:", error) alert("Error generating image. Please try again.") } finally { setIsGenerating(false) } } return ( <>

{isDragging && (

Drop image to edit

)} {isFullscreen && generatedImage && (

setIsFullscreen(false)} > Generated fullscreen

e.stopPropagation()} />

)}

AI Gateway Starter

{mode === "chatbot" ? "anthropic/claude-sonnet-4.5" : "google/gemini-2.5-flash-image-preview"}

{mode === "chatbot" ? ( <>

{messages.length === 0 ? (

Start a conversation

) : (

{messages.map((message) => (

{message.parts.map((part, index) => { if (part.type === "text") { return (

{part.text}

) } return null })}

))} {status === "in_progress" && (

)}

) : ( <>

Text to Image

Reference Image (Optional)

{referenceImage && ( )}

{referenceImage && (

)}

Prompt setImagePrompt(e.target.value)} placeholder={ referenceImage ? "Describe how to modify the image..." : "Describe the image you want to generate..." } className="font-mono h-8 text-sm" onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleGenerateImage() } }} autoFocus />

{generatedImage && ( )}

{generatedImage ? (

setIsFullscreen(true)} />

) : (

Preview will appear here

)}

read more about AI Gateway • open in v0 • feedback? dm to @estebansuarez

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "v0 AI Gateway Starter", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This