Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a simple web app designed to automatically add credits to each interaction with the AI. It responds to user prompts with pre-defined messages while also tracking and displaying the accumulated credits based on the number of interactions. The goal is to create an engaging user experience that encourages interaction while maintaining a clean and minimalist design.

## CORE FEATURES
1. **Automated Responses**: Pre-defined responses are triggered based on user inputs (e.g., "say hello" produces "Hello! How can I help you today?").
2. **Credit System**: Each interaction adds credits to the user's account, which are displayed in real-time.
3. **User Input Tracking**: The app logs user inputs and corresponding responses for better understanding and interaction history.
4. **Dashboard Display**: A simple dashboard that shows the current credit balance and interaction history.
5. **Responsive Design**: The app adapts seamlessly to different screen sizes, ensuring usability on both desktop and mobile devices.

## 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, ensuring readability and a pleasant user experience.
- **Layout**: The main layout will feature a centered input area at the top for user prompts, followed by a display area for AI responses and credit information. The dashboard will be accessible via a side menu or tab.
- **Typography**: Use a sans-serif font for body text (e.g., Arial or Helvetica) with larger, bolder headings to create a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust interactive UI.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design adjustments and a clean codebase.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management for managing user inputs and credit calculations.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build components for input, response display, and the credit dashboard.
   - Input Component: For capturing user prompts.
   - Response Component: To show AI responses dynamically.
   - Dashboard Component: To display the current credits and interaction history.
3. **Implement Automated Responses**: Create a function that maps user inputs to corresponding AI responses and increments the credit count.
4. **Setup State Management**: Use React hooks to manage the state of user inputs, responses, and credit balance.
5. **Style the Application**: Apply Tailwind CSS styles to ensure the app maintains a minimalist and user-friendly appearance.
6. **Test Responsiveness**: Ensure the app works across different devices and screen sizes by testing thoroughly.

## USER EXPERIENCE
Users will interact with the application by typing prompts into the input area. Upon submission, the AI will respond with the appropriate message and update the credit balance. The dashboard will reflect these changes in real-time, providing feedback and encouraging further interactions. The uncluttered layout and intuitive design will help users focus on building their interactions without unnecessary distractions.