Build Jarvis app like tonny star .it should chat with me have a voice I also can talk with him with my voice
Generated Prompt
## APPLICATION OVERVIEW The Jarvis app is an interactive voice assistant web application that allows users to communicate with an AI chatbot using both text and voice inputs. The main purpose of this application is to provide a friendly and engaging conversational experience similar to that of a virtual assistant. ## CORE FEATURES 1. **Voice Interaction**: Users can talk to Jarvis using voice commands, enabling hands-free interaction. 2. **Text Chat Support**: Users can also type their queries and receive text responses from Jarvis. 3. **Personalized Responses**: Jarvis learns from user interactions, providing tailored responses and suggestions. 4. **Voice Feedback**: Jarvis responds to users with synthesized voice outputs, enhancing the conversational experience. 5. **Settings Panel**: Users can customize their experience, including voice options and response styles. ## 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 central chat interface with a header for the app title, a main chat area for conversations, and a bottom input area for user interactions (text and voice input). ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui. - **State Management**: Use React Context API or Zustand for managing global state. ## IMPLEMENTATION STEPS 1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components. 2. **Create the Chat Interface**: Build a responsive chat interface including the header, chat area, and input section. 3. **Implement Voice Recognition**: Use the Web Speech API to enable voice input functionality. 4. **Integrate Voice Synthesis**: Implement text-to-speech features to allow Jarvis to respond with voice outputs. 5. **Develop Personalization Logic**: Create functions to store user preferences and adapt responses based on previous interactions. 6. **Style the Application**: Apply Tailwind CSS styles to achieve the minimalist design, ensuring consistent use of the primary color and typography. 7. **Test User Interactions**: Conduct user testing to ensure the app is intuitive and easy to use, making adjustments based on feedback. ## USER EXPERIENCE Users will be greeted with a welcoming interface where they can either type their questions or click a microphone button to speak. The chat area will display the ongoing conversation, allowing users to easily follow along. Jarvis will respond in real-time with both text and voice, creating an engaging and interactive experience. Settings can be accessed for personalization, allowing users to tailor their Jarvis experience to their preferences. The overall design will prioritize clarity and ease of use, ensuring a smooth user journey.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
