[V0_FILE]typescriptreact:file="components/CodeEditor.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import Editor from '@monaco-editor/react' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' const languages = [ { value: 'html', label: 'HTML' }, { value: 'css', label: 'CSS' }, { value: 'javascript', label: 'JavaScript' }, ] export default function CodeEditor() { const [language, setLanguage] = useState(languages[0].value) const [code, setCode] = useState({ html: '', css: '', javascript: '' }) const [output, setOutput] = useState('') const [prompt, setPrompt] = useState('') const [isGenerating, setIsGenerating] = useState(false) const [isRunning, setIsRunning] = useState(false) const [isSaving, setIsSaving] = useState(false) const handleLanguageChange = (value: string) => { setLanguage(value) } const handleEditorChange = (value: string | undefined) => { setCode(prev => ({ ...prev, [language]: value || '' })) } const generateCode = async () => { setIsGenerating(true) try { const response = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), }) const data = await response.json() if (data.html && data.css && data.javascript) { setCode(data) } else { setOutput('Error generating code') } } catch (error) { console.error('Error generating code:', error) setOutput('Error generating code') } setIsGenerating(false) } const runCode = async () => { setIsRunning(true) setOutput('Running code...') const fullHtml = ` ${code.html} ` setOutput('') setIsRunning(false) } const saveCode = async () => { setIsSaving(true) try { const response = await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(code), }) const data = await response.json() if (data.message) { setOutput('Files saved successfully') } else { setOutput('Error saving files') } } catch (error) { console.error('Error saving files:', error) setOutput('Error saving files') } setIsSaving(false) } return (

setPrompt(e.target.value)} className="flex-grow" />

Output:

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import '@/styles/globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Gemini-powered Code Generator', description: 'Generate and run HTML, CSS, and JavaScript code using Gemini AI', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/VSCodeEditor.tsx" 'use client' import { useState } from 'react' import Editor from '@monaco-editor/react' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' const files = [ { name: 'index.html', language: 'html' }, { name: 'styles.css', language: 'css' }, { name: 'script.js', language: 'javascript' }, ] export default function VSCodeEditor() { const [activeFile, setActiveFile] = useState(files[0].name) const [code, setCode] = useState({ 'index.html': '', 'styles.css': '', 'script.js': '', }) const [output, setOutput] = useState('') const [prompt, setPrompt] = useState('') const [isGenerating, setIsGenerating] = useState(false) const [isRunning, setIsRunning] = useState(false) const [isSaving, setIsSaving] = useState(false) const handleEditorChange = (value: string | undefined) => { setCode(prev => ({ ...prev, [activeFile]: value || '' })) } const generateCode = async () => { setIsGenerating(true) try { const response = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), }) const data = await response.json() if (data.html && data.css && data.javascript) { setCode({ 'index.html': data.html, 'styles.css': data.css, 'script.js': data.javascript, }) } else { setOutput('Error generating code') } } catch (error) { console.error('Error generating code:', error) setOutput('Error generating code') } setIsGenerating(false) } const runCode = async () => { setIsRunning(true) setOutput('Running code...') const fullHtml = ` ${code['index.html']} ` setOutput('') setIsRunning(false) } const saveCode = async () => { setIsSaving(true) try { const response = await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ html: code['index.html'], css: code['styles.css'], javascript: code['script.js'], }), }) const data = await response.json() if (data.message) { setOutput('Files saved successfully') } else { setOutput('Error saving files') } } catch (error) { console.error('Error saving files:', error) setOutput('Error saving files') } setIsSaving(false) } return (

setPrompt(e.target.value)} className="flex-grow" />

{files.map((file) => ( {file.name} ))} {files.map((file) => ( ))}

Output:

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import VSCodeEditor from '@/components/VSCodeEditor' export default function Home() { return (

Gemini-powered Code Generator

) } [V0_FILE]typescript:file="app/api/generate/route.ts" isEdit="true" import { GoogleGenerativeAI } from "@google/generative-ai"; const genAI = new GoogleGenerativeAI("AIzaSyB_q_4nVwcmGsn9mpJEGmnd2cc7RlFnaMk"); export async function POST(request: Request) { const { prompt } = await request.json(); try { const model = genAI.getGenerativeModel({ model: "gemini-pro" }); const result = await model.generateContent(` Create a complete web site based on the following prompt: ${prompt} Respond with three complete code blocks: 1. HTML (including a complete structure with , , , and tags) 2. CSS (with complete styles for the HTML elements) 3. JavaScript (with complete functionality for the web application) Separate each code block with ---DELIMITER--- `); const response = result.response; console.log(result) const text = response.text(); const [html, css, javascript] = text.split('---DELIMITER---').map(code => code.trim()); return new Response(JSON.stringify({ html, css, javascript }), { headers: { 'Content-Type': 'application/json' }, }); } catch (error) { console.error('Error generating code:', error); return new Response(JSON.stringify({ error: 'Failed to generate code' }), { status: 500, headers: { 'Content-Type': 'application/json' }, }); } } [V0_FILE]typescript:file="app/api/save/route.ts" isEdit="true" import { writeFile } from 'fs/promises'; import { join } from 'path'; export async function POST(request: Request) { const { html, css, javascript } = await request.json(); try { const basePath = join(process.cwd(), 'public', 'generated'); await writeFile(join(basePath, 'index.html'), html); await writeFile(join(basePath, 'styles.css'), css); await writeFile(join(basePath, 'script.js'), javascript); return new Response(JSON.stringify({ message: 'Files saved successfully' }), { headers: { 'Content-Type': 'application/json' }, }); } catch (error) { console.error('Error saving files:', error); return new Response(JSON.stringify({ error: 'Failed to save files' }), { status: 500, headers: { 'Content-Type': 'application/json' }, }); } }