Develop a user-friendly and responsive website. The website should have a UI similar to the uploaded picture. Ensure the design is fully responsive, adapting seamlessly to various screen sizes and devices. Prioritize ease of navigation and an intuitive user experience. The website should be built using Next.js.. Build a highly professional, fully responsive, and production-ready web application named "AI Website Builder". This application should enable users to generate complete websites from text descriptions and optional images, featuring a modern developer-friendly three-column dark-themed layout inspired by the provided reference image.

⚙️ Core Functionality

1. User Interface (UI)

• Three-Column Layout:
  • Left Sidebar: Collapsible sidebar with "New Project" button and localStorage-based project list.
  • Center Panel: Large, resizable textarea for website description and drag-and-drop image upload component with preview & validation.
  • Right Panel: Live Preview in sandboxed iframe with proper sandbox attributes for security.

2. Generation Flow

• Input: User fills textarea (text description) + uploads image (optional).
• On "Generate" Click:
  • Validate input using Zod/Yup.
  • Call Qwen2.5 APIs:
    • For Text Input: Use Qwen2.5 Coder 32B Instruct API (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).
    • For Image Input: Use Qwen2.5 VL 72B Instruct API (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).
  • Return JSON with file structure:

    {
      "files": [
        { "name": "index.html", "content": "..." },
        ...
      ]
    }
    

3. Live Preview

• Inject generated files into iframe with sandbox & Content Security Policy (CSP).

4. Download

• Use jszip to create a .zip archive of all generated files for download.

5. Vercel Deployment

• Validate generated files.
• Deploy using Vercel API Token (SHU2Yy6oxmDg4gBAkvxamdYR) via /api/deploy/route.ts.
• Secure deployment with Authorization middleware.
• Display deployment status/toast.

🛡️ Security Measures

• API Input Validation: Use Zod/Yup for validation.
• Rate Limiting: Implement rate limiting per IP using nextjs-rate-limit.
• Error Handling: Use try/catch blocks with user-friendly toast notifications.
• XSS Protection: Use iframe sandbox & Content Security Policy (CSP).
• CORS: Restrict origin using Next.js middleware.

📂 Code Structure

• /app/
  • /api/generate/route.ts: AI generation logic.
  • /api/deploy/route.ts: Vercel deployment logic.
• /components/
  • Sidebar.tsx, Editor.tsx, Preview.tsx.
• /hooks/
  • useThemeToggle, useProjectStore.
• /lib/
  • apiClient.ts, downloadUtils.ts.
• /styles/
  • tailwind.config.ts.

✅ Additional Enhancements

• Drag-and-drop image preview with react-dropzone.
• Toast notifications with shadcn/ui.
• Robust error boundaries.
• Modular & clean code with strict TypeScript.

🎨 Design Inspiration

• Refer to the design of https://v0.dev for UI/UX inspiration.
• Ensure light/dark mode support with toggle switch in the header.

🌟 Output Requirements

• Generate complete Next.js projects with all necessary files (HTML, CSS, JS).
• Ensure cross-browser compatibility and responsiveness.
• Provide live previews, downloads, and deployments.
• Handle errors gracefully and provide feedback to users.

🚀 Deployment

• Use Vercel API Token for one-click deployment.
• Ensure secure and reliable deployment process.

📝 Notes

• Use environment variables for sensitive data (API keys, tokens).
• Implement comprehensive testing and validation to ensure smooth functionality across devices and browsers.
• Maintain modular and maintainable codebase.

🏆 Goal

• Build an AI-Powered Website Builder that is intuitive, efficient, and production-ready.
• Ensure seamless integration of AI models for both text and image inputs.
• Provide a high-quality user experience with live previews, downloads, and deployments.

---

🚀 Final Prompt

Build a highly professional, fully responsive, and production-ready web application named "AI Website Builder". This application should enable users to generate complete websites from text descriptions and optional images, featuring a modern developer-friendly three-column dark-themed layout inspired by the provided reference image. Use the following APIs:

• Qwen2.5 Coder 32B Instruct API Key: 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
• Qwen2.5 VL 72B Instruct API Key: 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
• Vercel API Token: SHU2Yy6oxmDg4gBAkvxamdYR

Ensure comprehensive error handling, security measures, and a modular codebase. The application should provide live previews, downloadable code, and one-click deployment to Vercel. Follow the design inspiration from https://v0.dev and ensure cross-browser compatibility and responsiveness.