Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Connector Hub for JARVIS AI is a secure web application designed to manage integrations with various external applications and services. Users can connect, disconnect, and control their integrations through a modern dashboard interface, ensuring a seamless experience while maintaining strict security protocols.

## CORE FEATURES
1. **Integration Management**: Users can connect and disconnect from various services such as Google, Slack, Discord, and more, with a one-click disconnect feature.
2. **Authorization Control**: JARVIS requests user permission before accessing any app, ensuring user data remains secure at all times.
3. **Activity Logs**: Displays recent activity logs for all connected services, giving users transparency on their interactions.
4. **Connection Status Indicators**: Animated status indicators show the connection status of each service, enhancing the user experience.
5. **Document Management**: Users can read and create documents, draft emails, and manage calendar events across connected services.
6. **AI Integration**: JARVIS can utilize connected AI models to answer questions and perform web searches, making it a versatile tool for productivity.

## 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 feature a sidebar for navigation, a top header for user actions, and a central dashboard area displaying connection cards and activity logs.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux or Context API for handling user states and integrations

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui, Redux).
2. **Design Layout**: Create the layout structure with a sidebar for navigation and a main dashboard area. Use Tailwind CSS for styling.
3. **Implement Authentication**: Set up user authentication to manage account access securely, allowing users to log in and grant permissions to services.
4. **Develop Integration Features**: Create components for managing integrations, including connection cards, status indicators, and activity logs.
5. **Handle Permissions**: Implement logic to request user permissions before accessing any service, ensuring compliance with security requirements.
6. **Integrate AI Features**: Build functionality for JARVIS to utilize connected AI models to perform tasks like answering queries and managing documents.
7. **Testing and Debugging**: Thoroughly test the application for usability, security, and performance issues. Debug any identified issues before deployment.
8. **Deployment**: Deploy the application using platforms like Vercel or Netlify, ensuring that all integrations function correctly in the live environment.

## USER EXPERIENCE
Users will interact with a sleek dashboard where they can easily view and manage their integrations. The connection cards will glow when active, and users can click on each card to access more detailed options or disconnect. Recent activity logs will provide insight into the actions performed by JARVIS, while users can seamlessly navigate between services using the sidebar. The overall experience will focus on simplicity, security, and efficiency, allowing users to maximize their productivity with JARVIS AI.