[V0_FILE]typescriptreact:file="modern/layout.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { TemplateCard } from "./template-card" import { QuickActions } from "./quick-actions" import { PromptForm } from "./prompt-form" import { CodeDisplay } from "../components/code-display" export default function ModernLayout() { return (

What can I help you ship?

Starter Templates

App Templates

) } [V0_FILE]typescriptreact:file="modern/template-card.tsx" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" interface TemplateCardProps { title: string description: string image: string } export function TemplateCard({ title, description, image }: TemplateCardProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="modern/quick-actions.tsx" "use client" import { Button } from "@/components/ui/button" import { Camera, Figma, LayoutTemplate, UserPlus, Calculator } from "lucide-react" import { useRouter } from "next/navigation" import { useToast } from "@/components/ui/use-toast" export function QuickActions() { const router = useRouter() const { toast } = useToast() const actions = [ { label: "Clone a Screenshot", icon: Camera, action: () => { const input = document.createElement("input") input.type = "file" input.accept = "image/*" input.onchange = async (e) => { const file = (e.target as HTMLInputElement).files?.[0] if (file) { const formData = new FormData() formData.append("screenshot", file) try { const response = await fetch("/api/clone-screenshot", { method: "POST", body: formData, }) if (!response.ok) throw new Error() toast({ title: "Success", description: "Screenshot cloned successfully", }) } catch { toast({ title: "Error", description: "Failed to clone screenshot", variant: "destructive", }) } } } input.click() }, }, { label: "Import from Figma", icon: Figma, action: () => { toast({ title: "Coming Soon", description: "Figma import feature is coming soon!", }) }, }, { label: "Landing Page", icon: LayoutTemplate, action: () => router.push("/templates/landing-page"), }, { label: "Sign Up Form", icon: UserPlus, action: () => router.push("/templates/sign-up-form"), }, { label: "Calculate Factorial", icon: Calculator, action: () => router.push("/templates/calculator"), }, ] return (

{actions.map((action) => ( ))}

) } [V0_FILE]typescriptreact:file="retro/layout.tsx" import Link from "next/link" import { RetroTemplateCard } from "./retro-template-card" import { RetroQuickActions } from "./retro-quick-actions" import { RetroPromptForm } from "./retro-prompt-form" import { CodeDisplay } from "../components/code-display" export default function RetroLayout() { return (

Web Development System

What can I help you ship?

Starter Templates

App Templates

) } [V0_FILE]typescriptreact:file="retro/retro-template-card.tsx" import Image from "next/image" interface RetroTemplateCardProps { title: string description: string image: string } export function RetroTemplateCard({ title, description, image }: RetroTemplateCardProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="retro/retro-quick-actions.tsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" export function RetroQuickActions() { const router = useRouter() const [message, setMessage] = useState("") const actions = [ { label: "Clone Screenshot", action: () => { const input = document.createElement("input") input.type = "file" input.accept = "image/*" input.onchange = async (e) => { const file = (e.target as HTMLInputElement).files?.[0] if (file) { const formData = new FormData() formData.append("screenshot", file) try { const response = await fetch("/api/clone-screenshot", { method: "POST", body: formData, }) if (!response.ok) throw new Error() setMessage("Screenshot cloned successfully!") } catch { setMessage("Error: Failed to clone screenshot") } } } input.click() }, }, { label: "Import from Figma", action: () => setMessage("Figma import coming soon!"), }, { label: "Landing Page", action: () => router.push("/templates/landing-page"), }, { label: "Sign Up Form", action: () => router.push("/templates/sign-up-form"), }, { label: "Calculate Factorial", action: () => router.push("/templates/calculator"), }, ] return (

{actions.map((action) => ( ))}

{message &&

{message}

}

) } [V0_FILE]css:file="styles/globals.css" @font-face { font-family: "MS_Sans_Serif"; src: url("/fonts/MS_Sans_Serif.woff2") format("woff2"); font-weight: normal; font-style: normal; } @tailwind base; @tailwind components; @tailwind utilities; [V0_FILE]typescriptreact:file="tailwind.config.js" module.exports = { content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { fontFamily: { "ms-sans": ["MS_Sans_Serif", "sans-serif"], }, colors: { win95: { gray: "#c0c0c0", blue: "#000080", }, }, }, }, plugins: [], } [V0_FILE]typescript:file="app/api/generate/route.ts" import { NextResponse } from "next/server" import { generateCode } from "@/lib/ai-sdk" import { experimental_StreamData as StreamData } from "ai" import { experimental_StreamingReactResponse as StreamingReactResponse } from "ai/react" export const runtime = "edge" export async function POST(req: Request) { try { const { prompt, model } = await req.json() const data = new StreamData() const stream = await generateCode({ prompt, model }) return new StreamingReactResponse(stream, { data }) } catch (error) { return NextResponse.json({ error: "Failed to generate code" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/clone-screenshot/route.ts" import { NextResponse } from "next/server" import sharp from "sharp" export async function POST(req: Request) { try { const formData = await req.formData() const file = formData.get("screenshot") as File if (!file) { return NextResponse.json({ error: "No screenshot provided" }, { status: 400 }) } const buffer = Buffer.from(await file.arrayBuffer()) const processedImage = await sharp(buffer).resize(800, null, { fit: "contain" }).toBuffer() // Here you would typically send the image to your AI model // For demo purposes, we'll just return success return NextResponse.json({ success: true, message: "Screenshot processed successfully", }) } catch (error) { return NextResponse.json({ error: "Failed to process screenshot" }, { status: 500 }) } } [V0_FILE]typescript:file="app/actions.ts" isFixed="true" isQuickEdit="true" "use server" import { revalidatePath } from "next/cache" export async function submitPrompt(formData: FormData) { const prompt = formData.get("prompt") const model = formData.get("model") if (!prompt || !model) { throw new Error("Prompt and model are required") } const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/generate`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt, model }), }) if (!response.ok) { throw new Error("Failed to generate response") } const data = await response.json() revalidatePath("/") return data } export async function cloneScreenshot(formData: FormData) { const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/clone-screenshot`, { method: "POST", body: formData, }) if (!response.ok) { throw new Error("Failed to process screenshot") } const data = await response.json() revalidatePath("/") return data } [V0_FILE]typescriptreact:file="modern/prompt-form.tsx" "use client" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Paperclip, Plus, ArrowUp } from "lucide-react" import { submitPrompt, cloneScreenshot } from "../app/actions" import { useToast } from "@/components/ui/use-toast" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function PromptForm() { const [isLoading, setIsLoading] = useState(false) const [prompt, setPrompt] = useState("") const [model, setModel] = useState("openai") const fileInputRef = useRef(null) const { toast } = useToast() async function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsLoading(true) try { const formData = new FormData() formData.append("prompt", prompt) formData.append("model", model) const response = await submitPrompt(formData) toast({ title: "Success", description: "Your prompt has been processed", }) setPrompt("") } catch (error) { toast({ title: "Error", description: "Failed to process your prompt", variant: "destructive", }) } finally { setIsLoading(false) } } async function handleFileUpload(e: React.ChangeEvent) { if (!e.target.files?.[0]) return const formData = new FormData() formData.append("screenshot", e.target.files[0]) try { setIsLoading(true) const response = await cloneScreenshot(formData) toast({ title: "Success", description: "Screenshot processed successfully", }) } catch (error) { toast({ title: "Error", description: "Failed to process screenshot", variant: "destructive", }) } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="retro/prompt-form.tsx" "use client" import { useState, useRef } from "react" import { submitPrompt, cloneScreenshot } from "../app/actions" export function RetroPromptForm() { const [isLoading, setIsLoading] = useState(false) const [prompt, setPrompt] = useState("") const [message, setMessage] = useState("") async function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsLoading(true) setMessage("") try { const formData = new FormData() formData.append("prompt", prompt) const response = await submitPrompt(formData) setMessage("Command processed successfully!") setPrompt("") } catch (error) { setMessage("Error: Failed to process command") } finally { setIsLoading(false) } } return (

) } [V0_FILE]typescript:file="types/index.ts" export interface Template { id: string title: string description: string image: string category: "starter" | "app" } export interface PromptResponse { response: string error?: string } export interface ScreenshotResponse { success: boolean message: string error?: string } [V0_FILE]typescriptreact:file="retro/retro-prompt-form.tsx" "use client" import { useState, useRef } from "react" import { submitPrompt, cloneScreenshot } from "../app/actions" export function RetroPromptForm() { const [isLoading, setIsLoading] = useState(false) const [prompt, setPrompt] = useState("") const [model, setModel] = useState("openai") const [message, setMessage] = useState("") async function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsLoading(true) setMessage("") try { const formData = new FormData() formData.append("prompt", prompt) formData.append("model", model) const response = await submitPrompt(formData) setMessage("Command processed successfully!") setPrompt("") } catch (error) { setMessage("Error: Failed to process command") } finally { setIsLoading(false) } } return (

) } [V0_FILE]typescriptreact:file="components/code-display.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { toast } from "@/components/ui/use-toast" interface CodeDisplayProps { code: string } export function CodeDisplay({ code }: CodeDisplayProps) { const [isCreating, setIsCreating] = useState(false) const handleCreateApp = async () => { setIsCreating(true) try { // Here you would typically send the code to a backend service // that would create a new Next.js app with the generated code await new Promise((resolve) => setTimeout(resolve, 2000)) // Simulating API call toast({ title: "Success", description: "Your app has been created successfully!", }) } catch (error) { toast({ title: "Error", description: "Failed to create the app", variant: "destructive", }) } finally { setIsCreating(false) } } return (

      <Button onClick={handleCreateApp} disabled={isCreating}>
        {isCreating ? "Creating..." : "Create App"}
      </Button>
    </div>
  )
}

[V0_FILE]typescript:file="lib/ai-sdk.ts"
import { experimental_generateText as generateText } from "ai/generate"
import { createParser } from "eventsource-parser"
import { experimental_StreamingReactResponse as StreamingReactResponse } from "ai/react"

export interface GenerateConfig {
  prompt: string
  model: "openai" | "anthropic" | "gemini"
  temperature?: number
  systemPrompt?: string
}

export async function generateCode({
  prompt,
  model,
  temperature = 0.7,
  systemPrompt = "You are v0, an expert React and Next.js developer. Generate modern, accessible, and performant code.",
}: GenerateConfig) {
  const response = await generateText({
    model,
    prompt,
    temperature,
    systemPrompt,
    maxTokens: 4000,
    stopSequences: ["```"],
    topP: 1,
    frequencyPenalty: 0,
    presencePenalty: 0,
  })

  return response
}

export async function streamCode(config: GenerateConfig) {
  const encoder = new TextEncoder()
  const decoder = new TextDecoder()

  const res = await fetch("/api/generate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(config),
  })

  const stream = new ReadableStream({
    async start(controller) {
      const parser = createParser((event) => {
        if (event.type === "event") {
          const data = event.data
          controller.enqueue(encoder.encode(data))
        }
      })

      const reader = res.body?.getReader()
      if (!reader) return

      try {
        while (true) {
          const { done, value } = await reader.read()
          if (done) break
          parser.feed(decoder.decode(value))
        }
      } finally {
        reader.releaseLock()
      }
    },
  })

  return new StreamingReactResponse(stream)
}

[V0_FILE]typescript:file="lib/project-context.tsx"
"use client"

import { createContext, useContext, useReducer, type ReactNode } from "react"

interface ProjectFile {
  path: string
  content: string
}

interface ProjectState {
  files: ProjectFile[]
  activeFile: string | null
  preview: boolean
  isDirty: boolean
}

type ProjectAction =
  | { type: "ADD_FILE"; file: ProjectFile }
  | { type: "UPDATE_FILE"; path: string; content: string }
  | { type: "DELETE_FILE"; path: string }
  | { type: "SET_ACTIVE_FILE"; path: string }
  | { type: "TOGGLE_PREVIEW" }
  | { type: "MARK_CLEAN" }

const ProjectContext = createContext<
  | {
      state: ProjectState
      dispatch: React.Dispatch<ProjectAction>
    }
  | undefined
>(undefined)

const initialState: ProjectState = {
  files: [],
  activeFile: null,
  preview: false,
  isDirty: false,
}

function projectReducer(state: ProjectState, action: ProjectAction): ProjectState {
  switch (action.type) {
    case "ADD_FILE":
      return {
        ...state,
        files: [...state.files, action.file],
        isDirty: true,
      }
    case "UPDATE_FILE":
      return {
        ...state,
        files: state.files.map((file) => (file.path === action.path ? { ...file, content: action.content } : file)),
        isDirty: true,
      }
    case "DELETE_FILE":
      return {
        ...state,
        files: state.files.filter((file) => file.path !== action.path),
        isDirty: true,
      }
    case "SET_ACTIVE_FILE":
      return {
        ...state,
        activeFile: action.path,
      }
    case "TOGGLE_PREVIEW":
      return {
        ...state,
        preview: !state.preview,
      }
    case "MARK_CLEAN":
      return {
        ...state,
        isDirty: false,
      }
    default:
      return state
  }
}

export function ProjectProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(projectReducer, initialState)
  return <ProjectContext.Provider value={{ state, dispatch }}>{children}</ProjectContext.Provider>
}

export function useProject() {
  const context = useContext(ProjectContext)
  if (context === undefined) {
    throw new Error("useProject must be used within a ProjectProvider")
  }
  return context
}

[V0_FILE]typescript:file="lib/template-engine.ts"
import { readFile } from "fs/promises"
import { join } from "path"

export interface Template {
  id: string
  name: string
  description: string
  files: string[]
  dependencies: Record<string, string>
  devDependencies: Record<string, string>
}

export async function loadTemplate(templateId: string): Promise<Template> {
  const templatePath = join(process.cwd(), "templates", templateId)
  const template = JSON.parse(await readFile(join(templatePath, "template.json"), "utf-8"))

  const files = await Promise.all(
    template.files.map(async (file: string) => ({
      path: file,
      content: await readFile(join(templatePath, file), "utf-8"),
    })),
  )

  return {
    ...template,
    files,
  }
}

export async function generateFromTemplate(
  template: Template,
  variables: Record<string, string>,
): Promise<{ path: string; content: string }[]> {
  return template.files.map((file) => ({
    path: file.path,
    content: replaceVariables(file.content, variables),
  }))
}

function replaceVariables(content: string, variables: Record<string, string>): string {
  return content.replace(/\{\{(\w+)\}\}/g, (_, key) => variables[key] || "")
}

[V0_FILE]typescript:file="components/preview-iframe.tsx"
"use client"

import { useEffect, useRef } from "react"
import { useProject } from "@/lib/project-context"

export function PreviewIframe() {
  const iframe = useRef<HTMLIFrameElement>(null)
  const { state } = useProject()

  useEffect(() => {
    if (!iframe.current) return

    const html = generatePreviewHtml(state.files)
    const blob = new Blob([html], { type: "text/html" })
    const url = URL.createObjectURL(blob)

    iframe.current.src = url

    return () => URL.revokeObjectURL(url)
  }, [state.files])

  return (
    <iframe ref={iframe} className="w-full h-full border-0" sandbox="allow-scripts allow-same-origin" title="Preview" />
  )
}

function generatePreviewHtml(files: { path: string; content: string }[]) {
  const indexHtml = files.find((f) => f.path === "index.html")?.content || ""
  const styles = files
    .filter((f) => f.path.endsWith(".css"))
    .map((f) => f.content)
    .join("\n")
  const scripts = files
    .filter((f) => f.path.endsWith(".js"))
    .map((f) => f.content)
    .join("\n")

  return `
    <!DOCTYPE html>
    <html>
      <head>
        <style>${styles}</style>
      </head>
      <body>
        ${indexHtml}
        <script>${scripts}</script>
      </body>
    </html>
  `
}

[V0_FILE]typescript:file="components/code-editor.tsx"
"use client"

import { useCallback, useEffect } from "react"
import { useProject } from "@/lib/project-context"
import { Editor } from "@monaco-editor/react"

interface CodeEditorProps {
  path: string
  content: string
  language: string
}

export function CodeEditor({ path, content, language }: CodeEditorProps) {
  const { dispatch } = useProject()

  const handleChange = useCallback(
    (value: string | undefined) => {
      if (value === undefined) return
      dispatch({ type: "UPDATE_FILE", path, content: value })
    },
    [dispatch, path],
  )

  return (
    <Editor
      height="100vh"
      defaultLanguage={language}
      defaultValue={content}
      onChange={handleChange}
      theme="vs-dark"
      options={{
        minimap: { enabled: false },
        fontSize: 14,
        lineNumbers: "on",
        renderWhitespace: "none",
        tabSize: 2,
        wordWrap: "on",
      }}
    />
  )
}

[V0_FILE]typescript:file="app/api/deploy/route.ts"
import { NextResponse } from "next/server"
import { createDeployment } from "@/lib/deployment"

export async function POST(req: Request) {
  try {
    const { files } = await req.json()

    const deployment = await createDeployment({
      files,
      framework: "next",
      buildCommand: "npm run build",
      installCommand: "npm install",
    })

    return NextResponse.json({ deployment })
  } catch (error) {
    return NextResponse.json({ error: "Failed to create deployment" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="components/workspace.tsx"
"use client"

import { useState } from "react"
import { useProject } from "@/lib/project-context"
import { CodeEditor } from "./code-editor"
import { PreviewIframe } from "./preview-iframe"
import { FileTree } from "./file-tree"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"

export function Workspace() {
  const { state, dispatch } = useProject()
  const [activeTab, setActiveTab] = useState<"editor" | "preview">("editor")

  const activeFile = state.files.find((f) => f.path === state.activeFile)

  const handleDeploy = async () => {
    try {
      const res = await fetch("/api/deploy", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ files: state.files }),
      })

      if (!res.ok) throw new Error("Deployment failed")

      const { deployment } = await res.json()
      window.open(deployment.url, "_blank")
    } catch (error) {
      console.error("Deployment failed:", error)
    }
  }

  return (
    <div className="h-screen flex flex-col">
      <div className="flex items-center justify-between p-4 border-b">
        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "editor" | "preview")}>
          <TabsList>
            <TabsTrigger value="editor">Editor</TabsTrigger>
            <TabsTrigger value="preview">Preview</TabsTrigger>
          </TabsList>
        </Tabs>
        <Button onClick={handleDeploy}>Deploy</Button>
      </div>

      <ResizablePanelGroup direction="horizontal">
        <ResizablePanel defaultSize={20}>
          <FileTree />
        </ResizablePanel>

        <ResizableHandle />

        <ResizablePanel defaultSize={80}>
          <TabsContent value="editor" className="h-full">
            {activeFile && (
              <CodeEditor
                path={activeFile.path}
                content={activeFile.content}
                language={getLanguageFromPath(activeFile.path)}
              />
            )}
          </TabsContent>

          <TabsContent value="preview" className="h-full">
            <PreviewIframe />
          </TabsContent>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

function getLanguageFromPath(path: string): string {
  const ext = path.split(".").pop()
  switch (ext) {
    case "js":
    case "jsx":
      return "javascript"
    case "ts":
    case "tsx":
      return "typescript"
    case "css":
      return "css"
    case "html":
      return "html"
    case "json":
      return "json"
    default:
      return "plaintext"
  }
}

[V0_FILE]typescript:file="components/file-tree.tsx"
"use client"

import { useProject } from "@/lib/project-context"
import { File, Folder } from "lucide-react"
import { cn } from "@/lib/utils"

export function FileTree() {
  const { state, dispatch } = useProject()

  const handleFileClick = (path: string) => {
    dispatch({ type: "SET_ACTIVE_FILE", path })
  }

  const files = organizeFiles(state.files)

  return (
    <div className="p-4">
      <div className="font-mono text-sm">{renderTree(files, "", handleFileClick, state.activeFile)}</div>
    </div>
  )
}

function organizeFiles(files: { path: string; content: string }[]) {
  const tree: any = {}

  files.forEach((file) => {
    const parts = file.path.split("/")
    let current = tree

    parts.forEach((part, i) => {
      if (i === parts.length - 1) {
        current[part] = file
      } else {
        current[part] = current[part] || {}
        current = current[part]
      }
    })
  })

  return tree
}

function renderTree(tree: any, path: string, onFileClick: (path: string) => void, activeFile: string | null) {
  return Object.entries(tree).map(([name, value]) => {
    const currentPath = path ? `${path}/${name}` : name

    if ("content" in value) {
      return (
        <div
          key={currentPath}
          className={cn(
            "flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-gray-100",
            activeFile === currentPath && "bg-gray-100",
          )}
          onClick={() => onFileClick(currentPath)}
        >
          <File className="w-4 h-4" />
          <span>{name}</span>
        </div>
      )
    }

    return (
      <div key={currentPath}>
        <div className="flex items-center gap-2 px-2 py-1">
          <Folder className="w-4 h-4" />
          <span>{name}</span>
        </div>
        <div className="ml-4">{renderTree(value, currentPath, onFileClick, activeFile)}</div>
      </div>
    )
  })
}

[V0_FILE]typescript:file="lib/ai/generation.ts"
import { experimental_StreamingReactResponse } from "ai/react"
import { createParser } from "eventsource-parser"
import { nanoid } from "nanoid"

export interface CodeBlock {
  id: string
  type: "typescript" | "javascript" | "jsx" | "tsx" | "css" | "html"
  content: string
  filename: string
}

export interface GenerationConfig {
  prompt: string
  model: "openai" | "anthropic" | "gemini"
  temperature?: number
}

export async function streamGeneratedResponse(config: GenerationConfig) {
  const encoder = new TextEncoder()
  const decoder = new TextDecoder()

  let currentBlock: CodeBlock | null = null
  const blocks: CodeBlock[] = []

  const res = await fetch("/api/generate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(config),
  })

  const stream = new ReadableStream({
    async start(controller) {
      const parser = createParser((event) => {
        if (event.type === "event") {
          try {
            const data = JSON.parse(event.data)

            if (data.type === "block_start") {
              currentBlock = {
                id: nanoid(),
                type: data.language,
                content: "",
                filename: data.filename,
              }
            } else if (data.type === "block_content") {
              if (currentBlock) {
                currentBlock.content += data.content
              }
            } else if (data.type === "block_end") {
              if (currentBlock) {
                blocks.push(currentBlock)
                currentBlock = null
              }
            } else if (data.type === "text") {
              controller.enqueue(encoder.encode(data.content))
            }
          } catch (e) {
            console.error("Error parsing event:", e)
          }
        }
      })

      const reader = res.body?.getReader()
      if (!reader) return

      try {
        while (true) {
          const { done, value } = await reader.read()
          if (done) break
          parser.feed(decoder.decode(value))
        }
      } finally {
        reader.releaseLock()
      }
    },
  })

  return new StreamingReactResponse(stream, { blocks })
}

[V0_FILE]typescript:file="lib/project/types.ts"
export interface ProjectFile {
  path: string
  content: string
  type: "typescript" | "javascript" | "jsx" | "tsx" | "css" | "html" | "json"
}

export interface Project {
  id: string
  name: string
  description?: string
  files: ProjectFile[]
  dependencies: Record<string, string>
  devDependencies: Record<string, string>
  framework: "next" | "react"
  template?: string
}

export interface Template {
  id: string
  name: string
  description: string
  preview: string
  files: ProjectFile[]
  dependencies: Record<string, string>
  devDependencies: Record<string, string>
}

[V0_FILE]typescript:file="lib/project/manager.ts"
import { nanoid } from "nanoid"
import type { Project, ProjectFile, Template } from "./types"

export class ProjectManager {
  private projects: Map<string, Project> = new Map()

  createProject(name: string, template?: Template): Project {
    const project: Project = {
      id: nanoid(),
      name,
      files: template?.files || [],
      dependencies: template?.dependencies || {},
      devDependencies: template?.devDependencies || {},
      framework: "next",
    }

    this.projects.set(project.id, project)
    return project
  }

  addFile(projectId: string, file: ProjectFile) {
    const project = this.projects.get(projectId)
    if (!project) throw new Error("Project not found")

    project.files.push(file)
    return project
  }

  updateFile(projectId: string, path: string, content: string) {
    const project = this.projects.get(projectId)
    if (!project) throw new Error("Project not found")

    const file = project.files.find((f) => f.path === path)
    if (!file) throw new Error("File not found")

    file.content = content
    return project
  }

  deleteFile(projectId: string, path: string) {
    const project = this.projects.get(projectId)
    if (!project) throw new Error("Project not found")

    project.files = project.files.filter((f) => f.path !== path)
    return project
  }

  getProject(projectId: string): Project | undefined {
    return this.projects.get(projectId)
  }
}

export const projectManager = new ProjectManager()

[V0_FILE]typescript:file="components/block-preview/preview.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { useProject } from "@/lib/project/context"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Editor } from "@monaco-editor/react"
import { Loader2 } from "lucide-react"

interface PreviewProps {
  projectId: string
}

export function BlockPreview({ projectId }: PreviewProps) {
  const { project } = useProject(projectId)
  const [activeFile, setActiveFile] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const previewFrame = useRef<HTMLIFrameElement>(null)

  useEffect(() => {
    if (!project || !previewFrame.current) return

    const html = generatePreviewHtml(project.files)
    const blob = new Blob([html], { type: "text/html" })
    const url = URL.createObjectURL(blob)

    previewFrame.current.src = url
    setIsLoading(false)

    return () => URL.revokeObjectURL(url)
  }, [project])

  if (!project) return null

  return (
    <div className="h-full flex flex-col">
      <div className="border-b p-4 flex items-center justify-between">
        <Tabs value={activeFile || ""} onValueChange={setActiveFile}>
          <TabsList>
            {project.files.map((file) => (
              <TabsTrigger key={file.path} value={file.path}>
                {file.path}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={() => setIsLoading(true)}>
            Refresh
          </Button>
          <Button>Deploy to Vercel</Button>
        </div>
      </div>

      <div className="flex-1 grid grid-cols-2 divide-x">
        <div className="h-full overflow-auto">
          {activeFile && (
            <Editor
              height="100%"
              defaultLanguage={getLanguageFromPath(activeFile)}
              defaultValue={project.files.find((f) => f.path === activeFile)?.content}
              options={{
                readOnly: true,
                minimap: { enabled: false },
                fontSize: 14,
              }}
            />
          )}
        </div>
        <div className="h-full relative">
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center bg-background/80">
              <Loader2 className="h-8 w-8 animate-spin" />
            </div>
          )}
          <iframe ref={previewFrame} className="w-full h-full" sandbox="allow-scripts allow-same-origin" />
        </div>
      </div>
    </div>
  )
}

function generatePreviewHtml(files: Array<{ path: string; content: string }>) {
  const html = files.find((f) => f.path.endsWith(".html"))?.content || ""
  const css = files
    .filter((f) => f.path.endsWith(".css"))
    .map((f) => f.content)
    .join("\n")
  const js = files
    .filter((f) => f.path.endsWith(".js"))
    .map((f) => f.content)
    .join("\n")

  return `
    <!DOCTYPE html>
    <html>
      <head>
        <style>${css}</style>
      </head>
      <body>
        ${html}
        <script>${js}</script>
      </body>
    </html>
  `
}

function getLanguageFromPath(path: string): string {
  const ext = path.split(".").pop()
  switch (ext) {
    case "js":
      return "javascript"
    case "ts":
      return "typescript"
    case "jsx":
      return "javascript"
    case "tsx":
      return "typescript"
    case "css":
      return "css"
    case "html":
      return "html"
    case "json":
      return "json"
    default:
      return "plaintext"
  }
}

[V0_FILE]typescript:file="components/prompt/prompt-form.tsx"
"use client"

import { useState, useTransition } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Paperclip, ArrowUp } from "lucide-react"
import { streamGeneratedResponse } from "@/lib/ai/generation"
import { projectManager } from "@/lib/project/manager"

export function PromptForm() {
  const [prompt, setPrompt] = useState("")
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!prompt.trim()) return

    startTransition(async () => {
      try {
        const stream = await streamGeneratedResponse({
          prompt,
          model: "openai",
        })

        const project = projectManager.createProject("New Project")

        // Handle the streaming response and update the project
        // This would typically involve parsing the response and creating files

        router.push(`/project/${project.id}`)
      } catch (error) {
        console.error("Error generating response:", error)
      }
    })
  }

  return (
    <form onSubmit={handleSubmit} className="relative">
      <Textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask v0 a question..."
        className="min-h-[100px] resize-none pr-20"
        disabled={isPending}
      />
      <div className="absolute right-4 bottom-4 flex items-center gap-2">
        <Button type="button" variant="ghost" size="icon" disabled={isPending}>
          <Paperclip className="h-4 w-4" />
          <span className="sr-only">Attach file</span>
        </Button>
        <Button type="submit" size="icon" disabled={isPending}>
          <ArrowUp className="h-4 w-4" />
          <span className="sr-only">Submit</span>
        </Button>
      </div>
    </form>
  )
}

[V0_FILE]typescript:file="components/templates/template-card.tsx"
import Image from "next/image"
import Link from "next/link"
import type { Template } from "@/lib/project/types"

interface TemplateCardProps {
  template: Template
}

export function TemplateCard({ template }: TemplateCardProps) {
  return (
    <Link
      href={`/template/${template.id}`}
      className="block group rounded-lg border bg-background p-6 transition-colors hover:border-foreground"
    >
      <div className="relative aspect-video mb-4 rounded-lg border bg-muted">
        <Image
          src={template.preview || "/placeholder.svg"}
          alt={template.name}
          fill
          className="object-cover rounded-lg"
        />
      </div>
      <h3 className="font-semibold mb-1">{template.name}</h3>
      <p className="text-sm text-muted-foreground">{template.description}</p>
    </Link>
  )
}

[V0_FILE]typescript:file="components/templates/template-grid.tsx"
import type { Template } from "@/lib/project/types"
import { TemplateCard } from "./template-card"

interface TemplateGridProps {
  title: string
  templates: Template[]
}

export function TemplateGrid({ title, templates }: TemplateGridProps) {
  return (
    <section>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-semibold">{title}</h2>
        <button className="text-sm underline">Request Template</button>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {templates.map((template) => (
          <TemplateCard key={template.id} template={template} />
        ))}
      </div>
    </section>
  )
}

[V0_FILE]typescript:file="app/page.tsx"
import { PromptForm } from "@/components/prompt/prompt-form"
import { TemplateGrid } from "@/components/templates/template-grid"

const starterTemplates = [
  {
    id: "nextjs-shadcn",
    name: "Next.js + shadcn/ui",
    description: "Next.js + Tailwind CSS + shadcn/ui.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
  {
    id: "nextjs-forms",
    name: "Next.js + Forms",
    description: "Server actions and Zod validation.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
  {
    id: "nextjs-charts",
    name: "Next.js + Charts",
    description: "Build charts using shadcn/ui charts.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
]

const appTemplates = [
  {
    id: "ai-chatbot",
    name: "OpenAI and AI SDK Chatbot",
    description: "Chatbot built using the AI SDK and gpt-4o-mini.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
  {
    id: "stripe-checkout",
    name: "Stripe Products and Checkout",
    description: "Stripe products with checkout flow.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
  {
    id: "docs-starter",
    name: "Documentation Starter",
    description: "A Next.js documentation template.",
    preview: "/placeholder.svg?height=200&width=400",
    files: [],
    dependencies: {},
    devDependencies: {},
  },
]

export default function Home() {
  return (
    <main className="container mx-auto px-6 py-12 max-w-5xl">
      <h1 className="text-4xl font-bold text-center mb-8">What can I help you ship?</h1>
      <div className="mb-12">
        <PromptForm />
      </div>
      <div className="space-y-12">
        <TemplateGrid title="Starter Templates" templates={starterTemplates} />
        <TemplateGrid title="App Templates" templates={appTemplates} />
      </div>
    </main>
  )
}

[V0_FILE]typescript:file="components/auth/auth-button.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function AuthButton() {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [email, setEmail] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

    try {
      // Handle authentication here
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setIsOpen(false)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline">Sign In</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Sign in to v0</DialogTitle>
          <DialogDescription>Enter your email to sign in or create an account.</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@example.com"
              required
            />
          </div>
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? "Signing in..." : "Continue with Email"}
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescript:file="app/layout.tsx"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import Link from "next/link"
import { AuthButton } from "@/components/auth/auth-button"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "v0 - AI-powered React Development",
  description: "Build React applications with AI assistance",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="min-h-screen flex flex-col">
          <header className="flex items-center justify-between px-6 py-4 border-b">
            <Link href="/" className="flex items-center space-x-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                className="h-6 w-6"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M22 8.862V15.138c0 .784-.471 1.49-1.195 1.79l-6.328 2.608c-.957.395-2.05.395-3.007 0L5.142 16.928c-.724-.3-1.195-1.006-1.195-1.79V8.862c0-.784.471-1.49 1.195-1.79l6.328-2.608c.957-.395 2.05-.395 3.007 0l6.328 2.608c.724.3 1.195 1.006 1.195 1.79Z" />
              </svg>
              <span className="font-bold text-xl">v0</span>
            </Link>
            <div className="flex items-center space-x-4">
              <AuthButton />
              <Button>Sign Up</Button>
            </div>
          </header>
          {children}
        </div>
      </body>
    </html>
  )
}

[V0_FILE]json:file="package.json"
{
  "name": "v0-complete",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@monaco-editor/react": "^4.6.0",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "ai": "^2.2.31",
    "@anthropic-ai/sdk": "^0.4.3",
    "@google/generative-ai": "^0.1.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "eventsource-parser": "^1.1.1",
    "lucide-react": "^0.294.0",
    "nanoid": "^5.0.4",
    "next": "14.0.3",
    "openai": "^4.20.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20.10.4",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-config-next": "14.0.3",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.6",
    "typescript": "^5.3.3"
  }
}
</article></body></html>