Build Full-Stack AI System for Coding Prompts from UI Images

You are to architect and build a complete full-stack AI-powered system that transforms UI images and textual app descriptions into detailed, structured coding prompts optimized for AI-assisted coding tools like BoltNew, Cursor, and v0.dev.
Your system must include:
**Backend (Express.js + Mongoose + MongoDB):**
– Implement JWT-based user authentication (signup, login, session management).
– Design and build REST API endpoints:
– `/api/upload`:
– Accepts UI image uploads.
– Processes them using YOLOv8 or OpenCV to detect UI components (buttons, forms, text fields, images).
– Returns a structured JSON representation of these components.
– `/api/generate-prompt`:
– Accepts text descriptions.
– Uses NLP with OpenAI GPT-4 or Claude AI to identify core features, define UI components, backend routes, and data models.
– Generates comprehensive AI-ready prompts.
– `/api/generate-code`:
– Sends structured JSON prompts to AI coding tools (BoltNew, Cursor, v0.dev).
– Retrieves generated code and returns it.
– Store user profiles and each prompt request history securely in MongoDB.
**Frontend (React.js + Next.js + TailwindCSS):**
– Build a landing page offering users options to upload UI screenshots/designs or input app descriptions.
– Develop an image upload interface with:
– Drag-and-drop support.
– Visual display of detected UI components.
– Presentation of generated AI prompts with copy functionality.
– Create a text-to-prompt page featuring:
– Input for app descriptions.
– Real-time AI prompt suggestions.
– Easy prompt copying.
– Implement a user dashboard that displays past prompts, allows saving, editing, refining, and manages user profile data including API usage.
**AI Integration:**
– Use OpenAI GPT-4, Claude AI, and LangChain for advanced NLP and prompt generation.
– Integrate YOLOv8 or OpenCV for precise UI component detection from images.
– Coordinate prompt preparation optimized specifically for BoltNew, Cursor, and v0.dev coding tools.
**Deployment:**
– Deploy frontend using Vercel.
– Deploy backend on DigitalOcean or AWS, ensuring secure and performant API access.
**Technical and Functional Expectations:**
– Ensure the backend is robust, maintainable, and scalable.
– Secure all API endpoints, sensitive data, and user sessions.
– Structure all outputs cleanly, especially the JSON representing UI elements.
– Optimize AI prompts for maximum clarity and coding tool compatibility.
– Include meaningful error handling and user feedback throughout both frontend and backend.
**Output:**
– Provide functional, maintainable, and well-documented code snippets demonstrating:
– Backend API setup including Express.js server configuration.
– Mongoose models for users and prompts.
– Authentication middleware.
– API routes for image processing and prompt generation.
– React frontend components for each key page as described, styled with TailwindCSS.
– Examples of AI prompt JSON schemas representing detected UI elements and interpreted textual features.
– Code showing integration calls with OpenAI GPT-4 and Claude AI, as well as image processing with YOLOv8 or OpenCV.
Keep your design modular to facilitate scaling and future feature expansion.
# Steps
1. Set up MongoDB with Mongoose schemas for User, PromptRequest, and possibly UIComponent.
2. Implement Express.js backend with JWT-based authentication.
3. Create `/api/upload` for uploaded images, process them with YOLOv8/OpenCV, and return structured UI JSON.
4. Create `/api/generate-prompt` to parse text descriptions using GPT-4 or Claude AI to generate structured AI coding prompts.
5. Create `/api/generate-code` to relay structured prompts to BoltNew, Cursor, and v0.dev APIs, and return the generated code.
6. Build frontend pages as per requirements with React and TailwindCSS.
7. Implement deployment configurations for Vercel (frontend) and DigitalOcean/AWS (backend).
# Output Format
– Provide well-commented, production-ready backend code snippets including:
– Express.js server setup.
– Mongoose models.
– API routes.
– Authentication middleware.
– Provide React component code for frontend pages, styled with TailwindCSS, with state management and API integration.
– Provide JSON schema examples of UI component detection outputs.
– Provide sample AI prompt outputs demonstrating how inputs get transformed.
– Provide code examples of AI integration calls (OpenAI GPT-4, Claude AI) and image processing using YOLOv8/OpenCV.
– The entire code and explanations should be structured, clear, and modular.
# Notes
– Focus on security best practices, especially around JWT and data storage.
– Optimize prompts and processed JSON for use with AI coding tools to maximize accuracy.
– Use environment variables for sensitive credentials.
– Ensure APIs handle errors gracefully and provide meaningful status codes and messages.
– Support extensibility for future new AI tools or UI components.