Overview
This prompt aims to guide developers in creating a minimalistic AI chatbot web application with PWA support. Programmers and coding enthusiasts will benefit from the clear specifications and technical requirements provided.
Prompt Overview
Purpose: This web application serves as an AI chatbot interface with PWA support for enhanced user experience.
Audience: It targets users seeking interactive and engaging AI conversations in a minimalistic design.
Distinctive Feature: The application features animated AI responses using typewriter.js and a visually appealing gradient background.
Outcome: Users can easily initiate chats, view history, and interact with the AI in a seamless manner.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Animation & VFX, Content & Media Creation, Development Tools & DevOps
- Techniques: Function Calling / Tool Use, Role/Persona Prompting, Structured Output
- Models: Gemini 2.0 Flash
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a web application with PWA support that functions as an AI chatbot interface.
The UI should be minimal and plain, with no title or extraneous text. Specifically, implement the following design and interactive elements:
– Chat bubbles:
– User messages appear in gradient dark blue chat bubbles.
– AI responses appear in black chat bubbles.
– AI response display:
– Use the typewriter.js library to animate the AI’s replies with fast typing effects.
– Loading indicator:
– Include a simple small spinner to indicate loading.
– Background:
– The chatbot interface background should be a linear gradient from black at the top to green at the bottom.
– Send button:
– Add a send button with an icon.
– Disable text highlighting on all elements, including the send button.
– Typography:
– All user and AI message text should be bold, white, and cursive.
– Initial loading screen:
– When the page loads, show a loading screen with the text “AI ChatBot”.
– This text should bounce in from the top.
– Use Google Fonts’ Orbitron font with blue colored text.
– The loading screen background is black.
– After 5 seconds, transition from the loading screen to the main interface.
– Main interface after loading screen:
– Display two options: “New Chat” and “History”.
– “New Chat”:
– Starts a new conversation.
– Includes a “Clear” button at the top that clears the entire chat with a confirmation popup.
– “History”:
– Displays conversation history.
– Allows loading previous conversations to continue them.
– Enables deleting history entries individually or all at once, each with confirmation prompts.
**Technical:**
– Use the GoogleGenAI library for connecting to the AI model “gemini-2.0-flash”.
– Integrate the loading spinner and typewriter effect for AI responses.
– Ensure PWA support is included.
# Steps
1. Set up a PWA-enabled React (or similar framework) web app.
2. Implement the loading screen with the bouncing “AI ChatBot” text using animation and Orbitron font.
3. After 5 seconds, transition to the main screen showing “New Chat” and “History”.
4. Implement UI with chat bubbles styled as specified.
5. Add send button with an icon and disable highlighting styles.
6. Integrate AI response generation using GoogleGenAI with typewriter.js animations.
7. Create a chat history system with persistence.
8. Add clear and delete confirmation dialogs.
# Output Format
Provide the complete source code for the web app including:
– HTML, CSS, and JavaScript/TypeScript code
– Configuration files for PWA support
– Comments explaining key implementations
# Notes
– Maintain a minimalistic UI with no unnecessary text or title.
– All interactions and transitions must be smooth and visually consistent.
– Use only publicly available libraries such as typewriter.js and Google Fonts.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your preferred coding environment.
- Follow the outlined steps to build the web app.
- Implement the specified design and functionality.
- Test the application for smooth interactions.
- Deploy the PWA for user access.
Tips for Best Results
- Set Up PWA: Start by creating a PWA-enabled React app using Create React App with the PWA template.
- Loading Screen: Implement a loading screen with bouncing text using CSS animations and the Orbitron font.
- Chat Bubbles: Style chat bubbles with CSS for user and AI messages, ensuring the correct colors and typography.
- AI Integration: Use GoogleGenAI for AI responses and typewriter.js for animated text display in the chat interface.
FAQ
- What is a PWA?
A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience. - How do you implement chat bubbles?
Style user messages with gradient dark blue bubbles and AI responses with black bubbles using CSS. - What library is used for typing effects?
The typewriter.js library is used to create animated typing effects for AI responses. - How to manage chat history?
Implement a system that stores conversations, allowing users to load and delete history entries.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
