AI-Powered JavaScript, Vue and React Apps with Google Gemini

Set up a live chat by collecting user messages from an input, wiring a module-based send button with an event listener, and updating the chat history for Google AI integration.

Learn to start a chat with Google AI by integrating the start chat method, managing a client-side messages history, and sending user messages to receive model responses.

Implement robust error handling for API requests using try-catch, surface clear user feedback when the Google Gemini API is unavailable or overloaded, and avoid updating history on failed messages.

Learn to implement streamed chat responses using the Google Gemini API in a JavaScript web app, sending messages in chunks to create a typing-like experience.

Apply final chat improvements by refining streaming messages, restoring history, and building a chat interface with a chat button, an icon, and a window that opens and closes.

Upload image files or PDF documents to Gemini to generate knowledge, preview the file, and ask questions about it, using React for a cleaner, more maintainable app.

Create a new React project with Veet, ensure Node.js is installed, install Veet globally, install dependencies, and run the dev server to view the app locally.

Clean up the project, reset CSS, and build a React layout with a header and a file upload component to upload documents or images for a summary and chat.

Implement a file upload feature in a React component, restrict to PDF and images, capture a single file on change, and convert to array buffer and base64 for Google Gemini.

Connects an uploaded file to Google AI Gemini for a document understanding summary using the Google Generative AI library, with base64 handling and loading state in a JavaScript web app.

Add a loader to the summary component using useState and useEffect, manage a status of idle, loading, and success, and conditionally render the Google Gemini summary.

Build a chat component in the JavaScript web app to let users ask questions about uploaded files, display user and model messages, include an error message, and apply scoped styling.

Learn to build a React chat interface with useState for messages, render user and model messages, and handle sending and input clearing for Google Gemini.

Learn to chat with Google AI in a JavaScript web app by using the generate content method to send messages, attach files, manage history, and display responses with a loader.

Prototype JNI-based AI chatbots in web apps, one from business information and another from images and documents, and embed an on-page chat box that answers from the page content.

Examine security issues with API keys in web apps and adopt a secure workflow using environment variables and Firebase Vertex AI for production-ready AI integration.

Securely integrate Gemini generative AI into JavaScript web apps with Firebase and Vertex AI. Learn to hide API keys, configure a Gemini model, and manage spend with budgets and alerts.

Create a brand new Vue.js project with Vite, install dependencies, start a local server, and set up the initial app structure with a fresh component and existing CSS baseline.

Design and implement the app’s start screen by wiring the logo asset, header, and quiz topic input with a start quiz button, using a start screen component and composition API.

Capture the quiz topic via script setup using vue ref and v-model, disable the start button until a topic is entered, then emit the topic to trigger Gemini API.

Fetch a single quiz question from Google Gemini for a JavaScript web app, using a dynamic topic and a JSON-structured response to render the question and options in Vue.js.

Learn to switch screens with declarative UI by managing a status state to show the start, loader, and quiz components, keeping the app logic simple and maintainable.

Present five questions at a time by converting questions into an array, passing them to the quiz component via Vue props, and rendering the first question for the user.

Learn to manage the current question state using a ref, initialize it to zero, and increment it with a dedicated submit answer function to present options and store responses.

Present options to the user by rendering a dynamic set of answer buttons in a Vue.js quiz, mixing correct and incorrect answers in a random order.

Learn to select and submit quiz answers using a ref for the chosen option, show active choice in UI, and emit a store-answer event with the question and user answer.

End the quiz when the last question is answered by updating a header with the current one out of total, showing a progress bar, and emitting end-quiz to reveal results.

Learn to present quiz results by passing user answers to a result component, render each question with user and correct answers, and show a computed total of correct responses.