Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a full-stack AI coding platform called Claude Opus VibeCoder. It aims to provide developers with an interactive environment where they can leverage AI capabilities for coding tasks, including code editing, refactoring, and project management, all integrated with GitHub for seamless workflow.

## CORE FEATURES
1. **Chat System**: A left panel chat interface that offers streaming AI responses, Markdown rendering, syntax highlighting, and context-aware conversation history.
2. **Project Management**: Users can create new projects, upload ZIP files, or connect their GitHub repositories for automatic cloning, dependency installation, and live development server setup.
3. **Code Editor**: A Monaco-based code editor that supports syntax highlighting, IntelliSense, multi-language support, and various editing features such as auto-formatting and multi-cursor editing.
4. **Live Preview**: A right panel that renders live previews of projects in a sandboxed iframe, displaying real-time updates and error overlays.
5. **AI Capabilities**: The AI can read entire repositories, refactor code, create and modify files, generate documentation, and suggest improvements.
6. **Version Control Integration**: Internal Git features allow for snapshot management, rollback options, and commit history tracking directly from the platform.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: A two-panel layout with a left chat interface and a right live code preview. The code editor occupies the bottom half of the left panel, while the file explorer is integrated within the left side for easy navigation.
- **Typography**: Use SF Pro Bold for headings and SF Pro Rounded for body text, ensuring a clear hierarchy and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and clean UI components.
- **UI Components**: Utilize shadcn/ui for modern and accessible UI elements.
- **State Management**: Redux or Context API as needed for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript. Install Tailwind CSS and shadcn/ui for styling.
2. **Create Core Components**:
   - Implement the left panel for the chat interface and code editor.
   - Implement the right panel for live code preview and output display.
3. **Integrate AI Engine**: Set up the Claude Opus API for AI interactions, ensuring secure storage of API keys server-side.
4. **Build Project Management Features**: Develop functionality for users to create, upload, and connect to GitHub repositories, including automatic parsing and setup.
5. **Develop the Code Editor**: Integrate the Monaco editor with features like syntax highlighting, IntelliSense, and multi-language support.
6. **Implement Live Preview**: Create a sandboxed iframe for live project previews, including auto-refresh and error handling.
7. **Set Up Version Control**: Integrate Git functionalities for commits, branches, and snapshot management.

## USER EXPERIENCE
Users will engage with the platform by initiating a project through the chat interface, uploading or connecting a GitHub repository, and interacting with the AI for coding tasks. They can edit code directly in the Monaco editor, view real-time changes in the live preview, and manage project files effortlessly through an intuitive file explorer. The platform will maintain context awareness, allowing users to reference specific files and code snippets within their conversations with the AI, enhancing productivity and collaboration.