Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application that leverages the Gemini API to read and interpret JSON files containing product information. The main purpose of the application, named VitalNatusIA, is to provide a conversational interface for users to engage with an AI that responds based on the provided knowledge base. It will feature a floating icon that opens a chat window for user interaction.

## CORE FEATURES
1. **Gemini Integration**: Utilize the Gemini API to read JSON files and interpret product data effectively.
2. **Floating Chat Icon**: A persistent floating icon on the website that allows users to initiate conversations with the AI.
3. **Conversational Interface**: A chat window that opens upon clicking the floating icon, enabling users to interact with the AI easily.
4. **Knowledge Base Management**: A section for administrators to upload and manage JSON files that contain the AI's knowledge base.
5. **Token Configuration**: An interface for users to enter their Gemini API token to allow the application to function properly.
6. **JavaScript Embed Code Generation**: Provide users with a simple script that they can incorporate into their websites to enable the chat feature.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a header with the application name, a content area for the chat interface, and a footer for additional information and links. The chat window will be centered on the screen to enhance user engagement.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand (if needed for global state management).

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add required libraries for Tailwind CSS, shadcn/ui, and any other necessary packages.
3. **Create the Floating Icon Component**: Design a floating icon that will trigger the chat window when clicked.
4. **Develop the Chat Window Component**: Create a modal or drawer component that will serve as the chat interface, incorporating a text input for user queries and a display area for AI responses.
5. **Integrate Gemini API**: Build functionality to read JSON files from a specified location, interpret the data, and connect to the Gemini API using the provided token.
6. **Implement Knowledge Base Management**: Allow users to upload JSON files through a user-friendly interface.
7. **Generate Embed Code**: Create a functionality to generate a JavaScript snippet that users can copy and paste into their websites.
8. **Test and Deploy**: Conduct thorough testing of the application to ensure functionality and user experience, followed by deployment to a suitable hosting platform.

## USER EXPERIENCE
Users will interact with the application by clicking the floating chat icon, which opens the chat window. They can type their queries and receive responses from VitalNatusIA based on the knowledge base provided. The interface will be intuitive, ensuring that users can easily input their queries and understand the responses, all while maintaining a clean and minimalist aesthetic. The application will be responsive, ensuring a seamless experience across devices.