Explore Tools, Templates & Digital Resources

Build an advanced, production‑ready AI chat companion from scratch – featuring direct multi‑provider routing (OpenAI, Gemini, Anthropic), an interactive 3D particle backdrop, native web speech integration, client‑side PDF/image extraction, and secure proxy architectures. **THRIVEN MULTI-AI** is a free, open‑source resource that you can download, customize, and use in your own projects. --- ## What You'll Learn - Multi-Model Routing – connect dynamically to OpenAI, Google Gemini, Anthropic Claude, or custom API endpoints from a single client interface - Client-Side File Parsing – extract text from PDFs using pdf.js and ingest local images, audio, or code blocks directly in your browser without backend processing overhead - 3D Atmospheric Visuals – implement a responsive 3D interactive particle galaxy using Three.js as an ambient UI backdrop - Native Speech API Integration – build bidirectional voice features using native browser Speech Recognition (STT) and Speech Synthesis (TTS) with real-time avatar animation synchronization - Smart System Personas – manage up to 13 persistent agent configurations (e.g., Engineer, Coach, Marketer) combined with deep client-side chat history memory - Secure Architecture Hooks – set up a lightweight PHP backend proxy gateway to cleanly mitigate CORS-related restrictions on third-party API configurations --- ## Who Is This Tutorial For? This project is ideal for developers building: - Multi-provider AI platforms or SaaS solutions - Highly visual, interactive chat frontends without node/build tool overhead - Advanced internal tools featuring local document reading and voice analysis - Freelance projects that require an extensive, ready-to-use frontend template Whether you're a beginner wanting to understand client-side web APIs, or an experienced developer looking for a comprehensive modular boilerplate, this guide has you covered. --- ## Technologies Used ### Three.js Renders the interactive 3D particle galaxy environment. ### OpenAI / Gemini / Anthropic APIs Supply underlying language model processing. ### JavaScript (ES Modules) Drive decoupled, modular frontend application logic. ### marked.js Render raw response strings into clean, responsive Markdown HTML. ### highlight.js Generate real-time syntax highlighting inside code blocks. ### pdf.js Parse physical data coordinates from client-side PDF uploads. ### jsPDF Compile and build downloadable PDF transcripts locally. ### Web Speech API Process voice-to-text dictation and speech audio outputs. ### PHP (Optional) Manage server-side request routing to bypass CORS limitations. --- ## Project Structure Download the source files and you'll get: - **index.html** – The application interface. It houses the HTML layout, loads external CDNs (marked.js, highlight.js, pdf.js, jsPDF), and hosts the responsive container structures alongside the glassmorphic style controls. - **app.js** – The core frontend module orchestration. It drives application states, initializes the Three.js ecosystem, attaches speech/media APIs, processes local files, and securely formats cross-provider API payloads. - **style.css** – Central visual system style tokens. Contains core animations, modern dark-mode layouts, backdrop filters, and custom CSS frames for the animated robot avatar interface. - **proxy.php** – A clean backend utility. Acts as a lightweight curl-forwarding mechanism to route requests targeting CORS-locked servers safely from the server context. --- ## Markdown Parsing & Content Delivery (marked.js) To turn raw API text strings into readable, styled content, the application utilizes **marked.js** inside the message rendering pipeline. Here is exactly how it functions within the project: - **Dynamic Text Conversion:** When a response returns from an AI model, the raw Markdown text is fed directly into marked.parse(text). This instantly transforms markdown syntax (like headers, bold text, lists, and links) into structured HTML elements. - **Syntax Highlighting Integration:** As marked.js generates HTML code blocks, the app invokes hljs.highlightElement(block) to apply real-time theme syntax highlighting to programming languages. - **Secure UI Insertion:** The resulting HTML string is safely injected into a newly created chat bubble element before being appended to the scrollable DOM conversation container. --- ## How It Works (Under the Hood) ### 1. 3D Visual Atmosphere & Animation - **Three.js Particle System:** Upon loading, app.js builds a custom 3D spiral particle canvas with 2,000 points that slowly rotate to serve as a dynamic backdrop. - **Mouth Synchronization:** When the Text-to-Speech engine generates audio output, an active interval dynamically alters the height and border-radius of the CSS robot mouth element to realistically emulate speech jitter. ### 2. Multi-Modal File Processing (Client-Side) When a user uploads items or utilizes the file attachment picker, app.js reads file blobs sequentially without server-side processing overhead: - **PDF Analysis:** Leverages pdf.js to initialize an array buffer, steps through each page programmatically, reads text coordinates via getTextContent(), and appends the extracted string directly to the model prompt. - **Images & Audio:** Formats files as standard DataURL buffers or isolates the clean base64 string block to provide rich imagery previews or structural attachments. ### 3. Native Voice Interfaces - **Voice-to-Text:** Toggles the browser's native SpeechRecognition constructor, recording audio inputs directly through your microphone and pushing the result straight to the user input text window. - **Text-to-Speech:** Feeds the system's written answers into SpeechSynthesisUtterance(), applying adjustable speed variables (0.5x–2.0x) and custom device voice selections. ### 4. Dynamic Context & System Personas - **Context Assembly:** Every interaction checks the toolbar's persona selection. It matches it against 13 distinct pre-configured system definitions (e.g., Senior Software Engineer, Career Coach, Ad Creator) to give the bot its specific personality. - **History Management:** Keeps track of the chat history and injects the last 8 messages into the API history payload to preserve conversation memory. ### 5. Unified API Architecture & Proxy Strategy - **Multi-Provider Routing:** The app structures payloads uniquely depending on whether you're targeting OpenAI (JSON completion schemas), Gemini (Content parts structures), or Anthropic (System/Message properties partitions). - **CORS Bypass Gateway:** For direct web queries prone to CORS errors (like Anthropic requests originating directly from local viewports), requests are packaged and routed through proxy.php, which executes a clean curl request to the target API and returns the response. ### 6. Client Action Utilities & Data Retention - **Local Storage Layer:** All API access tokens, chat models, UI selections, and full conversation records are stored locally using the localStorage key-value pairs system. - **Document Compilation:** Uses raw document blobs for instant .txt downloads and references the client-side jsPDF library to break up bot string lengths and export formatted .pdf responses.

Create a production-ready AI chat app from scratch – with user authentication, OpenAI integration, voice input, image and file uploads, and downloadable responses. **THRIVEN AI** is a free, open-source resource that you can download, customize, and use in your own projects. --- ## What You'll Learn - Firebase Authentication – sign up, sign in, logout, delete account, password reset - Real-time user data – store profiles in Firestore and react to auth state changes - OpenAI GPT chat – connect to AI models with custom system prompts and vision support - API key management – let users use their own key or fall back to a system key - Voice input – record and transcribe speech using the browser's Web Speech API - File and image attachments – send photos to the vision model or attach any file - Download and share – save AI responses as Markdown files or share them via the device's share sheet - Chat history – all conversations saved automatically in local storage - Modern UI – dark theme with Tailwind CSS, smooth animations, and responsive design - Mobile gestures – swipe to open and close the sidebar on touch devices --- ## Who Is This Tutorial For? This project is ideal for developers building: - AI-powered SaaS platforms - Personal productivity tools - Educational chatbots - Customer support assistants - Internal business tools - Freelance projects that require a ready-to-use frontend Whether you're a beginner wanting to understand Firebase and AI integration, or an experienced developer looking for a production-ready foundation to build upon, this guide has you covered. --- ## Technologies Used ### Firebase Authentication Secure user login, registration, password reset, account deletion, and authentication state management. ### Cloud Firestore Store user profiles and application data with real-time synchronization. ### OpenAI API Power intelligent conversations with AI text generation and image understanding capabilities. ### JavaScript (ES Modules) Build the application using clean, modular, framework-free JavaScript. ### Tailwind CSS Create a modern, responsive user interface with utility-first styling. ### marked.js Render Markdown content into formatted HTML within chat messages. ### highlight.js Provide automatic syntax highlighting for code snippets and programming examples. ### SweetAlert2 Display elegant alerts, confirmations, notifications, and modal dialogs. ### Web Speech API Enable voice-to-text functionality directly within supported browsers. ### PHP (Optional) Act as a secure proxy for OpenAI requests and protect API keys in production environments. --- ## Project Structure Download the source files and you'll get: - **index.html** – Main application interface and layouts - **style.css** – Custom styles, animations, and UI enhancements - **app.js** – Authentication, AI chat, voice input, attachments, and chat history logic - **proxy.php** – Optional API proxy for protecting secret keys in production Everything is built with **vanilla JavaScript**. No React, Vue, Angular, or build tools required. Simply open the project locally or deploy it to your preferred hosting platform and you're ready to go. --- ## Quick Start ### 1. Firebase Setup 1. Create a Firebase project. 2. Enable Email and Password Authentication. 3. Enable Cloud Firestore. 4. Copy your Firebase configuration settings. 5. Add the configuration to your application. Once configured, authentication and Firestore features will be ready to use. ### 2. OpenAI API Configuration The application supports two API key approaches. #### Option A — User API Keys Ideal for development and prototyping. - Users provide their own OpenAI API key - Keys are stored locally in the browser - No server configuration required #### Option B — System API Key with Proxy Recommended for production deployments. - Store the OpenAI API key on the server - Route requests through the PHP proxy - Prevent exposure of secret keys to end users ### 3. Run the Application Launch the application locally or deploy it to your preferred hosting provider. Once running, users can: - Register accounts - Log in securely - Start AI conversations - Upload files and images - Use voice input - Save and share responses --- ## How the Proxy Works The optional proxy acts as a secure bridge between your frontend and OpenAI. Instead of sending requests directly from the browser, the application sends requests to your server. The server then communicates with OpenAI using a protected API key. Benefits include: - Improved security - Protected API credentials - Reduced risk of key abuse - Better production readiness To enable the proxy: 1. Configure your OpenAI API key on the server. 2. Update the application to send requests through the proxy endpoint. 3. Deploy the proxy alongside your application. --- ## Key Features Explained ### Firebase Authentication & User Profiles The application automatically handles user authentication and profile management. Features include: - User registration - Secure login - Password reset - Account deletion with re-authentication - Automatic profile creation - Dynamic user interface updates ### OpenAI Integration The chat system supports multiple conversation modes including: - General Assistance - Programming Support - Career Guidance - Custom AI Personas Users can choose between personal API keys and a centralized system key depending on deployment requirements. ### File & Image Attachments Users can attach: - Images - Documents - Text files - Source code files Images can be analyzed by AI vision models, while documents and files can be referenced during conversations. ### Voice Input Voice input is powered by the browser's native speech recognition capabilities. 1. Click the microphone button. 2. Speak naturally. 3. Watch the speech automatically convert into text. No additional libraries or setup are required. ### Download & Share Every AI response includes convenient actions: - Copy response text - Share through the device's native sharing system - Download responses as Markdown files ### Chat History Conversations are automatically saved locally. Users can: - Create new chats - Revisit previous conversations - Delete individual chats - Clear all saved history ### User Interface & Responsiveness The application features: - Modern dark theme design - Fully responsive layout - Mobile-friendly sidebar navigation - Swipe gesture support - Auto-resizing message input - Smooth message animations - Clean and intuitive user experience --- ## How to Test Everything ### Guest Mode Use the application without authentication by providing an API key. ### Authenticated Mode Create an account and test: - Registration - Login - Password reset - Profile management ### Vision Testing Upload an image and ask the AI questions about its contents. ### Voice Testing Use the microphone button and verify speech-to-text functionality. ### Download Testing Generate a response and save it as a Markdown file. --- ## Production Recommendations Before deploying: - Replace development Firebase settings with production credentials - Enable the server-side proxy for API security - Remove user API key options if unnecessary - Configure proper Firestore security rules - Serve the application over HTTPS - Monitor usage and API consumption These steps improve security, scalability, and reliability. --- ## Full Source Code & Download The complete package includes: - HTML - CSS - JavaScript - PHP Proxy All files are well organized and documented, making them easy to learn from and customize. Add your project download link here. --- ## Final Thoughts THRIVEN AI provides a complete foundation for building modern AI-powered applications. With authentication, AI integration, voice support, file attachments, chat history, and responsive design already included, you can focus on building unique features instead of starting from scratch. Use it as a learning resource, a SaaS foundation, an internal business tool, or the starting point for your next AI product. Happy building!

# Build a Complete Firebase Authentication System Build a complete authentication system from scratch using Firebase Authentication, Firestore, Bootstrap 5 and vanilla JavaScript. ## What You'll Learn - User Registration (Sign Up) - Secure User Login (Sign In) - Password Reset - User Profile Management - Real-time Authentication State Handling - Firestore User Data Storage - Account Deletion with Re-authentication - Modern Glassmorphism UI Design - SweetAlert2 Notifications ## Who Is This Tutorial For? This tutorial is ideal for developers building: - SaaS platforms - Dashboards - Web applications - Startup products that require secure user authentication. ## Technologies Used - Firebase Authentication - Cloud Firestore - JavaScript (ES Modules) - Bootstrap 5 - SweetAlert2 - HTML5 - CSS3