markdown *Title:* Build a V0.dev-like Web Application with Complete Deployment Flow *Prompt:* Create a fully responsive, production-ready web application inspired by V0.dev, named *PromptForge AI*, that enables users to generate complete websites from natural language prompts and deploy them easily to *Vercel*. Key Features: 1. *Tech Stack:* - Next.js 14 (App Router) - Tailwind CSS for styling - TypeScript for type safety - `localStorage` for storing projects (no external database) 2. *User Interface:* - Clean, minimalistic UI design - Light/Dark mode toggle - Responsive layout for mobile and desktop - Text/image prompt input for website generation 3. *Core Functionality:* - On form submission, send the prompt to the *DeepSeek V3* model via OpenRouter API. - Use the provided API key: `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` - Do not require `organization_id` or any extra parameters. - Parse the API response and display the generated code in a *live preview* panel. - Allow users to save, edit, and delete projects via `localStorage`. - Allow users to download projects as `.zip` files. 4. *Backend:* - Implement the following API route in `app/api/generate/route.ts` to handle prompt submissions:
typescript import { NextResponse } from 'next/server'; export async function POST(req: Request) { const { prompt } = await req.json(); const apiKey = process.env.OPENROUTER_API_KEY; // Call DeepSeek V3 API with prompt and API key const response = await fetch('https://api.openrouter.ai/v3/deepseek', { method: 'POST', headers: { 'Authorization': Bearer ${apiKey}
, 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt }), }); const data = await response.json(); // Return generated code return NextResponse.json(data); } 5. *Debug Panel:* - Display API key validity status. - Show available models. - Log any errors encountered during API calls. 6. *Deployment:* - Ensure the application auto-deploys to *Vercel* without manual configuration. - Include necessary configuration files (such as `vercel.json`, `.env.local`, etc.) for seamless deployment. 7. *Fallback Mechanism:* - If the API call fails, display a *user-friendly mock UI* with an appropriate error message (e.g., "API Error: Failed to generate code, please try again"). Configuration: - Ensure API keys are stored in environment variables (`.env.local`):
bash OPENROUTER_API_KEY="your-api-key-here" VERCEL_TOKEN="your-vercel-token-here" Verification Checklist: - Test the deployment flow with *actual Vercel API*. - Confirm the generated code includes all necessary dependencies. - Ensure *localStorage* persistence works. - Validate *mobile responsiveness*.
Loading...
Loading...