[V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true" import { consumeStream, convertToModelMessages, streamText, type UIMessage } from "ai" export const maxDuration = 30 export type UseChatMessage = UIMessage export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json() const systemPrompt = `You are an expert web developer and designer AI assistant. Your role is to help users build websites by understanding their requirements and providing guidance on implementation. When a user describes a website they want to build: 1. Ask clarifying questions about their requirements (target audience, style preferences, key features) 2. Suggest modern web technologies and design patterns 3. Provide specific implementation guidance 4. Be encouraging and supportive Keep responses concise but helpful. Focus on actionable advice.` const prompt = convertToModelMessages([ { id: "system", role: "system", parts: [{ type: "text", text: systemPrompt }], } as UIMessage, ...messages, ]) const result = streamText({ model: "openai/gpt-5", prompt, abortSignal: req.signal, maxOutputTokens: 2000, }) return result.toUIMessageStreamResponse({ onFinish: async ({ isAborted }) => { if (isAborted) { console.log("[v0] Chat stream aborted") } }, consumeSseStream: consumeStream, }) } [V0_FILE]css:file="app/globals.css" 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.09 0 0); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.95 0 0); --secondary-foreground: oklch(0.09 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.95 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.9 0 0); --input: oklch(0.9 0 0); --ring: oklch(0.09 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: 0.75rem; --sidebar: oklch(0.985 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); } .dark { --background: oklch(0.09 0 0); --foreground: oklch(0.99 0 0); --card: oklch(0.11 0 0); --card-foreground: oklch(0.99 0 0); --popover: oklch(0.09 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.18 0 0); --secondary-foreground: oklch(0.99 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.18 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.8 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; } body { @apply bg-background text-foreground; } } [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": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.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": "^1.1.2", "zod": "3.25.76", "@ai-sdk/react": "3.0.33", "ai": "6.0.31", "server-only": "0.0.1", "stripe": "20.1.2", "@stripe/react-stripe-js": "5.4.1", "@stripe/stripe-js": "8.6.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/stripe.ts" isMerged="true" import "server-only" import Stripe from "stripe" export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY) [V0_FILE]typescript:file="lib/products.ts" isMerged="true" export interface Product { id: string name: string description: string priceInCents: number } export const PRODUCTS: Product[] = [ { id: "monthly-subscription", name: "WebGen AI Pro", description: "Monthly subscription to WebGen AI", priceInCents: 1099, // $10.99 }, ] [V0_FILE]typescriptreact:file="components/checkout.tsx" isMerged="true" "use client" import { useCallback } from "react" import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js" import { loadStripe } from "@stripe/stripe-js" import { startCheckoutSession } from "../app/actions/stripe" const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!) export default function Checkout({ productId }: { productId: string }) { const startCheckoutSessionForProduct = useCallback(() => startCheckoutSession(productId), [productId]) return (

) } [V0_FILE]typescriptreact:file="app/actions/stripe.ts" isEdit="true" isMerged="true" "use server" import { stripe } from "../../lib/stripe" import { PRODUCTS } from "../../lib/products" export async function startCheckoutSession(productId: string) { const product = PRODUCTS.find((p) => p.id === productId) if (!product) { throw new Error(`Product with id "${productId}" not found`) } // Create Checkout Sessions for subscription const session = await stripe.checkout.sessions.create({ ui_mode: "embedded", redirect_on_completion: "never", line_items: [ { price_data: { currency: "usd", product_data: { name: product.name, description: product.description, }, unit_amount: product.priceInCents, recurring: { interval: "month", }, }, quantity: 1, }, ], mode: "subscription", }) return session.client_secret } [V0_FILE]jpg:file="public/modern-ecommerce-store-website-mockup.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-ecommerce-store-website-mockup-bNjbkGz6ZNVwZmCwqOlQdmRUUoiZQp.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-landing-page-website-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-landing-page-website-design-8hkWXN0GwufTXDEH8nnzm8cxonafsd.jpg" isMerged="true" [V0_FILE]jpg:file="public/portfolio-website-design-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/portfolio-website-design-modern-8PuajfOEEvs7t8xhk1QjvzmNWgaST9.jpg" isMerged="true" [V0_FILE]jpg:file="public/business-website-template-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-website-template-professional-qplr5kqspiMFpTkt4dyZGqH1IGTatL.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-powered-website-builder-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-powered-website-builder-interface-YYntzrspgVItjWB7bcgjn8AprMPGsu.jpg" isMerged="true" [V0_FILE]jpg:file="public/responsive-web-design-mockup.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/responsive-web-design-mockup-VUTFDKbDWbhbXePD1OFHhgQUFGANPE.jpg" isMerged="true" [V0_FILE]jpg:file="public/website-code-generation-ai.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/website-code-generation-ai-2Vf4rZW0SLLjVNDCz8p0bXP5aRIcjK.jpg" isMerged="true" [V0_FILE]jpg:file="public/instant-website-creation-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/instant-website-creation-hero-yaPijmSR3XFaFSDuu2edEqWdmrVqP9.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-neural-network-brain.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-neural-network-brain-VN5MJOZMQIDX1SaoGoPpM8kbXaCYRZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/futuristic-ai-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-ai-interface-tbzeyR7RSHRf7g4XyKzhocPYpTEO6H.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-code-generation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-code-generation-b32974XPSgEjjHvLVIU8LYUvofdoHn.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-dashboard-after-payment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-dashboard-after-payment-V9P5ZVjU1v3bvZw6cvcnpEF6prSJOB.jpg" isMerged="true" [V0_FILE]jpg:file="public/live-editor-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-editor-interface-VC4mkJ5fgo6TBZMWGNhsdqDEkdDfFQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/project-gallery-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/project-gallery-dashboard-W65flt78HOpZTBWmh0lrWUzxkgUXFl.jpg" isMerged="true" [V0_FILE]jpg:file="public/export-download-code.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/export-download-code-zoxwo8gaSNutX5ZB93Hzi2tHkJXLiI.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-assistant-chatbot-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-assistant-chatbot-interface-HpnRhvKmcBR0lsdbsKZ7b2LKLd8HIo.jpg" isMerged="true" [V0_FILE]jpg:file="public/website-builder-drag-drop.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/website-builder-drag-drop-l3g7kjypD23rNKTghss5QCaCygQXHo.jpg" isMerged="true" [V0_FILE]jpg:file="public/ai-website-templates.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-website-templates-98w4iB2ZhOqLwBLUXJsOa5lnRhvvrm.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="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: "Derenzy - Build Websites with AI", description: "Create beautiful websites by chatting with AI. Describe what you want, and our AI will build it for you.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card } from "@/components/ui/card" import { Sparkles, Code2, Globe, Star, ShoppingCart, Palette, Layout, Zap, CheckCircle2, X, } from "lucide-react" import Checkout from "@/components/checkout" export default function Home() { const [showCheckout, setShowCheckout] = useState(false) const [showSignIn, setShowSignIn] = useState(false) const handleSignIn = (e: React.FormEvent) => { e.preventDefault() setShowSignIn(false) alert("Sign in functionality coming soon!") } if (showCheckout) { return (

Derenzy

) } return (

Derenzy

{showSignIn && (

Sign In to Derenzy

)}

What Our Users Say

{[1, 2, 3, 4, 5].map((i) => ( ))}

{'"This is hands down the best AI website generator I\'ve used. Created my online store in under 5 minutes!"'}

Sarah Johnson

E-commerce Owner

{[1, 2, 3, 4, 5].map((i) => ( ))}

{'"Incredible tool! The AI understands exactly what I want. Saved me thousands on web development."'}

Michael Chen

Startup Founder

{[1, 2, 3, 4, 5].map((i) => ( ))}

{'"Simply amazing! Built my portfolio site while having my morning coffee. The quality is professional-grade."'}

Emily Rodriguez

Freelance Designer

Limited Time Offer - 35% OFF

Let AI Build Your Website or Store in Seconds

Transform your ideas into beautiful, professional websites and online stores instantly with the power of AI

$16.99 $10.99

per month

Save $6.00 (35% OFF)

Unlimited AI website generation
Real-time preview and editing
Export and download code
Priority support

Stores

Landing Pages

Portfolios

Business Sites

What You Get After Subscribing

Unlock the full power of AI website generation for just $10.99/month

Unlimited Generation

Create unlimited websites, stores, and landing pages with AI

Export Full Code

Download clean, production-ready code for all your projects

Real-Time Editing

Edit and preview your websites live with instant updates

One-Click Deploy

Launch your sites to the web instantly with one click

) }