The provided text details the development of an AI voice assistant for educational content using various free tools and services. The process begins with setting up a Next.js application and integrating UI components using Shadcn. Authentication is implemented with Stytch, followed by the creation of a dashboard featuring interactive coaching options. The text then explains how to establish real-time speech-to-text functionality with AssemblyAI, connect to AI models via OpenRouter, and utilize Amazon Polly for text-to-speech conversion. Finally, it covers user profile management, token usage tracking, deployment on Vercel, and putting Stytch into production.

Study Guide: AI Voice Assistant for Educational Content

Quiz

1. What is the primary purpose of AssemblyAI in this project?
2. Describe the function of OpenRouter in the context of the AI voice assistant.
3. What are the two main ways to host Convex, as mentioned in the source? Briefly explain each.
4. Explain the role of Shadcn UI in the development of the user interface.
5. What is StackOS, and what problem does it solve in this project?
6. Describe the folder structure created when a new Next.js application is initiated using the command npx create-next-app@latest.
7. What is the significance of the middleware.jsx file in this application?
8. Explain the purpose of React Context in managing user data within the application.
9. How is user authentication handled before a user can access the dashboard?
10. What is the role of Amazon Polly in the final stage of the AI voice assistant’s functionality?

Quiz Answer Key

1. AssemblyAI is used to convert live audio input from the user into text with high accuracy and low latency, enabling real-time transcription of speech.
2. OpenRouter serves as a platform to explore and utilize multiple Large Language Models (LLMs) from various AI providers, allowing the application to leverage different AI models for generating responses.
3. The two main ways to host Convex are Convex Cloud, where the database is set up and managed on Convex’s own platform, and self-hosting, where Convex can be hosted on the developer’s own infrastructure using Docker.
4. Shadcn UI is a Tailwind CSS-based UI component library that provides pre-built, customizable components to rapidly build the user interface of the AI voice assistant.
5. StackOS is an authentication service provider used to add user sign-up and sign-in functionality to the application, ensuring that only authenticated users can access protected parts like the dashboard.
6. The initial Next.js application structure includes an app folder for routes and layouts, public for static assets, next.config.mjs for Next.js configuration, and package.json for project dependencies and scripts. The global.css handles global styles, and with Tailwind CSS v4, it also includes color variables.
7. The middleware.jsx file is used to protect specific routes of the application. It checks if a user is authenticated before allowing access to those routes, redirecting unauthenticated users to the sign-in page.
8. React Context provides a way to share data (like user information and authentication status) across different components in the application without the need for prop drilling, making the data accessible in various parts of the UI.
9. User authentication is handled using StackOS. When a user attempts to access a protected route, the application checks their authentication status. If authenticated, they are granted access; otherwise, they are redirected to the sign-in/sign-up page.
10. Amazon Polly is used to convert the text generated by the AI model (as a response to the user’s speech) back into spoken audio, allowing the AI voice assistant to provide verbal feedback to the user.

Essay Format Questions

1. Discuss the key technologies and services (AssemblyAI, OpenRouter, Convex, Shadcn UI, StackOS, Amazon Polly) chosen for this AI voice assistant project. Explain the specific role and benefits of each in the overall functionality of the application.
2. Outline the process of setting up and implementing user authentication and authorization in this Next.js application using StackOS. Detail the steps involved in protecting routes and managing user sessions.
3. Compare and contrast the two methods of hosting Convex databases (Convex Cloud and self-hosting with Docker). Discuss the advantages and disadvantages of each approach in the context of developing and deploying this AI voice assistant.
4. Describe the workflow of a user interacting with the AI voice assistant, from speaking into the microphone to receiving a spoken response. Detail the steps involved in speech-to-text conversion, AI model processing, and text-to-speech synthesis, highlighting the technologies used at each stage.
5. Evaluate the importance of state management in this AI voice assistant application, focusing on the use of React Context for managing user data and conversation history. Discuss how effective these strategies are for maintaining application state and facilitating component communication.

Glossary of Key Terms

• AssemblyAI: A platform that provides APIs for converting speech to text and offers features like live audio transcription with high accuracy and low latency.
• Convex: An open-source, real-time database service that offers features like type safety, serverless functions, and self-hosting capabilities.
• Docker: A platform for building, sharing, and running applications in isolated environments called containers, used here for self-hosting Convex.
• Large Language Model (LLM): An AI model with a vast number of parameters, trained on a massive corpus of text, capable of understanding and generating human-like language (e.g., Gemini, GPT).
• Next.js: A React framework for building server-rendered and statically generated web applications, offering features like file-system routing and API routes.
• OpenRouter: A platform that aggregates multiple AI LLMs, allowing developers to access and utilize various models through a single API.
• React Context: A feature in React that allows sharing state between components without explicitly passing props through every level of the component tree.
• Shadcn UI: A collection of reusable UI components built using Tailwind CSS, designed for easy customization and integration into React applications.
• StackOS (Stackup): An authentication service provider that simplifies the process of adding user sign-up, sign-in, and user management to web applications.
• Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to style HTML directly in the markup.
• Amazon Polly: A cloud-based service that converts text into lifelike speech, supporting various voices and languages.
• Self-hosting: The practice of hosting an application or service on one’s own infrastructure rather than using a third-party platform’s managed service.
• API Key: A unique identifier used to authenticate requests to an API, ensuring that only authorized users or applications can access the service.
• Middleware: A layer of software that acts as a bridge between an operating system or database and applications, often used for tasks like authentication and request handling.
• Mutation (Convex): A type of function in Convex that modifies data in the database.
• Query (Convex): A type of function in Convex that reads data from the database without making any changes.
• React Hook: A feature in React that lets you use state and other React features without writing classes (e.g., useState, useEffect, useContext).
• Speech to Text (STT): The process of converting spoken audio into written text.
• Text to Speech (TTS): The process of converting written text into spoken audio.

Building an AI Voice Assistant for Education

## Briefing Document: AI Voice Assistant for Educational Content Development

**Date:** October 26, 2023 (based on content references)

**Subject:** Review of Source Material for Building an AI Voice Assistant

**Introduction:**

This briefing document summarizes the main themes, important ideas, and key facts presented in the provided source (“01.pdf”). The source outlines the initial steps and technologies involved in developing an AI-powered voice assistant specifically tailored for educational content creation. The document highlights the planned features, the technology stack, and the setup procedures for the frontend, authentication, backend database, speech-to-text, text-to-speech, and basic UI components.

**Main Themes and Important Ideas:**

1. **Goal:** To develop an AI voice assistant that can be used for creating educational content. This involves converting speech to text, leveraging AI models for content generation or assistance, and converting text back to speech.

2. **Technology Stack:** The project intends to utilize a free-to-use technology stack, including:

* **Frontend Framework:** Next.js (version 14 or 15 based on “at latest” mention, specifically using the app router).

* **UI Component Library:** Shadcn UI (Tailwind CSS based, targeting version 4).

* **Authentication:** Stytch (free to use).

* **Backend Database:** Convex (with options for both cloud and self-hosting using Docker).

* **Streaming Speech-to-Text:** AssemblyAI (aiming for 90% accuracy and <600ms latency, with a $50 credit offer).

* **AI Model Exploration:** OpenRouter (to access multiple LLM models).

* **Text-to-Speech:** Amazon Polly (free to use).

3. **Project Setup (Next.js):** The source details the initial steps for creating a Next.js application using `npx create-next-app@latest`. It covers:

* Project naming (“AI coaching voice agent”).

* Choosing not to use TypeScript.

* Using ESLint.

* Selecting Tailwind CSS (mentioning the shift in version 4 where `tailwind.config.js` is integrated into `global.css`).

* Opting for the app router.

* Describing the basic folder structure (`app`, `public`, `next.config.js`, `package.json`).

* Running the development server using `npm run dev`.

* Basic page creation (`page.js`) and folder-based routing.

> “now simply go to the terminal click new terminal or you can open this terminal from the bottom just type a command npm run D click enter and then you will see your application is now running on this particular URL with this 3,000 port number”

4. **UI Component Library (Shadcn UI):** The process of integrating Shadcn UI is explained:

* Visiting `ui.shadcn.com` and following the Next.js installation guide (specifically for Tailwind CSS version 4).

* Initializing Shadcn UI using `npx shadcn-ui@latest init`.

* Selecting base color themes (e.g., neutral).

* Forcefully adding the library with React 19 (`use force`).

* Installing individual components (e.g., button using `npx shadcn-ui@latest add button`).

* Customizing component styles through `global.css` by modifying color variables.

> “simply copy this command in order to initialize the shadan I will open another terminal and and simply we’ll execute this shadan command”

> “whenever you want to use any shat CN UI components you have to first install that component so in this case let’s say you want to use button component so I will copy this inside the terminal let’s paste that”

5. **Authentication (Stytch):** The source outlines the integration of Stytch for user authentication:

* Creating a free account on `stytch.com`.

* Creating a new project and selecting sign-in options (Google, GitHub, email/password, etc.).

* Copying the `.env` variables provided by Stytch and creating a `.env.local` file in the project root.

* Installing the Stytch Next.js SDK using `npm install @stytch/nextjs`.

* Initializing Stytch using the provided command (which might require `sudo` on macOS due to permission issues).

* Stytch automatically creates a `handler/stytch/page.js` route for signup and sign-in.

* The `<StytchProvider>` is added to `layout.js`.

* Using the `<UserButton>` component from `@stytch/nextjs` to display user profile options.

* Implementing route protection using middleware (`middleware.jsx`) and the `@stytch/nextjs/server` package.

> “in order to add an authentication we are going to use a stack o when I search on Google the bestas authentication service provider there are lot of service provider like Clerk and stack O is a alternative for the clerk”

> “simply simp go to this stack o.com and create a new account and again one more important thing that it is free to use”

> “I will create this file called middleware and this need to be a jsx and simply we’ll copy this line of code”

6. **Backend Database (Convex):** The source details setting up Convex as the backend database:

* Creating a free account on `convex.dev`.

* Creating a new project.

* Installing the Convex client library using `npm install convex`.

* Initializing Convex in the project using `npx convex dev` and linking it to the created project.

* A `convex` folder is created in the project.

* Wrapping the application with the `<ConvexProvider>` in a custom `provider.js` (marked as `use client`).

* Creating a schema (`schema.js`) to define database tables and their columns using Convex’s type system (`V.string`, `V.number`, `V.optional`).

* Convex automatically generates unique IDs and creation timestamps.

* **Self-Hosting Convex:** The document briefly mentions the option for self-hosting using Docker, referring to a separate guide for detailed instructions. This involves downloading a `docker-compose.yml` file, running `docker compose up`, generating an admin key, and configuring environment variables (`.env.local`) with the self-hosted Convex URL and admin key.

> “in order to store a application data we need a database and for that one we are going to use a convex convex is a open-source database for your application”

> “simply click create project and give the project name here we’ll say AI coaching voice agent and simply click create once it is created your database is now ready”

> “simply go to the uh copy this npm install convex command we’ll go to our terminal and inside the new terminal we’ll execute this command”

> “inside the Explorer you will see the new folder get created called convex and inside that you will have some of the files you don’t need to worry about any of this file right now”

> “inside the schema we’ll simply say export default Define schema and inside the Define schema you need to write a table name let’s say users here we’ll say Define table”

7. **Saving User Information:** The process of saving user information to the Convex database upon successful authentication is described:

* Creating a Convex mutation function (`users.js`) called `createUser` to insert user data into the `users` table.

* The function checks if a user with the given email already exists before inserting a new record.

* It takes `name` and `email` as arguments and defaults `credits` to 50,000.

* The `subscriptionId` field in the schema is marked as optional.

* A custom `AuthProvider` component (marked as `use client`) is created to fetch user information using Stytch’s `useUser` hook.

* A React state (`user`) from `useUser` provides user details (display name, primary email, etc.).

* A Convex mutation hook (`useMutation`) is used to call the `createUser` function.

* The `createUser` mutation is called within the `AuthProvider` when user information is available, passing the user’s display name and email.

> “next Once user is authenticated very first time we going to save user information to our database so that we can keep a track of all the user uh activity and everything so that what we are going to see next”

> “inside the convex we need to write a function so I will create a new file called users. JS and inside that we’ll create export constant create user now inside this create user we are going to insert the user inside our database for that one obviously it’s a mutation”

8. **State Management (React Context):** The source introduces the use of React Context for sharing user data across the application:

* Creating a `_context` folder to store context-related files.

* Creating a `userContext.jsx` file using `createContext`.

* Wrapping the application’s children within the `AuthProvider` with the `UserContext.Provider`.

* Storing the fetched user data in a React state (`userData`, `setUserData`).

* Passing the `userData` and `setUserData` to the `UserContext.Provider`’s `value`.

* Components can then use `useContext(UserContext)` to access the shared user data.

> “once we get the user information from the database we need to save in a state so that we can share it across a application in a different different components and for that one we are going to use a react context”

> “simply go to this app and inside this we’ll create a component sorry create a folder called underscore context now we are giving this name under UND start with underscore because nextjs then will not consider this as a route”

> “now inside that I will give the context name I will keep the context name similar to the file name and we’ll say create context and that’s all that’s how easily you can create the context”

9. **Dashboard UI Structure:** The source begins to outline the basic structure of the dashboard screen:

* Creating a `main` folder to house authenticated application routes.

* A `layout.jsx` within `main` serves as the layout for the dashboard.

* A `dashboard` folder with a `page.jsx` represents the main dashboard page.

* Route protection using `middleware.jsx` to redirect unauthenticated users away from `/dashboard` routes.

* An `_components` folder within `main` to store shared UI components (e.g., `app header`).

* The `AppHeader` component includes a logo (loaded from `public/logo.svg`) and the Stytch `<UserButton>`.

* A `FeatureAssistant` component is introduced for displaying core functionalities as a grid of options with icons and names.

* A list of coaching options with names and image icons is defined in `services/options.jsx`.

* Basic styling using Tailwind CSS classes is applied for layout (flex, grid, padding, margin, etc.) and visual appearance.

* Sections for “Your previous lectures” and “Interview feedback” are planned.

> “it’s time to design the dashboard screen where we are going to add the header at the top and we will make sure uh all the routes which user can uh have authorized to see right that on that all the pages we are going to keep this header uh constant”

> “inside this main folder I’m going to create another folder called underscore components and inside this we’ll create app header do jsx”

> “inside this main let’s create a new uh folder called dashboard inside this dashboard uh we can create a page jsx file”

10. **Enabling Microphone Access:** The initial steps for enabling microphone access using `record-rtc` are outlined:

* Installing the `record-rtc` library.

* Creating a `connect to server` function to initiate recording using `navigator.mediaDevices.getUserMedia`.

* Using React state (`enableMic`, `setEnableMic`) to toggle between “Connect” and “Disconnect” buttons.

* Using `useRef` to manage the `recorder` object.

* A `disconnect` function is created to stop recording and reset the recorder state.

* Addressing potential server-side rendering issues with `record-rtc` by dynamically importing it.

> “now it’s time to enable the microphone and this is the first thing that we want to implement I’m going to make your life easier because I’m going to provide this source code uh so that you can enable the microphone and it’s quite straightforward”

> “inside this connect to server method we need to call when we user click on this connect button so here we say on click and then call this connect to server”

> “constant recorder is equal to use reference and initially it will be nuls make sure to import this use reference as well”

11. **Speech-to-Text with AssemblyAI:** The source introduces AssemblyAI for real-time speech-to-text conversion:

* Creating an account on `assemblyai.com`.

* Installing the AssemblyAI JavaScript SDK using `npm install assemblyai`.

* Explaining the concept of streaming speech-to-text for live audio transcription with low latency.

* Setting up a WebSocket connection to AssemblyAI’s streaming endpoint.

* Sending audio data (Blobs) to the WebSocket.

* Handling incoming messages, including `partial_transcript` and `final_transcript` types.

* Updating a React state (`transcribe`, `setTranscribe`) to display the transcribed text in real time.

* Storing final transcripts in a `conversation` state.

> “The next step is to convert our speech to a text and for that one we are going to use an assembly AI where we are going to stream the speech in a real time to a text”

> “simply go to this assembly ai.com or click uh the link in the description so you’ll jump on specific page”

> “very first thing we need to do is to install this assembly AI so I will copy this assembly AI statement and inside our terminal I will just make sure to install that”

> “we’ll set up a WebSocket connection to this URL and then we’ll pass the key and the format”

12. **AI Model Integration with OpenRouter:** The source details using OpenRouter to access various LLM models:

* Creating an account on `openrouter.ai`.

* Generating an API key.

* Installing the Open AI SDK (`npm install openai`).

* Initializing the Open AI client with the OpenRouter API key.

* Using the `chat.completions.create` method to interact with an AI model (e.g., Gemini Pro 2.0 experimental).

* Passing user input (topic and message) and a prompt (defined in `services/options.jsx`) to the AI model.

* Replacing a placeholder (`user input`) in the prompt with the actual user topic.

* Sending the conversation history (last two messages) to the AI model for context.

* Handling potential browser security errors (`Dangerous allow browser`) by moving the Open AI API call to a server-side API route (implicitly suggested by the later fix).

* Updating the `conversation` state with the AI model’s response.

> “we are going to use an open router. a open router contains a lot of different AI model which you can use it for free”

> “simply uh make sure to sign up with this your account and then select the model which you want to use”

> “install this open so let’s copy this uh inside the terminal make sure to install and once it install make sure to import this open a”

> “using the chat.completions.create method to interact with an AI model”

13. **Text-to-Speech with Amazon Polly:** The source explains integrating Amazon Polly for converting text to speech:

* Creating an AWS account and accessing the Amazon Polly service.

* Generating AWS access keys (Access Key ID and Secret Access Key) with the necessary permissions for Polly.

* Installing the AWS SDK client for Polly (`@aws-sdk/client-polly`).

* Initializing a Polly client with the AWS region and credentials.

* Using the `SynthesizeSpeechCommand` to convert text to an audio stream in MP3 format.

* Selecting a voice ID based on the chosen expert.

* Converting the audio stream to a buffer.

* Creating an audio element in the browser and setting its source to a data URL representing the MP3 audio.

* Playing the generated audio.

> “it’s time to convert our text to speech and for that one we are going going to use AWS Amazon poly”

> “simply search on Google Amazon poly and uh it’s free to use”

> “install the AWS SDK client for Polly (`@aws-sdk/client-polly`)”

> “using the `SynthesizeSpeechCommand` to convert text to an audio stream in MP3 format”

14. **User Interface Enhancements:** The source covers various UI improvements:

* Implementing a dialog for user input upon selecting a coaching option.

* Displaying the selected coaching option name as the dialog title.

* Adding a text area for users to enter their topic.

* Showing a list of coaching experts with their names and avatars (loaded from `public`).

* Allowing users to select an expert, visually indicating the selection with a border.

* Adding “Cancel” and “Next” buttons in the input dialog.

* Creating a chat box to display the conversation history, differentiating user and assistant messages with styling.

* Implementing scrolling for long conversations within the chat box.

* Adding a “View Summary” section with basic formatting.

* Creating a profile dialog accessible via the user button in the header, displaying user information (profile picture, name, email), token usage with a progress bar, current plan, and an upgrade option.

15. **Token Management:** The source details the initial implementation of token usage tracking:

* Adding a `credits` field to the user schema in Convex.

* Creating a Convex mutation function (`updateUserToken`) to update a user’s credits.

* Using a React mutation hook (`useMutation`) to call the `updateUserToken` function.

* Calculating token usage based on the length of user and AI-generated messages.

* Updating the user’s credits in Convex and the local `userData` state after each message exchange.

16. **Deployment (Vercel):** The source briefly explains deploying the Next.js application to Vercel:

* Creating a Vercel account and linking the project repository (GitHub, GitLab, Bitbucket).

* Vercel automatically detects the Next.js project and handles the build and deployment process.

* Environment variables (API keys, database URLs) need to be configured in the Vercel project settings.

* Stytch and Convex production settings need to be enabled.

**Key Facts:**

* The project aims for a free-to-use technology stack.

* AssemblyAI offers a $50 credit for new users.

* Stytch provides a free authentication service.

* Convex offers both cloud and self-hosting options.

* OpenRouter allows access to various free AI models.

* Amazon Polly is free to use for text-to-speech.

* Next.js version 15 was the latest at the time of recording.

* Tailwind CSS version 4 integrates its configuration into `global.css`.

* Stytch automatically creates authentication routes.

* Convex automatically generates IDs and timestamps.

**Quotes:**

* *”assembly AI with the help of assembly’s streaming speech to text you can convert the live audio into a text up to 90% of accuracy and within a less than 600 millisecond of latency how cool”*

* *”all the sources that we are going to use to build this application is free to use”*

* *”assembly AI will give you $50 of credit by joining the link in the description”*

* *”convex is a open-source database for your application uh it also provide a lot of different feature like realtime updates it’s a type safety included also if you want to run any specific task you have the chrone job uh in order to store the file they also provide a file storage functionality and there are many more”*

* *”stack O is a alternative for the clerk so I thought to give one try to the stack o and let’s see how it works so simply simp go to this stack o.com and create a new account and again one more important thing that it is free to use”*

* *”Amazon poly to convert our text to speech everything”*

**Conclusion:**

The source provides a comprehensive overview of the initial stages of developing an AI voice assistant for educational content. It lays out a clear technology roadmap, details the setup procedures for key components, and begins to implement core functionalities such as frontend structure, authentication, database integration, and basic speech-to-text capabilities. The emphasis on free-to-use services and the step-by-step instructions make this a practical guide for developers looking to build similar applications. The subsequent parts of the source likely delve deeper into AI model integration, text-to-speech implementation, UI enhancements, and deployment.

AI Educational Voice Assistant: Technology and Implementation

Q1: What technologies and services are used to build the AI voice assistant for educational content?

The AI voice assistant will utilize several key technologies and services:

• Next.js: A React framework used to build the web application, taking advantage of its features like folder-based routing and component structure.
• Shadcn UI: A Tailwind CSS-based UI component library for creating a consistent and customizable user interface.
• Stack o: An authentication service provider offering features like user sign-up, sign-in (including social logins), and user management, which is free to use.
• Convex: An open-source, real-time database for storing application data, with options for both cloud-hosted and self-hosted deployments using Docker.
• AssemblyAI: A speech-to-text service with a streaming API capable of converting live audio into text with high accuracy and low latency.
• OpenRouter: A platform that provides access to multiple large language models (LLMs), allowing the application to explore and use various AI models.
• Amazon Polly: A text-to-speech service used to convert the AI model’s responses back into spoken audio.

All the core services and technologies mentioned are free to use, making it accessible for development.

Q2: How is the Next.js application set up, and what is the purpose of the key files and folders?

The Next.js application is set up using the npx create-next-app@latest command, which installs the latest version of Next.js (version 15 in the source). During setup, the user is prompted to configure options like using TypeScript (no), ESLint (no), Tailwind CSS (yes – installing version 4), and the app router (yes).

Key files and folders include:

• app folder: Contains all the application’s pages, routes, and layouts. page.js is the default home page, and layout.js is the root layout defining the structure for all pages. global.css contains global styles, including Tailwind CSS variables.
• public folder: Stores static assets like images and fonts, which can be directly referenced in the application without specifying a path.
• next.config.mjs: Contains configuration settings for the Next.js application.
• package.json: Holds metadata about the application, including its name, version, scripts for running and building the application, and dependencies with their versions.
• middleware.jsx: Used for protecting routes by checking user authentication status before allowing access.
• convex folder: Created after setting up Convex, containing files related to the database schema and functions.

Q3: How is authentication implemented in the application?

Authentication is implemented using Stack o, a free authentication service provider. The process involves:

1. Creating a new project on the Stack o platform and configuring sign-in options (e.g., Google, GitHub, email/password).
2. Copying the provided environment variables (Stack o project ID, public API key, and secret API key) into the application’s .env.local file.
3. Installing the Stack o Next.js SDK using npm install @stack-o/react.
4. Initializing Stack o in the application, which automatically adds necessary files and components like handlers/stack/page.js, loading.js, layout.js (with a <StackOProvider>), and stack.js.
5. Utilizing the /handler/signup route provided by Stack o for user registration and login.
6. Using the <UserButton> component from @stack-o/react/stack to display user profile information and options like account settings and sign out.
7. Protecting routes using a middleware.jsx file, which intercepts requests and redirects unauthenticated users to the sign-in page using Stack o’s functionalities.

Q4: How is the Convex database set up and used for storing application data?

Convex is set up as the application’s database. The process involves:

1. Creating a new project on the Convex platform (or opting for self-hosting via Docker).
2. Installing the Convex client SDK in the Next.js application using npm install convex.
3. Initializing Convex in the project by running npx convex dev and linking it to the created Convex project. This generates a convex folder in the application.
4. Wrapping the application within a <ConvexProvider> in a provider.js file (marked as a client component) to provide Convex context to the application. This provider is then used in the root layout.
5. Defining the database schema in a schema.js file within the convex folder. This involves exporting a default DefineSchema and specifying tables with their columns and data types using Convex’s v (validator) object. Convex automatically handles unique IDs and creation timestamps.
6. Creating Convex functions (queries for fetching data and mutations for modifying data) in files within the convex folder to interact with the database.

The application uses Convex functions to check if a user exists upon login and to save new user information, including name, email, and initial credits, into the “users” table.

Q5: How is self-hosting of the Convex database achieved?

Self-hosting of the Convex database can be achieved using Docker. The steps include:

1. Installing Docker Desktop on the local machine.
2. Downloading the docker-compose.yml file provided in the Convex self-hosting documentation and placing it in the root directory of the project (renaming it to docker-compose.yml).
3. Running the command docker-compose up in the terminal, which sets up the Convex backend and dashboard using Docker.
4. Generating an admin key by running a specific Docker command provided in the documentation.
5. Accessing the Convex dashboard locally (usually at localhost:6791) and logging in using the generated admin key.
6. Updating the environment variables in the .env.local file to point to the self-hosted Convex instance (NEXT_PUBLIC_CONVEX_URL and CONVEX_ADMIN_KEY) and commenting out the cloud-based Convex URLs.
7. Running npx convex dev again to connect the application to the local Convex instance.

This setup allows developers to run and manage their Convex database on their own infrastructure.

Q6: How is speech-to-text functionality implemented?

Speech-to-text functionality is implemented using AssemblyAI’s streaming speech-to-text service. The process involves:

1. Installing the AssemblyAI client library using npm install assemblyai.
2. Creating an AssemblyAI account and obtaining an API key.
3. Implementing a function to connect to the microphone using the recordRTC library. This function initializes the microphone and starts recording audio.
4. Establishing a WebSocket connection to AssemblyAI’s streaming endpoint (wss://api.assemblyai.com/v2/realtime/ws?sample_rate=16000) when the user clicks a “connect” button. The API key is sent in the WebSocket URL’s Authorization header.
5. Sending the audio data in chunks (Blobs) over the WebSocket connection as the user speaks.
6. Receiving real-time transcription results from AssemblyAI over the WebSocket. These results include “partial transcripts” for immediate feedback and “final transcripts” when AssemblyAI detects a pause in speech.
7. Updating the application’s state with the received transcripts to display the spoken text on the screen in real time.
8. Handling the “disconnect” event to close the WebSocket connection and stop the microphone recording.

The final transcript is used to pass the user’s spoken input to the AI model for processing.

Q7: How is text sent to the AI model and the response handled?

Text is sent to the AI model using OpenRouter, a platform that provides access to various LLMs. The process involves:

1. Signing up for an OpenRouter account and obtaining an API key.
2. Installing the OpenRouter SDK (using npm install open-ai) and importing the OpenAI class.
3. Initializing the OpenAI client with the OpenRouter API key and a custom base URL (https://openrouter.ai/api/v1).
4. Creating a function that takes the user’s input text (obtained from AssemblyAI), the selected coaching option, and potentially conversation history as arguments.
5. Within this function, constructing a message payload with roles (“user” and “assistant” or “system”) and content. The “assistant” role’s content includes a prompt tailored to the selected coaching option, with a placeholder for the user’s topic which is replaced with the actual input.
6. Using the OpenAI client’s chat.completions.create method to send the message payload to a selected AI model (e.g., Gemini Pro 2.0 experimental).
7. Receiving the AI model’s response, which typically contains generated text.
8. Parsing the response and updating the application’s state to display the AI-generated text in the chat interface.

The application can be configured to send only the last user message or a history of the conversation to the AI model to provide more context.

Q8: How is text-to-speech functionality implemented to vocalize the AI’s responses?

Text-to-speech functionality is implemented using Amazon Polly. The process involves:

1. Installing the AWS SDK client for Polly using npm install @aws-sdk/client-polly.
2. Setting up an AWS account and creating an IAM user with programmatic access and the AmazonPollyFullAccess policy.
3. Obtaining the AWS access key ID and secret access key for the created IAM user and storing them as environment variables in .env.local.
4. Creating a function that takes the text to be synthesized (the AI model’s response) and the desired voice ID (based on the selected expert) as arguments.
5. Within this function, initializing a Polly client with the AWS region and credentials.
6. Creating a SynthesizeSpeechCommand with parameters including the text, output format (MP3), and voice ID.
7. Sending the command to the Polly client to synthesize the speech.
8. Receiving an audio stream in the response.
9. Converting the audio stream into an audio buffer.
10. Creating an audio element in the browser and setting its source to a data URL representing the audio buffer (e.g., audio/mpeg;base64,…).
11. Playing the audio, allowing the user to hear the AI’s response.

The application uses different voice IDs based on the “expert” selected by the user, providing a personalized voice for the AI assistant.

AI Voice Agent: Speech-to-Text with Assembly AI

The sources discuss speech-to-text technology extensively in the context of building an AI-powered voice agent for educational purposes. The application aims to teach users about specific topics, conduct mock interviews, provide question-and-answer learning, and even assist in language learning. A key feature of this application is the ability to convert speech to text.

Here’s a breakdown of the speech-to-text aspects based on the sources:

• Core Functionality: One of the fundamental aspects of the AI voice agent is learning how to convert speech to text. This allows users to interact with the agent using their voice.
• Real-time Transcription: During interactions like mock interviews, there is a live Speech to Text option that displays the user’s speech in real time. This feature is crucial for a natural conversational flow.
• Technology Used: The application utilizes Assembly AI to implement the speech-to-text functionality.
• Assembly AI’s streaming speech-to-text feature is specifically employed to convert live audio into text with high accuracy (up to 90%) and low latency (less than 600 milliseconds).
• The development process includes learning how to integrate Assembly AI’s streaming speech-to-text from the basics.
• Workflow Integration: The workflow of the application involves several steps, including getting microphone access, converting spoken words into text using Assembly AI, and then processing this text to get responses from an AI model.
• Once the user speaks, the audio needs to be converted to text, which is then passed to the AI for generating an answer.
• Implementation Details:The application uses the recordRTC library to handle microphone access and audio recording in the browser.
• The recorded audio is then sent to Assembly AI for transcription.
• The implementation involves setting up a WebSocket connection with Assembly AI’s streaming endpoint and sending audio buffers for real-time transcription.
• Assembly AI sends back transcript data, which includes both partial transcripts (for real-time display) and final transcripts (once the user pauses speaking).
• The application includes logic to process these transcripts and update the user interface to show the text in real time.
• The final transcript is used to capture the complete user input for processing by the AI model.
• Cost Considerations: Assembly AI provides a $15 credit to new users who join through a specific link, making it free to get started with the speech-to-text integration.
• Token Management: The transcribed text (output of speech-to-text) plays a role in token management, where the length of the conversation (in words) might be used to track user usage and potentially for paid plans.

In summary, speech-to-text is a foundational component of this AI-powered educational voice agent. Assembly AI is the chosen technology for providing accurate and real-time transcription of user speech, enabling a natural and interactive learning experience. The development process includes learning to integrate and utilize Assembly AI’s streaming capabilities effectively.

Educational Voice Agent: AI Model Integration

Based on the sources, AI models are central to the functionality of the educational voice agent being built. The agent relies on these models to provide a variety of learning experiences, including:

• Answering questions.
• Facilitating mock interviews.
• Delivering topic-based lectures.
• Assisting with language learning.
• Generating feedback on mock interviews.
• Creating notes for topic-based lectures.

The application aims to be flexible in its use of AI models, utilizing Open Router to explore and integrate with multiple Large Language Models (LLMs). The developers intend to connect to various AI models such as Gemini, OpenAI, ChatGPT, Dips, and CLA.

Here are further details about the use and integration of AI models:

• Model Selection: The project utilizes Open Router, which allows access to a wide range of AI models. This platform offers both free and paid models. One specific model mentioned as being used (at least for demonstration purposes) is Gemini Pro 2.0 experimental, noted as being free to use.
• Prompt Engineering: To get relevant responses from the AI models, prompt engineering is crucial. The application uses prompts that are tailored based on the coaching option selected by the user. These prompts include the user’s chosen topic, and a template that gets populated with the actual user input. The prompt can also be designed to influence the length and specificity of the AI’s responses.
• Interaction via API: The application uses the open-ai SDK to interact with the AI models through the Open Router API. This involves initializing the OpenAI client with an API key obtained from the Open Router platform. The API key is stored as an environment variable for security.
• Passing Context: For more coherent conversations, the application has been designed to pass the conversation history (or at least the last few messages) to the AI model. This allows the AI to provide contextually relevant responses based on the ongoing interaction.
• Generating Feedback and Notes: A separate AI model (or potentially the same model with a different prompt) is used to generate feedback and notes based on the completed conversations. The summary prompt defined for each coaching option guides the AI in generating these summaries.
• Client-side vs. Server-side Implementation: Initially, the code for interacting with the AI model was implemented directly on the client-side. However, due to potential security concerns (exposing the API key) and best practices, the source suggests that it might be better to handle the AI model interaction on the server-side by creating an API endpoint. The source also mentions a quick fix of using dangerousAllowBrowser: true to bypass a browser security warning when using the OpenAI client directly on the client-side for development purposes.

In summary, AI models are the intelligence behind the voice agent, enabling it to understand user input, provide educational content, and generate valuable feedback and notes. The application leverages the Open Router platform to access a variety of LLMs and uses prompt engineering and conversation history to guide the AI’s responses. The interaction with these models is facilitated by the open-ai SDK.

AI Voice Agent: Text-to-Speech with Amazon Polly

Based on the sources, text-to-speech (TTS) is a crucial component of the AI-powered voice agent for educational purposes. It serves as the mechanism to convey the AI agent’s responses to the user in an audible format, contributing to a more natural and interactive learning experience.

Here’s a breakdown of the text-to-speech aspects discussed in the sources:

• Core Functionality: The application aims to convert text responses generated by the AI models into speech, allowing users to hear the information rather than just reading it. This is essential for creating a voice-based interaction.
• Technology Used: The application utilizes AWS Amazon Polly for the text-to-speech functionality. Amazon Polly is described as an AWS service that converts text into lifelike speech. It is also mentioned that Amazon Polly is free to use.
• Implementation Details:The implementation involves using the AWS SDK client for Polly (@aws-sdk/client-polly). This SDK needs to be installed as a dependency in the project.
• A PollyClient is initialized with AWS credentials (access key ID and secret access key) and the desired AWS region. These credentials need to be obtained from an AWS account with appropriate permissions for Amazon Polly. It is recommended to store these keys as environment variables for security.
• To convert text to speech, a SynthesizeSpeechCommand is created. This command requires several parameters:
• Text: The text that needs to be converted into speech. This text comes from the responses generated by the AI model.
• OutputFormat: The desired format for the synthesized speech, which is set to MP3 in this application.
• VoiceId: The voice to be used for synthesizing the speech. The application intends to select the voice based on the coaching expert chosen by the user. The expert’s name is used to determine the VoiceId for Amazon Polly.
• The polyClient.send() method is used to send the SynthesizeSpeechCommand to the Amazon Polly service. This returns an audio stream.
• The audio stream is then transformed into a byte array (transformToByteArray).
• The byte array is converted into an audio blob (new Blob) with the correct MIME type (audio/mpeg).
• Finally, the audio blob is converted into a URL that can be used by an <audio> element in the browser using URL.createObjectURL().
• An <audio> tag is added to the user interface with the src attribute set to the generated audio URL and autoplay enabled, so the AI agent’s response is played automatically.
• Voice Selection: The VoiceId parameter in the SynthesizeSpeechCommand is linked to the coaching expert selected by the user. The application attempts to use the expert’s name to choose a corresponding voice from Amazon Polly.
• Error Handling: The code includes a try…catch block to handle potential errors during the text-to-speech conversion process, logging any errors to the console.

In summary, Amazon Polly is the chosen service for converting the AI agent’s textual responses into audible speech. The implementation involves using the AWS SDK, configuring credentials and voice settings, sending the text for synthesis, and then handling the resulting audio stream to play it in the user’s browser. This text-to-speech capability is essential for creating a fully interactive voice agent.

AI Voice Agent: A Next.js Educational SaaS Application

The sources detail the development of an AI-powered voice agent for educational purposes built using React and Next.js. This is described as a full-stack SaaS application being built from scratch. Here’s a comprehensive discussion of the Next.js application based on the provided information:

• Foundation: The application is built upon the Next.js framework, utilizing its features for server-side rendering or static site generation, routing, and API endpoints. The initial step in the development process involves creating a new Next.js application using the command npx create-next-app@latest. Using @latest ensures that the latest version of Next.js (version 15) is installed.
• Project Setup: The setup process includes prompts for project name, TypeScript usage (chosen as ‘no’), ESLint linking (chosen as ‘no’), Tailwind CSS (chosen as ‘yes’), src directory (chosen as ‘no’), and App Router (chosen as ‘yes’, which is highlighted as very important).
• Project Structure: After creation, the project structure includes key folders and files:
• app folder: This folder contains all the pages, routes, and layouts of the application. Next.js uses a folder-based routing system, where the folder structure within the app directory defines the application’s routes. Files named page.js or page.jsx are treated as route handlers.
• public folder: This folder is used to store static assets such as images, fonts, and other files that can be directly accessed by the browser.
• global.css: This file contains the global styles applied to the application. With Tailwind CSS version 4, the Tailwind CSS color variables are included directly in this file, eliminating the need for a separate tailwind.config.js file.
• layout.js (or layout.jsx): This file defines the root layout of the application. It contains the <html> and <body> tags, and all pages are rendered within this layout. Custom fonts and meta tags for SEO are also typically added here. Specific layouts can also be created within subdirectories (e.g., main/layout.jsx for the dashboard layout) to apply different structures to different sections of the application.
• page.js (or page.jsx) in the app directory: This is the default page of the application, rendered when the user navigates to the root path (/).
• next.config.mjs: This file contains configuration related to the Next.js application.
• package.json: This file stores information about the application, including its name, version, scripts for running and building the application, and a list of dependencies and devDependencies along with their versions. The source notes that after installing Tailwind CSS version 4, it and its related postCSS dependency are listed here.
• Routing: Next.js employs a folder-based routing system, making it easy to define routes based on the directory structure within the app folder. The source mentions that Next.js handles routing without manual configuration and that the developers will learn about nested routing and dynamic routing.
• UI Components: The application integrates Shadcn UI, a Tailwind CSS-based UI component library. Shadcn UI components are installed individually using the npx shadcn-ui@latest add <component-name> command. The library is configured using npx shadcn-ui@latest init. Shadcn UI components generate .jsx files within a components folder, which can then be imported and used in the application. The theme and base color of the UI can be customized.
• Authentication: Stack O is used as the authentication service provider for the Next.js application. The integration process involves installing the Stack O SDK using npm install @stack-o/js. Environment variables provided by Stack O are stored in a .env.local file. Stack O provides pre-built UI components for sign-up and sign-in, such as the UserButton, SignIn, and SignUp components. Middleware can be used to protect specific routes by checking user authentication status.
• Data Storage: Convex is used as the open-source database for the application. The Convex client library (convex) is installed using npm install convex. A Convex development environment is started using npx convex dev. Convex uses a schema defined in schema.js to create tables. Mutations and Queries are defined as functions within Convex to interact with the database. Next.js hooks like useMutation and useQuery from the convex/react library are used to call these Convex functions from React components.
• State Management: React Context is used for state management, specifically to share user data across different components. A UserContext is created, and a provider wraps the application to make user information accessible throughout the component tree.
• Layouts: Custom layouts are implemented to provide a consistent structure for different parts of the application. For example, a dashboardLayout is created within the main folder to provide a specific layout for all routes under /main/dashboard.
• API Routes: Next.js allows the creation of API routes within the app/api directory. These routes can be used to handle server-side logic. For example, an API route /api/get-token/route.jsx is created to fetch a temporary token from Assembly AI.
• Deployment: The application is deployed on Vercel, a platform optimized for Next.js applications. The deployment process involves pushing the code to a Git repository (like GitHub) and connecting it to a Vercel project. Vercel handles the build and deployment automatically. Stack O also requires setting the application to production mode in its dashboard and potentially adding the production domain.

In summary, the Next.js application being developed leverages many key features of the framework, including its routing system, component-based architecture, layout capabilities, API route functionality, and integration with third-party services and UI libraries to build a comprehensive AI-powered educational tool.

Stack O User Authentication in a Next.js Application

Based on the sources, user authentication is a critical aspect of the AI-powered voice agent application, ensuring that only authorized users can access the dashboard and secure their data. The application implements user authentication using Stack O, which is presented as a free alternative to Clerk.

Here’s a detailed discussion of user authentication as described in the sources:

• Authentication Service Provider: The application utilizes Stack O as its authentication service provider. Stack O is chosen for its ease of use and the fact that it is free.
• Integration Process: Integrating Stack O involves the following steps:
• Creating a Stack O Account and Project: The developer needs to create a new account on the Stack O website (stacko.com) and then create a new project within the Stack O dashboard.
• Selecting Sign-in Options: During project creation, the developer can choose which sign-in methods to enable, such as Google, GitHub, email/password, etc..
• Obtaining Environment Variables: Stack O provides environment variables (API keys or IDs) upon project creation, which need to be copied.
• Installing the Stack O SDK: The Stack O JavaScript SDK (@stack-o/js) is installed into the Next.js project using the command npm install @stack-o/js.
• Storing Environment Variables: The copied environment variables from Stack O are pasted into a .env.local file in the root directory of the Next.js application.
• Initializing Stack O: Running the command npx @stack-o/js init in the project’s terminal initializes Stack O for the application. This might require using sudo on macOS due to permission issues. This process adds necessary files like handlers/stack/page.js, loading.js, layout.js (with a StackoProvider), and stack.js.
• Authentication Flow: The application enforces authentication with a standard flow:
• When a user attempts to access protected areas (like the dashboard), the application first checks if the user is authenticated.
• If the user is already authenticated, they are redirected to the dashboard.
• If the user is not authenticated, they are redirected to the sign-in/sign-up page provided by Stack O (/handlers/signup).
• After successful sign-in, the user is redirected back to the dashboard.
• Protecting Routes: The application uses middleware (middleware.jsx) to protect specific routes from unauthorized access. By specifying route paths within the middleware, the application can ensure that only authenticated users can access those routes. For example, the source indicates that all routes under /dashboard will be protected. The middleware utilizes the @stack-o/server/app package and NextResponse from next/server.
• Stack O UI Components: Stack O provides pre-built React components that simplify the integration of authentication features into the user interface:
• UserButton: This component displays the user’s profile image and provides options for account settings and signing out.
• SignIn and SignUp components: These dedicated components provide ready-to-use sign-in and sign-up forms.
• User Information Retrieval: The @stack-o/react package provides the useUser hook, which allows React components to easily access the authenticated user’s information, such as display name, primary email address, and profile image URL. This hook is indicated to be used on the client side.
• Saving User Information to the Database: Upon the first successful login, the application saves the user’s information (display name, primary email) into the Convex database using a mutation called createUser. This function checks if the user already exists based on their email; if not, a new user record is inserted with default credits.
• Account Settings and Sign Out: Stack O provides a dedicated account settings page that users can access. The UserButton component offers a straightforward way for users to sign out of the application.

In summary, user authentication in this Next.js application is handled by the Stack O service, which provides a comprehensive set of features including UI components, route protection via middleware, and user management. The integration involves a simple setup process, and the application leverages Stack O’s capabilities to secure access and manage user sessions. Upon successful authentication, user information is also stored in the application’s database (Convex) for further use.

The Original Text

with the help of react nees and power of AI we are going to build a powered voice agent for educational purpose this is one of the gamechanging size application which we are going to build completely from the scratch hey there and welcome back to tub guruji Channel today we are going to build AI powered Vice agent to learn about a specific topic give the mock interview learn about the question answer or you can even learn any Lang languages this AI voice agent help you this is a full stack s application which we are going to build completely from the scratch after building this application you going to learn how to convert text to speech or speech to text as well as how to get the response from the AI and how to present to the any user with modern UI Trends we are going to design this application and build it step by step let me walk through the demo of this application and then we’ll talk about the all the text tag which we are going to use to build this application here we have this beautiful Landing screen and after clicking get started it will redirect you to the signin screen where you have option to sign in with the GitHub sign in with the Google or even you can sign in with the email and password so let’s sign in with the Google after sign in you will land on the dashboard screen if you see after refresh you will see this beautiful animation effect it will give you say the feding effect to this all the list then you have all these different different options that you can add it and you going to learn how can you add other uh coaching option as well for example if you want to learn about the any topic based uh lectures you can get that even though you can do the mock interview or prepare for the question answer then if you want to learn any new language that also you can learn and for if you want put a con concentration while doing a study then you can select this meditation option let’s select this mock interview now if I select here you need to give topic on which you want to give the mock interview let’s say you are a full stack developer and you want to give a mock interview on that one so we’ll say full stack uh frontend developer and especially you can say reactjs then you have option to select a coaching expert you have Jonah Sally joy and that also so I’m going to tell you how to do it and simply after selecting click next then you’ll land on this discussion room page where you have option to connect now right now I disable my camera but once you enable this camera you can see your uh camera or webcam view as well at this side at the bottom side then we’ll connect with the jna and then once it connect we will start conversation hi Jonah how are you good morning good morning I’m doing well thank you ready to dive into your interview yes I’m pretty excited great to hear let’s start with the basics what is react and why would use it in a project react is a web framework to develop the web application and it’s client Side Library as well good start to clarify react is a JavaScript library for building user interfaces can you explain its key features and that’s how you can do a two-way conversation after doing the all the conversation you have option to generate the feedback If You observe when you talk about uh anything you will see a live uh Speech to Text option and that’s how we are going to implement with the help of asembly AI assembly AI help us to stream the speech to text and with the of that one we are going to implement the speech to text uh feature into our application now on the right hand side you will see all this uh conversation between you and the voice agent over here you will see an option to generate the feedback and notes depends on your conversation now if you are giving the interview then it will generate the feedback for your interview and some suggestion as well to improve it and if you are learning uh topic based lecture then it will give you the notes let’s generate the feedback and notes it start generating the feedback and notes with the help of AI models that we are going to learn how to connect and attach to our application once the feedback and notes are saved you will see this notification and then you can go back to the dashboard on the dashboard you will see this option where you can see the feedback anytime if you talk about any lecture then you will see the notes over here if I go to this View feedback it will navigate to The View summary screen where you will see your conversation everything in the detail along with uh some key feature the uh the Gap where you are lacking and everything in the detail on the right hand side you will see the conversation and depends on that one you got the feedback for that given interview everything we are going to implement from the scratch but not only that we are conver this application to SAS if I go to this profile you will see we use this token based architecture where depends on the user usage we are updating the token user have option to upgrade to the paid plan and with the help of Reserve pay payment Gateway we added the payment integration as well right now I’m on paid plan and that’s the reason I’m able to use up to 50,000 tokens and that’s completely uh up to you how much much token you want to give for a free or on a paid plan over here you also see an account setting option if I go to this account setting you have option to update your profile email out and everything and everything that we are going to implement within a one single component without writing any code how cool right as this is a completely responsive friendly application and you can also work on this application can work on any different kind of uh devices this application is not only a SAS application but with this application you going to learn a lot of different text tack which are very important to get a job in the IT industry once you build this application it will be very useful to the all the students or job Seeker to prepare for their exam and interview let’s talk about the text tag which we are going to use to build this application along with the react and negs we are going to use a tawin CSS version 4 then for the UI component Library we are going to use a shadan and for the database we are going to use a convex database also we are going to learn how to do the convex self hosting and for a streaming speech to text we are going to use an assembly AI with the help of assembly’s streaming speech to text you can convert the live audio into a text up to 90% of accuracy and within a less than 600 millisecond of latency how cool and that also we going to learn from the basic then for the AI model I’m going to use open router where you can explore a multiple AI llm model and the last but not least the Amazon poly to convert our text to speech everything and all the sources that we are going to use to build this application is free to use also if you want to access all of my uh exclusive courses and the source code you can visit to tui.com where you will find all the projects and their source code you can join the tub gurji Pro membership just under $15 also assembly AI will give you $15 of credit by joining the link in the description just click on that one and you will get $50 of credit to use it all the important links all the text tag which we are going to use I will put the link in the description so that it will be easy for you to access it so guys without doing any further delay let’s begin to develop AI voice assistant for educational content now let’s create the react nijs application so this is a command to create the nextjs application so simply go to the folder where you want to create this project open a terminal at that folder and then just type npx create next app at latest now we you mentioned at latest then it will install the latest version of nextjs which is nextjs 15 then say do you want to proceed and then it will ask you to enter the project name so here we’ll say AI coaching voice agent okay we can rename that again later on then it will ask do you want to use ties script we’ll say no also no to the yes link and yes to the telin CSS now recently telin CSS um launched the version uh four and with that version it will you will not see the telin CSS file but obviously once you say yes it will install the telin CSS for you and we will see the all new changes introduced inside this telin CSS version 4 say app router yes this is very important and we’ll send not to other two question now if you see uh it it will install some dependency which is the important like react react Dom next and Dev dependency for the twiin CSS now project is ready simply go to the vs code open a folder where you just created your project and I will open this folder say yes I trust the author and here you will see all the files and some folders get created when you create your application let me walk through each one of one by one so first is a app folder which contain all your pages routes uh the layouts right so first we have this global. CSS so which contain the all the style applied to the uh application so you can mention it here now with with the help of tvin CSS version 5 all the tvin CSS color variable also included inside the global CSS so you will not find the new or separate file for the tail. config.js file okay if you see we don’t have that file anymore then we have layout. Js which is the root layout of your application in which you will see this HTML body tag and through this body tag you are all the pages are going to render here you will see the meta tag as well this is very important uh in order to add SEO inside your application and at the top uh here you we have some uh custom fonts which is applied but obviously uh you can update it that later on then we have the page.js file which is the default page of your application now once we run the application you will see this page is going to render then we have this public folder in which we are going to save all our images assays font whatever you want you can save inside this public folder and without mentioning any path you can directly use it right then we have this uh next doc. MJS file which contain the configuration related to the nextjs application the package.json which contain the name and version of your application also uh the script to run to build your application and the dependency along with their version so whenever you install any new dependency you will see this dependency along with their version and the de dependency as well here you will see the tailn CSS is now on version 4 and this is the post CSS which is again related to the telin CSS only now simply go to the terminal click new terminal or you can open this terminal from the bottom just type a command npm run D click enter and then you will see your application is now running on this particular URL with this 3,000 port number so I will just go to this browser open this local 3000 and then you will see your application is now running as I say in the beginning that this is the default page which is nothing but our inside this app we have this page.js file and this is the default page of your application now let me bring this side by side quickly and let me delete all of this line of code okay and simply we are going to add a du tag inside the DU tag I will add h2 tag and here we will say subscribe to tube guruji so if you did not subscribe to our Channel please do subscribe and save it as soon as save you will see the text is now displaying to subscribe to tub G now all the routes or Pages you need to name with the page.js file and the route name is nothing but the folder name which you want to give that we are going to learn it also along with that one you want to learn how to add the nested routing Dynamic routing and many more as nextjs is a folder based routing it will be very easy and you don’t need any configuration for the routing now next thing we want to uh add the UI component Library which is a Shad CN Shad CN is a tailn CSS based UI component library and it’s very popular among the developers simply go to the ui. shen.com and here just go to this documentation now click nextjs as a framework because we want to install now at the top here you will see the following guide is for twin CSS version 4 right but if you’re using version three or any other then you have to follow this tutorial okay or you can use this shadan with the version now this updated shn tutorial is supported with the version T CSS version 4 okay now simply copy this command in order to initialize the shadan I will open another terminal and and simply we’ll execute this shadan command now we’ll say yes to proceed and then you can select the base color whether you want neutral gray or any other so here we’ll select the neutral and obviously as we are using the react version 19 we have to forcefully um add this Library so we’ll say use force and then it will install but if you next from next time if you don’t want that particular command to run just go to the package.json and simply update the react version to 18 it will not affect to your application but make sure once you update the version inside the package.json install make sure to run this npmi command so it will install the L uh whatever the version you mention that particular package will will get installed now once the shat scene is ready you will see inside our folder uh or inside our Explorer you will see two new things get added one is the leave folder inside that we have .js file and other component. Json file which contain the shn related configuration here you will find the theme the base color the style and everything next Let’s test this particular component now whenever you want to use any shat CN UI components you have to first install that component so in this case let’s say you want to use button component so I will copy this inside the terminal let’s paste that and then once the button component get installed you will see inside this component folder this button. jsx file get added obviously this is the shat you have option to customize whenever you want and if I go back to the button.js I will simply add this button component and here we’ll simply write subscribe now if I go back back to our application here you will see the button called subscribe obviously it’s not uh it’s like just like a ghost kind of thing it’s not showing the color and everything because we provide a neutral uh color also if I go to this Global CSS here you will see all the colors and the the respective color code as well here you can update your color with your hex code as well if you want to add something like hash which is kind of black color save it and if I go back you will see the button color will change to Black okay so it’s up to you and obviously you can customize all other um styling as well if you want to use something like let’s say destructive okay so I will go to this button I will put the variant as a destructive and here we have this destructive um button okay so uh everything whatever the theme you want to add just update the color combination and then you are good to go it’s time to add an authentication inside our application it’s very important if you are developing any size application you have to protect your application from unauthorized user to maintain all the data to be secured from unauthorized user and that the reason also we are going to add an authentication inside our application so let’s consider that user want to xess access our dashboard or application first obviously we going to check if user is authenticated or not if user is already authenticated then we are going to redirect user to the dashboard if not then we’ll redirect user to the signin sign up page and after successful sign in only then we are going to redirect user to the dashboard as as simple as that and in order to add an authentication we are going to use a stack o when I search on Google the bestas authentication service provider there are lot of service provider like Clerk and stack O is a alternative for the clerk so I thought to give one try to the stack o and let’s see how it works so simply simp go to this stack o.com and create a new account and again one more important thing that it is free to use okay so you don’t need to pay anything I will log to my account and after successful signing you will land on this project page where you have option to create a new project so we’ll click on new project here uh give the project name so we’ll say AI coaching voice agent you can give whatever name you want you can even change that later on and and here you can add whatever the signin option you want to add right now I’m keeping sign in with Google sign with GitHub email password and everything now simply click create project after creating project you will get this um en variable just copy that and go back to your application inside the root directory we’ll create a EnV file or we click. loal and simply paste this all these three which key which we copy and save it after that we’ll say continue and then this is your um dashboard for your application here you can see once user login and accessing your application you can see live uh from which country which location everything then at the bottom you will see uh all the daily signups active user everything inside this user tab you will find the list of user and there are other lot of things you can just go ahead and access it here obviously you have option to modify your different SSO providers as well you can add it you can enable disable now simply go to the documentation page because that’s where uh obviously we need to integrate first and click on setup and installation first thing uh this is the recommended way okay and it’s very easy to go but you can uh do it manually as well let’s select this command and copy this command and go to this project inside the terminal we’ll just paste this command and then it will ask you do want to proceed we’ll say yes and then next uh it will initialize this uh stack up for us so right now if you see on the Windows you might sorry on the Mac OS you might get this error okay because it is just um not allowing user or is denying the permission in Windows you might not get this error okay so simply what I will do I will run this command using sud sudo so that it will ask me to enter a password just we are giving permission to write into the file and now if you see it will it will ask question we found the nextjs project do you want to install the stack o so we’ll say yes click enter and then it will start installing the uh stack op for us now after successful installation automatically this page will open okay just close this one and here you will find some of the file get created let’s go to this uh folder structure and inside this you will see a new folder get created called Handler and and inside that we have this stack folder and then inside we have this page.js file which is added by Stack o again after this you will see one more file get added called loading. JS and lay inside the layout. JS you will see this tag provider uh get added okay this is the context and this context get added with this all the uh oh stack theme is also get added so this component two component get added okay and last important thing the stack. JS so these are the file get added you don’t need to worry about any of this file okay just I’m telling you just that you will get to know okay which are the files uh where it came from and everything now I will go back and over here obviously in the step three it will it’s just mentioning which are the different different file get added and everything okay now if I go to this particular route which is local 3000 Handler SL signup let’s click on this one you will see our application now has the dedicated signup screen how cool right now obviously um all of these things you can manage from your um U dashboard page okay and that’s where you can enable or disable the provider I will select the account and we’ll log to our account and once you log in now obviously you will redirect to this local 3,000 page okay so that’s how simple it is in order to add at this authentication service provider now you can even go to this account setting page and here you will see your account details along we have the sidebar and everything okay uh obviously we are not going to use this but in if I go to this next here we have this dedicated component called user button then we have this sign in sign up component and lot of other let’s try this user button so simply I will go to our page.js and I will use this user button component okay if you see it is that it’s importing from the stack frame / stack and simply save it now if I go to this local 3,000 I will just refresh this and here you will see the user profile image if I click on that one you you will see an option called account setting sign out the user email and all perfect right so that’s how you need to add an authentication now one more important thing that there are there is a uh um obviously you need to add or you need to protect some routes right so if I go to the next um with the help of this ug user hook you will get the user information that we will see later on but if I scroll down again I think uh protecting page so this is the option called protecting page now there are three way that you can protect the page one using this middle we file one is the client component and one is the server component the best way I think is a middleware because everything you can keep in one file only whenever you want to protect any routes you can just mention that over here so I will create this file called middleware and this need to be a jsx and simply we’ll copy this line of code now make sure to install this stack server app from the stack and make sure to import uh import this next response as well and then save it right now we are not protecting any route because we only have the default page but once we have the dashboard and everything is set up then we are going to add the route which you want to protect okay so that route we going to add inside the middle wear. jsx file now next Once user is authenticated very first time we going to save user information to our database so that we can keep a track of all the user uh activity and everything so that what we are going to see next in order to store a application data we need a database and for that one we are going to use a convex convex is a open-source database for your application uh it also provide a lot of different feature like realtime updates it’s a type safety included also if you want to run any specific task you have the chrone job uh in order to store the file they also provide a file storage functionality and there are many more I’m using this convex from a long time and it perfectly work into any application with the help of convex you can build web application mobile application keeping your data at one place now convex provide a two different way to where you can use the convex one is the convex Cloud where you can uh set up the datab based on their own platform or convex also provide a self hosting where you can host the convex on your own premises or on your own platform how cool right and in this particular chapter we are going to see both the feature that how to enable convex on their own platform or how to do the self hosting with the help of Docker so first thing go to the convex DOD and here create a new account if you don’t have or just log to your convex account here if you see I already have a lot of project I created with the convex and here are some of the project which you can see that I already used the convex now simply click create project and give the project name here we’ll say AI coaching voice agent and simply click create once it is created your database is now ready over here inside the data you can able to create the tables obviously we are going to write a schema in order to uh generate these tables then whatever the function you write you function will comes under this function tab then you can upload the files you can schedule the chrone job and everything you will find over here the best thing about this convex that you can keep this Dev environment and the production environment separately you also have preview environment as well how cool right so you your data will be uh specific to that particular environment also once your convex is ready simply click in the link in the description about the convex documentation then you will jump on this specific documentation for the convex nextjs now first thing you need to do is uh to install the convex as we already created the nextjs application so we’ll just go to the uh copy this npm install convex command we’ll go to our terminal and inside the new terminal we’ll execute this command after this you just need to run npm npx convex D so right now okay I need to run with this pseudo so we’ll run with the sud sudo npm and after that I will run this npx convex de so it will run the convex now we’ll choose the existing project and here make sure to select the correct project so I will select the AI coaching voice agent and click enter and over here you will see it’s saying your convex function is ready now inside the Explorer you will see the new folder get created called convex and inside that you will have some of the files you don’t need to worry about any of this file right now okay now let’s go back and the next important step you need to do is wrap your application inside this convex provider okay so if you see this children is rendering inside this convex provider so we’ll go back to our application and inside this app folder we’ll create a new file called provider. JS you can say jsx add a default template and I will just rename this to provider with the p capital and I will accept the children now I’m making this provider as a different file from the layout because we can keep this provider on the client side and we can keep the layout. js on the server side now simply I will also Mark this as a use client and save it now make sure to render this children like this and inside your layout. JS now I will wrap this children inside this provider now obviously on the application side nothing will get change okay now simply you copy this import statement okay let’s copy this one and inside the provider I will paste it here next you need to copy this convex provider client okay now if you see over here inside the clients they provide this convex okay they initialize this convex client so I will just copy this and we paste inside this provider I will just remove this exclam Mark and uh this next public convex URL it automatically get added inside your env. loal and if you see it has this convex deployment URL and the convex URL as well this is very important because that we need it later on but for now you’re good and then we’ll W this children so copy this convex provider and I will just paste it here something like this perfect right after this if I go to this particular section you don’t need to implement that this all of these things because we keep as simple as as it is and I think your convex is now ready and anytime if you find any error you can see inside the terminal now let’s create a new table so I will go to this convex folder and we’ll create a new file called schema .js now inside the schema we’ll create a new table and inside this schema we’ll simply say export default Define schema and inside the Define schema you need to write a table name let’s say users here we’ll say Define table and inside this Define table you need to mention all the column which you want let’s say we want a name column which is of type let’s make sure to input this uh convex value as a V Dot string then email ID we want so we’ll say email column as V do string again and I will also put a credits column uh which is of type number okay so we can give some default credit to the user and here also we will say subscription ID if you subscribe to our uh application right with some payment that subscription ID we want to save which is up type string obviously later on you can add as much column you want as well you can come back add the column and that’s all as soon as we save this one you will see that our convey function is now ready if I go to our convex uh data and boom here we have the new table cool right inside the schema you will see the schema which you wrote and obviously if I click on add you you will see these are some of the fields uh which you can add it it’s nothing but those column now you might wonder why we did not add it the ID column now convex will automatically generate the unique ID for each of the record also along with that one it also generate the uh created time when you created this record so you don’t need to uh create those column okay now let’s save this one and that’s all that’s how you can create and set up the convex now this is the first method that you are running this convex on their own platform okay obviously uh you cannot move that because that is running on their convex Cloud platform okay now the question is how to do the self hosting so simply click on the link uh which I kept in the description which is regarding the self hosting and click on this self hosting guide okay I will also put the link in the description now on this particular documentation you will find everything in the detail how to uh host the convex on the docker with the help of Docker how to connect the convex to the postgrad SQL database using the neon and there are lot of other uh things is mentioned inside this documentation let’s do one by one for because first we want to host uh convex on our platform so with the help of Docker we are going to do so so simply go to the doer. and if you’re not familiar don’t worry just follow this particular video and you will be okay so click download Docker desktop and make sure to select your operating system and downloaded it now I already downloaded so I will just open this Docker see so I will open the docker and uh in the meantime it’s opening but yeah this is how it looks like okay if you see I already have this Docker sorry this particular application running on this Docker but um let’s go to the documentation and you need to download this Docker Das compose file so just click on it make sure to download now I already have multiple files but I will edit the name as well so I will copy that and will paste inside the root directory now I will just rename this to only Docker compose okay something like this after that let’s go back to the documentation again you need to run this command called Docker compose up so inside the terminal we’ll add a new terminal and just paste this command now it will set up the back end and dashboard for you with the with the help of Docker and convex so we’ll wait to finish and after that you need to generate the admin key okay which using this command so copy this command and once it is finished creating the back end and the dashboard if you see now it’s running right now inside the new terminal we’ll just run this command which will generate the admin key see now go to this particular URL local 67 91 and on this particular uh URL you need to add this admin key so copy this admin key and simply paste it here and click login and boom now if you see same UI you will see on the convex Cloud as well that also running on your Local Host it means it’s running on your local and you don’t need to worry about the cloud how many users you have to do nothing about that you can just run convex locally how cool right now next thing if you go back to this documentation that you need to add these two variable so let’s go back to your environment file so I will go to this enemy. loal but make sure to comment this both this URL because that that was running for the cloud right now we will add this self hosted URL and self hosted admin key now whatever the admin key is generated I will just copy that and I will paste it here say okay now once you put the production you just need to updated this host hosted URL that also mentioned in this documentation how to put in the production now obviously we already have the convex installed you don’t need to install but you can run this convex de command so simply what I will do I will go back to this particular convex and obviously it’s running again see it’s updated but I will stop this and I will run this npx convex T command and boom see now that’s all you need to do now if I go to this local 6790 sorry 9 6791 and inside the data you will see the table call user and here obviously whatever you saw in the convex platform same thing you will see inside your convex local as well okay so that’s how you can uh do the convex self hosting if you have any question about the self hosting you can always reach out to the convex Discord Channel or you can ask the question in the comment section or on my tube gji Discord Channel as well now once user successfully sign in or sign up we need to save the user information to our database as our database is already set up just we need to save the user information we also need to make sure that if user is new then only we want to save the user user information but if user already exist inside our database then we don’t need to store the user information so let’s go back to our application and inside the convex we need to write a function so I will create a new file called users. JS and inside that we’ll create export constant create user now inside this create user we are going to insert the user inside our database for that one obviously it’s a mutation so we’ll say mutation but if you are fetching the data then it will be a query now make sure it’s importing from this uh path then inside that we’ll get the arguments okay now obviously inside the argument we’ll get the usern name we’ll provide a type so we’ll say V Dot string then we want to uh get the user email of type string so right now only two parameters are necessary then we want to add a Handler with a Sync here we have CTX comma arguments and the arrow function now first thing we’ll check if user already exist if not then add new user okay now in order to check if user is already exist or not we’ll say constant user data is equal to AIT cx. db. query because we want to F the record you have here you need to give the table name dot filter and depends on the email ID we will we can check it so filter here we’ll say q q do uh equal and inside that we’ll say q. fill on email comma uh arguments. email here we’ll check the fill from the table and from the our uh arguments email we’ll check if both are match then just f it okay like this now if user data user data is empty okay so here we say if user data Dot length is equal to equal to zero it means it doesn’t don’t have any user data then we need to insert the record so here we’ll say constant result is equal to await CTX do DB dot insert and you need to provide a table name users and then you need to provide the value so first is name now instead of providing this value over here I will just Define a constant called data and inside that we’ll Define name let’s say name with arguments. name then email as arguments. email and I’m also going to provide credits okay uh from obviously I will put default credit to 50,000 also one more thing that I’m going to update so inside the schema I will make this subscription ID as a optional field so just wrap this particular column inside this v. optional okay so we are just making that this particular field is optional you don’t need to pass any data if you don’t have so right now these three field are mandatory so we are passing that one and either you can pass data something like this or you can just destruct dest structurize it something like this okay it’s up to you and once it is inserted we’ll return the data now we are not returning the result because result will only return the um inserted ID so we’ll just console that one as well okay but if uh user data is already there then over here we’ll say return user data of zero now obviously user data will give the list and from the first item we need to just return that one and then save it so this is how easily you need to create a function and inside this function you will see all the logic we return now next thing let’s go to the app and inside the provider. jsx here instead of Provider we’ll create another provider okay so here we’ll say uh Au provider. jsx okay now what out provider will do it will check if user is new or not but first we’ll Define this o provider something like this um you can rename this provider only I think that’s okay that’s fine I think o provider and just get the children I will render this children over here and then I will wrap this o provider something like this okay now if I go to our local 3,000 you will not see any change okay because we are just rendering this children again through this OD provider now inside this OD provider first we’ll get the user information using constant user is equal to use user and this user hook we are getting from the stack frame okay now if you want we can I can show you what data it will return so whenever the user information is available we’ll just console this user and if I go to this inspect panel go to the console here inside this object you will see that it will return the display name then it has the primary email address profile image URL and many other things perfect now simply in order to save the user information we’ll create a new method called constant here we say create new user and uh simply first Define the mutation so we’ll say create new create user mutation I will say only is equal to use mutation and if you see this use M mutation is importing from the convex re inside this use motation you need to provide this API so which is api. use us. create user now over here we say constant result is equal to await and the mutation name which is create user and then inside that you need to provide the value the first is the name that you can get it from the user do display name and the email which is user dot uh email I think let me a primary email I believe so you can just check the object and where is the email so which is this primary email perfect now here let make this as a sync and once you get the data you will see inside this result Now call this create new user method only when the user information is available let’s say with this one let’s go back to our application and I will just refresh this screen once and right now we have one error okay so it’s about the so we use this hook you user okay and I think it look like we need to call this on the client side so let’s make this as a client and let’s test this out now this error cause because we added this loading. TSX file but it’s saying NOS SP boundary error now to fix this issue simply go to your uh provider. jsx and over here I will just add this suspense from the react okay so make sure to wrap this and over here we say fall back and inside that we’ll add a P tag we’ll say just loading okay so this is a fallback Whenever there is a loading going on now if I refresh it you will see the text loading and then it will jump on this particular uh home screen over here in the inside the console you will see inside the loging we got this ID from this create user convex cool right and it will return me this particular information that we that we are expecting not only that but if I go to our database here inside the users you will see a new record with the credit email name obviously we are don’t have subscription ID but we also have this creation t along with this ID right and this is the same ID what it is printing over here because this is the inserted record ID right which we um console inside this create user right now we don’t need this I will remove that one and that’s how you need to add now again if I refresh it now in this case it will just return us the data and if I go over here you will see we have this IDE and all the information but uh it will not insert the record into database because it’s already checking if this user email already exist or not and depends on that one it will take an action so that’s how easily you can write the convex function in order to create a new user and check if user is already exist with the help of convex functions you can write the logic on the on this convex function itself and you don’t need to write it inside your client component once we get the user information from the database we need to save in a state so that we can share it across a application in a different different components and for that one we are going to use a react context context is State Management who help us to share the data across the different component instead of passing from one component to other let me show you how to define it first so simply go to this app and inside this we’ll create a component sorry create a folder called underscore context now we are giving this name under UND start with underscore because nextjs then will not consider this as a route okay now inside this we’ll create a user context. jsx file now inside that I will give the context name I will keep the context name similar to the file name and we’ll say create context and that’s all that’s how easily you can create the context now next step is simply uh go to the O provider and over here you can wrap this children inside this user context something like this now to this user context obviously it has a provider so make sure to pass um add this provider and then we have to pass some default value so we’ll Define the user uh here we’ll say user data comma set user data is equal to use State and once we have the user information right over here we’ll set the user data as result and simply pass this user data State comma set user data now in in what or whichever component you want to use this user data information just you need to use the context call user context and then you can access that obviously you can you you want to learn how to do that but for now make sure that you are passing this user data to our user context provider now it’s time to design the dashboard screen where we are going to add the header at the top and we will make sure uh all the routes which user can uh have authorized to see right that on that all the pages we are going to keep this header uh constant then the the dashboard content contain this some options the button for the profile where user have option to see the credits account setting and lot of other things and then user have uh option that he can see the previous lecture and the interview feedback at the bottom okay this is Simple and Clean screen obviously all these assets I’m going to share with you so first let’s go back to our application and inside this app folder I’m going to create a new folder called main now inside this main folder whatever the um application routes which we want to keep after user authenticated we can keep inside this main folder now first I will create a layout. jsx file now this layout is dedicated to a dashboard screen so I will add a default template and we’ll call it as a dashboard layout okay now through this one obviously I’m going to render the children and nextjs will automatically detect that this layout page layout uh file can be used for all the route which is inside this main folder let’s save this one now inside this main let’s create a new uh folder called dashboard inside this dashboard uh we can create a page jsx file and then add a default template to this we’ll say a dashboard you can give any name you can say workspace as well and save it now if I go back to our application let’s go to the new route called dashboard you will see we are now redirecting to the dashboard screen perfect right but what user is not authenticated let me go back and let me log out user so I will sign out out the user and it’s saying leave the site then I will go to the dashboard screen and it’s allowing me but we don’t want that one if you remember when we add the authentication I we added this middle. jsx file where we need to add whatever the route which you want to protect so over here I will just add all the routes come after the dashboard we can just protect that see something like this and then save it now if I go back and try to refresh this you will see it will navigate us to a signin screen because it will check if user is already authenticated or not and boom if you say it’s navigated cool right now only one when you sign in then only you can able to access the uh dashboard screen and now if I go to the dashboard then I can able to access the dashboard that’s how you can protect your routes from unauthorized user okay perfect now let’s go to the dashboard and first thing we need to add the header so inside this main folder I’m going to create another folder called underscore components and inside this we’ll create app header do jsx now let’s add a default template and then save it now make sure to add this app header inside the layout because we want to keep this app layout throughout the uh Das dasboard right so over here we’ll say app header and then save now you will see uh on this we have this app header showing on the top now first thing we want to get the logo so I will use this logo placeholder site okay to get the logo it’s just a placeholder but you can replace with a with an actual logo so let’s search some Simple and Clean logo so I will get this logo click on it it will copy the SVG file and then simply go to the public folder inside that we create a logo. SVG file and paste the code which is the SVG code save it so that you can use inside this app header so first thing we’ll add image tag from the next SL image then Source tag now this image tag from the next slash image is very helpful for the image optimization okay now inside the source just Define the file name and automatically nextjs will detect that you are trying to access this particular image or file from the public folder now here we say logo now whatever the width and height you are mentioning here that you are just optimizing that image I will give let’s say 200 and height of 200 okay and save it now if I save and go back to our application or let me open this one let me make sure to save this one okay I think it’s saved and here we have the logo perfect obviously uh you can just change width and height according to your requirements then we also want to show a user button on the right hand side so here we’ll say user button now this component is inputting from the uh stack frame sl/ stack and save it and now it will reload I don’t know why it’s slow but yeah if you see now we have this profile now we want this button on the right hand side and also we are going to add some padding to this header so for this du we’ll add a class name We’ll add padding to let’s say three and we also add little bit Shadow so we’ll say shadow small and then save it now if you see once we add the padding we’ll see the change now also make this do as a flex and then make justifi between along with the item Center so that this particular item will be on the right hand side where we have option to see the account setting and other options cool right now this is how our header is ready now moving to the next part which is this particular section called workspace now over here I’m going to create a component inside the dashboard because this component related to dashboard so we’ll create that new folder called underscore compon components and inside this we’ll create we can call it as a feature assistant. jsx okay you can name anything and then add a default uh template now inside our page. jsx I will just add it here call feature assistants and then save it now if I go back to our application you will see that feature assistant will display over here right now we want to give some padding and margin so that we can keep everything in the center and depends on the screen size you can change the padding as well so for that one uh I will go to this layout. JS and I will give the padding to this children so that whatever the routes that we are going to add inside this uh main it will apply to all the screen so over here we’ll add a class name first we’ll give padding to 10 we’ll give margin top to let’s say 20 then on the medium screen we’ll give padding to 20 maybe yeah then on large screen we’ll give padding to 32 on extra large we’ll give padding X to 48 and we have 2 Xcel as well you padding to let’s say 56 and save it now once we add the padding you will see the feature assistant now showing over here okay let’s add more padding let’s say over here you can say 72 so that you will see the change so actually this screen comes under the Excel size so maybe we can increase this one perfect okay after that we want to add this particular text called my workspace and then welcome back and username so this will be the usern name that we want to display and on the right hand side we have this button as well so let’s go back and simply uh future assistant over here I will add a texe called my uh let me see the text so it’s called My workspace and Below to that we have wel welome back and the username so username will be uh we can or we can get that username from the hook so we’ll say use user okay and obviously May mark this particular component on the client side as well and over here we’ll just say user dot display name and save it okay and if I go back here we have this text called my workspace and on the second line you will see that we have the welcome back and the name of the uh user now let’s applied some style so over here we’ll say style oh sorry the class name because we are applying the tailn CSS over here we say font medium and I will just change the gray to let’s say 500 then for this S2 tag We’ll add a class name we’ll say text let’s say 3XL font bold and this is how it will look like on the right hand side we will add a button so first I will wrap this in a d and then we’ll add a button and we’ll simply say uh profile and save it you can name whatever the button you want and once you add you will see the button will display on the right hand side or obviously currently it is just below to that one but we want to move to the right side so I will again drag this de I add this both the component inside this du and then we’ll add a class name we’ll say Flex then justify between and item to be in the center okay also um let’s save this first and let’s see how it looks and boom now we want to keep the primary color little different kind of blue color right we want to change the whatever the components that we are going to add from the shatan we want the primary color something like our logo so in order to change the primary color for all the components simply go to the global CSS that’s where you will find all the uh color codes Now search for the primary right now it’s a black color we added right but over here we want to add some kind of blue so I will just change this x to uh 1 F at4 EF and then save it and make sure to okay let’s save this okay I think we need to add colum and save now once you save it just make sure to refresh your application and boom if you see the button color is now changed right and whenever you add any any component the primary color will be this blue color next we want to display all of these options right and for each of them I already added these images inside our public folder so if I go to the our project inside this public folder I added this let’s say interview. PNG language.png and so on as I told you that I’m going to share that with you now obviously uh we’ll create one list and in that we’re going to add the name icon and all other fields which we want so basically uh first thing I will create a new folder called Services inside the services we’ll create options. jsx file and inside that we say export constant um I will name it as let’s say what name we give for this component assistants so so here we’ll say um experts list we can say okay and inside that I will add the name let’s say um lecture on topic over here I will add the icon related to that one so inside this I already have this uh lecture. PNG so we’ll just name it as a lecture. PNG I will copy this and we’ll add it something like this okay right now for this particular screen If You observe we only want the image and the name right so that’s the reason we added only these two Fields uh then we want let’s say interview or we’ll say mock interview for that one we have this interview. PNG file then question answer prep over here say we’ll say qa. PNG and then we have the another one I think called languages here we say language.png you can name whatever you want and then last we’ll say meditation to focus on the study so here we’ll say mediation PNG and then save it now make sure to export this particular list so that you can use it so once you uh add added this all the options simply go to our app folder and inside our dashboard component where we have this feature assistant list right here we are going to just display that so I will add one du inside this du uh we’ll add an uh let me I forgot okay it’s a expert list do map and here we’ll say expert we’ll say just option comma index and the arrow function inside this we’ll add one more View and then oh sorry uh the D we want to add and inside that we’ll add an image The Source tag and inside this image we want to add option do icon okay here inside the alt tag I will give the option do name as a alt tag then inside the width you can just mention the width let’s say 150 height to 150 and then inside the class name you can actually mention the height so let’s say 70 pixel and width to 70 pixel now this width and height is used to optimize our uh images okay now let’s save this one and let’s go back to our application and over here now we’ll display the images and boom if you see we have all the images right also this particular error which you saw we got it because we need to provide the key as a index and then save now after this uh we also want to show the uh name or text whatever we give so here we’ll say option do name and save it and once we add that one you will see the name for each of these options perfect now we want this in the form of grid so for this du we’ll add a class name and we’ll make this as a grid Now by default we can show a three column and when screen size is larger we’ll say grid column 5 on extra large maybe we can say grid column 6 and save and now you will see everything will will be in the form of grid see perfect now obviously we want to add some style to this one first thing for this de I will add a class name we’ll give a padding to three and we’ll give a background color to a secondary also we’ll make rounded corner to let’s say uh 3 XL um we’ll make this Flex Flex column and justify in the center and also make item to in the center so everything will be in the center something like this say now let’s give some Gap as well so over here for this actually uh D we need to give Gap let’s say Gap to 10 perfect and uh let’s give margin from the top so over here we say margin top to 10 uh for now let’s make this F and let’s see how it looks I think five is also much better okay one more important thing um I think for now I think that’s good uh if you want to change the this text you can uh change the size and all here I will add just margin top to two and then save it and most important thing if you try to go to the inspect panel and change the size you will see the change now on the smaller screen I think it’s uh better if I go to the this mobile view this is how it look likees right instead of making three you can just mark this as a two okay so that will be good one perfect now next thing we want to add is this particular section okay so again we have to add uh two section for that one so I what I will do I will go to the page. jsx and just below to that I will add a du and inside this du first we want to add a component called uh lectures or we say history history. jsx we’ll add a default template and we’ll add another component called feedback do jsx now both the component I’m going to add over here first we have the uh history and then we have the feedback component now for this du we’ll add a class name and we’ll make this as a grid and make grid column one when the screen size is smaller and grid column two when the screen size is medium or larger and then I will give the Gap to 10 as well and now if I go back to this page you will see the history and feedback let’s give margin top so over here I will just add margin top to 10 then then uh we are I’m just going to Simply add this particular text and also we’ll increase this margin top to let’s say 20 now inside the history we’ll say the text called your previous lectures your previous lectures over here we’ll add a class name we’ll make font bold text large same uh I will copy the same h2 tag I will just make sure that it’s displaying correctly I think we can increase this size let’s say Excel and then copy this oop sorry copy this and go to the feedback same thing I’m going to add inside the feedback and here we’ll say um feedback as a text only and save it now under the history I’m uh obviously we don’t have anything so I will just add a text a simple text okay obviously we going to update that here we say you don’t have any previous lectures and inside the class name we’ll say text Gray to let’s say 400 same thing I’m going to add over here and here we say you don’t have any previous interview feedback and save it and let’s go back and here we have perfect so that’s how our dashboard is now ready only thing that I’m concerned the space from we gave from the top so basically inside the P um not here but inside the layout we give margin top to 12 over here I will just make to let’s say 140 I don’t know uh let’s make it 11 14 only margin top to 14 and I think that will be good one I think that’s good okay so that’s how guys you need to uh add the dashboard simple we don’t have any logic return just we uh display the images now one last important thing that we want to do is to add some animation to this particular cards so whenever we we h on this one we want to move this um images little bit so it’s quite easy simply go to our feature assistant component and for this image we’ll say onover I just want to rotate this image let’s say 12° okay also we’ll add a cursor pointer so here we’ll say cursor pointer and then save now if I on this one you’ll see this beautiful moment right and that’s the reason we added this now for the smooth animation you can also mention transition all and that once you add this particular um tell CSS class this it’s very smooth see now from the previous okay also if you want to when you reload your application we want to show this uh cards with some kind of animation and for that to Shad CN animation uh you can go to this magic ui. design go to the components here you will see a different different uh components for the card I will definitely prefer this FL blur fade okay and if you see if I refresh this is how it will look like okay very easy to install first just copy this npm command execute inside your vs code inside the terminal I will just paste that and then just go to the code and here we have the example how to use it you just need to wrap your component inside this BL fed and then you need to provide the delay let me show you how so I will copy this and then okay so over here I think we need to I need to pass with the pseudo okay because in my Mac OS is little secured it will not give you permission easily and in meantime I will just wrap this particular uh view inside this blur fade now make sure to close this tag as well uh I think this particular tag perfect and uh over here we’ll say a key let’s say key as option dot uh icon over here this is the delay okay so depends on the index it will show and I think that’s pretty good let’s save this one and let’s teste this out so let’s go back now to our application also I just um is that you need to import this blur Fed so make sure to import this blur fade from this magic UI import statement and then save it now if I go back and refresh this screen and if I reload this now you will see how beautiful the animated right boom so that’s how you can add the animation you can explore the more animation inside this one we will use some of them so that our application look more interactive and once you add the animation it will give a different effect to your application as well now when user click on any of this option we want to open a dialogue and on that dialogue we are going to accept the topic name on which user want to uh put a conversation and the different tutorial guide so in this case if you see we have three guides in this mockup and that kind of way that that we want to show it on this dialogue now if I go back to our application right we have this five different kind of Agents we can say and on the click of any of them you want to open dialogue obviously we are not going to create a different dialogue for each of them but rather we will create only one dialogue and on the click of that one that will open that particular dialogue and only thing that um the information depend on which U agent user selected that information we want to pass to that d so let’s go back to our application and very first thing that we need to do we’ll create a new component and we’ll call it as a user in input dialog. jsx let’s add a default template now in order to add a dialogue uh I’m going to use a Shaden dialogue component so go to the Shaden and search for this dialogue component it’s very easy uh if I click on this one this is how the dialog will open first thing you need to install this dialog component so inside the new terminal I will just add this dialog component and once it is installed in the meantime we can copy this import statement and then we’ll also copy this example and we’ll paste it here and save it now if you see this is the dialog trigger it’s nothing but on the click of this open Button this dialogue will open but we want to open the dialogue on the click of these particular options so simply you can accept the children and pass the children inside this dialog trigger now I will go to this our feature assistant one more thing that I updated this name to coaching options okay so over here we have the pre different name but I just updated doesn’t matter actually that much but just I rename that particular list now simply I’m going to our wrap this inside our user input dialogue okay something like this so now what will happen this will be our children for this user input dialogue and along with this one we I’m also going to pass the some data so here we’ll say uh coaching option is equal to and then selected option and here I will accept that okay and save it now if I go back I will just make sure to refresh this once and if I open any of them let’s open this one you will see that I have this uh dialogue open right but there is some style change as well so let’s fix that one so I will just do one thing I will just copy this over here and I will remove this all the class name let’s see how it

looks I’m not sure but still we want to give this in the center of the screen so let’s keep this yes we don’t need to give the padding okay I’m just updating the style uh nothing else and I think y that’s pretty cool perfect next thing uh after this let’s go to this user input dialogue and for the dialog title I’m going to show the from the coaching option do name that’s what we give right so if I click on this question answer you will see it sh question answer if I select mock interview it will show the mock interview and so on now let’s go back and here inside this dialogue description I’m going to Simply add a du and inside this du tag We’ll add a text we’ll say enter a topic to master your skills in and you can give the this uh name okay so and save it now if I go back if I click on this one you will see it’s saying enter topic to master your skill here we have the error which is the hydration error so either you can just add it as a as child to this one and hopefully the error will come if I select this one if you see the error is no longer uh present now I will just give margin top as well so for maybe you can give it to this D okay so margin top to three and then we want to add a text area so from the shat CN we have the text area component just uh make sure to install so I will just copy this component and over here I will paste it so it will get install and after this S2 tag We’ll add this text area component in inside that we’ll add a placeholder and we’ll say enter your topic here if I go back now you will see the text area perfect just I will give little bit margin top to two and uh for this h2 tag I will make a text is of black color perfect now next thing we wanted to show the teachers or the expert name right the guide so for that one I’m going to add I will copy the similar S2 tag I will paste it here uh I will add some margin top to five and then we want to show that all the options so I will add that option inside our service folder inside this options and here we say export constant coaching expert is equal to and inside this um we’ll add a name now name is nothing but the name of the person obviously but this name we also going to use to give the voice okay and for that one we are going to use Amazon poly which is a uh text to speech AI generator that we going to learn it later on in the this course but for now make sure you will keep the same name okay and I’m also going to show you how to get all of this name as well then for outar I will say we give the name as a T1 dot I think it’s a jpj so I already added that images inside our public folder oh so it’s avif that’s interesting and I will paste this couple of times the second name I will give is as a Sally and Matthew and this is T3 it’s a JPEG and save it now this particular uh option we wanted to show so we’ll say coaching expert. map we say expert comma index and the arrow function inside the that we’ll add a text sorry sorry uh not text here we will add an image tag and inside that we’ll add a source The Source will be expert. AAR here we’ll add Al tag as expert. name and then we’ll give width let’s say 100 height 200 now if I go back to our application you will see this options perfect also uh I will make sure to wrap this in a du for this du We’ll add a key as a index and then we’ll add an H2 tag with a name now for with this de We’ll add a grid and we’ll make grid column three when the screen size is smaller and on on medium or larger we’ll say G column five also we’ll give cap to let’s say six and this how it look like perfect um after this for this image We’ll add a class name we make a rounded let’s say 2 XEL and save this one let’s give height proper height so we’ll say 80 pixel width to 80 pixel and we’ll say object cover so it will not break and if you see this is how it will look like uh for this particular de we’ll give some margin top to three some space perfect now let’s make sure to Center this particular text so we say text in the center now whenever we h on this one we want to give some kind of uh Zoom effect right so basically either you can provide some border okay when user select that particular item so onover I will just scale this to 105 and for smooth animation we’ll say transition all and if i h on this one so this is how it looks okay and once you selected we want to show a border so in order to save the selection we say constant selected expert comma set selected expert is equal to use State okay and on the click of that one obviously we want to show Alo forgot to add the cursor pointer so whenever you hover on this one you will see this cursor pointer um here we will add on click event and when it’s selected so we’ll say set selected expert will be the expert. name because we are just saving the name of the selected expert after this uh we can add a border so we can add a class name make sure uh you’ll add the curly braces because we want to add depends on the condition right so here we’ll say condition if selected expert is equal to equal to expert. name then we we I put and and operation and then we want add a border uh I think just add a border okay let’s say border two uh also outside of this one will give a padding to one and for I will also make the rounded corner and save it and let’s see how it looks so if I open any of this one if I select this you will see this border and the selected one perfect right instead of I think uh let’s let’s remove this uh this styling and we’ll apply to the image only okay so we want don’t want this to the de so basically I will wrap in a curly Braes with this tag sorry quot and then this condition I’m going to write over here and I will remove from this one okay and save it now if I select this one the border is visible but very small and either we need to give a padding so here we’ll just save border but let’s add a padding to one perfect and now if I see if I select this one it’s showing the selected one perfect you can even change the color border color so here is we’ll say border primary I think that’s much better see perfect right and then at the bottom we want to add two buttons so maybe oh sorry after this du we’ll add one more du here we’ll say button and we’ll say cancel and we have another button and here we’ll say next now this cancel button we put a variant as ghost and for this du We’ll add a flex gap of five and justify to end and this will be look like this at the right hand side perfect uh I will also give margin top to five perfect and this is how our dialogue simple and cling is ready now make sure when user enter the topic we need to save it in one state so we’ll Define a state set constant topic comma set topic is equal to use State and when user enter value inside the text area we need to add onchange method which will emit the event e and here we’ll say set topic with the event. target. value and then save it perfect right now if I open this one whenever you enter any topic select this and then click next now you also make to you have to make sure that whenever you enter the topic value and selected the option then only you need to enable this next button so basically here you can add a condition it will be disabled if uh topic or you can add something like this if topic and and or if topic is not there Q or we’ll say or the expert name is not there so here we say selected expert is not there then disable it if I open this one right now it’s disabled I will enter some topic and and select this value and boom now it’s enabled perfect right and if I remove the topic it will again disable it also on the click of this cancel we want to close the dialogue so simply uh we have one uh component here we have dialog close but make sure it’s importing from this component UI dialog and then wrap your button inside this dialog close also don’t forgot to mention it as a child save this one and if I go back to our application if I click cancel see it’s closing right but obviously once you enter the data select this and the next it’s not uh closing it because on the click of next we want to save the user information like which top user selected which agent or that particular is selected like in this case I select the mock interview you we enter some topic then user will select this um some expert and this information we need to save I just figured out we keep this same name over here so we’ll update this name sorry this particular label so let’s go to this dialogue and over here we’ll say select your coaching expert so that yeah now it’s perfect now to save this information we need to have the table into our database so simply go to the schema. JS file which is inside this convex uh folder and in here we’ll create a new uh table we’ll call it as a dis discussion room okay and we’ll say Define table inside here you can provide the column name so First Column I will name it as coaching option or coaching type you can say here we’ll say V do string because it is of type string string then the topic name again it is of type string then the expert name you can mention as type string and uh we are going to save the conversation between this expert and the user right so conversation now this will be an optional field so I will put an optional and it is of type any because we are going to save a Json data into this conversation column now as soon as you save this this one right inside this um convex you will see the discussion room table is get created now let’s create a new function called discussion room and whatever the um functions related to a discuss room which we are going to write like mutation query we keep inside the same folder now inside this we’ll say export constant create cre new room and this will be the mutation so we’ll write mutation first we’ll get the arguments so I will simply copy this because all of this we want except the conversation so I will remove this then we say Handler async CTX comma arguments and the arror function here we say constant result is equal to await CTX do TB do insert and here you need to provide a table name which is discussion room and then provide all the field so first let’s say you want to save this coaching option so we’ll say coaching option do is sry coaching option then the value will be arguments dot I think we forgot to import this V make sure to pass this and then we’ll get the coaching option same thing you want to say topic so we’ll say V sorry arguments do topic and then expert name as arguments dot expert name okay so these three fields which we are adding and once we get the uh when once we inserted the record successfully we’ll get the result which is nothing but the inserted record ID so here we say return the result okay now this return return is very important because once we get the ID with that ID we need to uh pass inside the uh route okay because we are creating Dynamic route later on but make sure to return the result now simply go to this user input dialogue and here we’ll Define this mutation here we say create uh discussion room is equal to use mutation and here we provide API do discussion room do create new room and then we’ll create a new method called constant on click next because that a next button and then over here we say constant result is equal to await create discussion room and inside this we need to pass a topic name which we already have then you want to pass a coaching option that we can get it from the coaching option do name because we are just saving the name and then expert name so expert name again uh which is nothing but the selected expert so from this state and then here we mark it as a sync okay now this on click next I’m going to attach to our button so here we say on click and just call this button right also when uh the data get inserting right we’ll add a loading State and which will be the false initially and when uh you click on this next button we’ll set the loading as a true and once it finished we’ll set the loading as a false now also make sure whenever there is a loading is true right we can show the indicator loading indicator so over here I will add a condition if loading is true then I’m going to show a loader icon and I will just add some animation to this so we’ll say animate spin also I will disable this button whenever the loading is true okay so user will not click multiple times and I think that’s all we needed I will just console the result as well and then save it now if I go back to our application I will just refresh this once and let’s say you want to do some lecture on your topic so I open this and give the topic name so here we’ll say uh I want to learn react CHS basic okay then you can select the coaching expert okay let’s select Matthew and then I will also open the inspect panel so we can observe the result and click next Once you click next right now we get an error it’s saying uh are you running the npx convex de so I’m not sure whether we are running or not so I think we are running okay okay so I think we forgot to save this particular uh screen if you see we have this dot it means we did not save we forgot to save and now if you see uh I think it look like data inserted or not sure let’s let’s try it again so I will open this we say uh basic react JS you want to learn select it and then click next and boom if you see inside the console we got the ID now this ID is nothing but the record which we inserted and it has generated this unique ID if you see we have this coaching option obviously conversation is empty the expert name topic and the creation time all the details are now are now saved to our tables perfect right so that’s what we wanted now as soon as this ID generated we want to navigate to the new screen and on that one user can start learning from our AI voice agent let’s understand the workflow of our application now very first thing we need to do is to connect to the server and very first thing that we need to um get access to the microphone now once you open our application we have to make sure we will allow you uh the microphone access so that we can talk it and then the next step is whatever you talk we need to convert that into a text and for that one we are going to use an assembly AI which is the sponsor of this video now this assembly AI has a feature called streaming speech to text which will uh give us a text in a real time so as soon as you start speaking you you will get the text immediately without any lag and that’s the reason we are going to use the assembly Ai and once we uh get the microphone access then also we are going to start the session uh in assembly and that also we are going to learn next next step is uh to get an answer from the AI model once user ask any question once we have the text we will pass that text to the um gini or any a model obviously we going to pass the prompt and I’m going to tell you that how we can connect to the different uh AI model like Gemini open AI chat gpts dips CLA and many others and that is completely for a free and once we have that model ready and set up we’ll get the answer from the AI model and once we have that answer in the form of text we going to convert that into a speech and for that one we again we are going to use an AWS Amazon poly Amazon poly is a AWS service which will convert your text to speech and again it’s also free once we have this ready then we’re going to play that uh audio uh to the user and that’s how all the AI voice agent works and this is the simplest workflow that I I gave it to you obviously while implementing this I’m going to uh or we are going to follow step-by-step process and each time I’m going to inform you how and where and at what step we are on so that you will understand step by step process to implement it and integrate all of these AI models now once we added the all this information to our database we need to close this dialogue and we want to navigate to the new screen so we want to create a new route and this is our new screen will look like if user select any of these options right it will navigate to this new route and over here we have option uh you will see this image which uh you will feel like okay you are talking with some uh assistant or some agent uh at the right hand side this will be actually our um chart section okay so as soon as you start speaking you will see the chart between you and uh the assistant so you don’t need to type anything but you can see in a real time and then we have this Connect Now button which will connect to the server it allow you to talk um it will also enable the microphones and everything okay so we need to create this route as well uh first thing inside this user input dialogue we have to make sure uh once we save this information we need to close the dialogue and for that one we can programmatically close this dialogue so first we’ll say open dialog comma and we’ll Define this state actually is equal to use State and initially I will make this false now once uh user successfully uh let me click this down when user successfully save the information information we’ll simply say set open dialogue to false okay and for this dialogue we’ll say open as open dialogue okay and then it also have another method called on open change and here we’ll pass set open dialog okay and then save it also I will make sure everything is good over here and Let’s test this out now if I go back and I will just refresh this once and when you open any of this one and add some topic react I want interview on the react just um you can select the any coaching expert and click next and boom obviously it is inserted to our uh table as well okay so that’s how it works now as soon as it gets saved we want to navigate to the new route so let’s create a new route first so inside this main folder I’m going to create a new folder called discussion room and inside this discussion room we are going to create a dynamic route okay and this will be like the room ID okay now this room ID might be different every time okay I make sure this room ID we need to create inside the discussion room okay and then we have this room ID and then we pass the page. jsx file add a default template here we will say discussion room as the uh component or page name and then save it and let me show you how it works so over here if I go to the discussion room/ one then it will navigate to that particular page and if you see the text showing discussion room now on this particular URL you can pass any IDE it doesn’t matter because it’s a dynamic one and that’s the reason whenever you want to create any Dynamic route make sure to give the folder name with a square okay and then you have to pass this room ID which we pass inside the URL now in order to get this room ID you just need to write constant then the name of this particular uh folder is equal to use params okay so this use par hook we are going to use I will make this component on the client side okay and then save it now I will just console this room ID so that you can check whether it’s a correct or not now inside this inspect panel and if I go to the console you will see this ID see and this one and this one perfect but what we want to do um when we create a new record we want to navigate with that particular ID so so basically from this user input dialogue we want to navigate right so as soon as you uh click on next simply or here we’ll say we want to navigate so we need to add a router first so we’ll Define a router is equal to use router from the next SL navigation and simply I’m going to say router. push and give the path name so in this case is discussion room slash and the ID now this ID is nothing but the ID which you get it from this result so that result I will pass okay and then save it and let’s test this out now I will say lecture on topic here we’ll say I want to learn on um history of India okay and you can select any coaching expert say next and boom over here you will see our path along with the ID this is the record ID obviously we have getting from that from the convex and then we jump on this home screen obviously this is the discussion rooms home screen okay so that’s how guys you need to Route it now on this screen as per the design we need to create it and one more important thing if You observe we have the header you don’t need to add a header because we are already in uh using the dashboard layout file okay now for this one first if you see whatever we select that name we are showing so same thing I’m going to add but before that with the help of this room ID we need to get the record information from the database so I will go to this uh discussion room. convex file and here we write new function to get the uh room details okay or the discussion room details or record details you can say so here we say constant get discussion room and the arrow function like this oh sorry not Arrow function as this is the just a query so we’ll pass a query and inside the query we’ll accept the arguments and the argument will be the just ID and here we’ll say V do ID but you have to tell from which column so that column name is nothing but the discussion room I just copy this and paste it here um then we’ll add an Handler async and the aror function okay so here we say constant result is equal to await CTX okay so we need to add CT comma DB sorry arguments and here we say CTX do D.G because we already have the ID so you don’t need to give any table or anything okay just um inside here you need to add the ID something like this argument data ID and conx automatically detect where you are fetching from because we already mentioned this uh ID from which table right and that’s all you need to do once we have the return a result just return the result and then save it as simple as that now inside the page. jsx you have two option that you can fit it either you can uh use the Ed convex hook or you can use the Ed query hook I’m going to Simply uh let’s use the use qu hook so simply here we say constant uh get we say uh discussion room is equal to discuss room data we’ll say is equal to um use Query and then API sorry API dot discussion room. get discussion room and here we need to pass an argument so in this case the ID we need to pass and we already have the room ID so let’s pass that room ID and let’s console this discussion room data and then save it now if I go back to our application go to the inspect panel just to verify whether we got the data or not okay and Let me refresh this screen once and I don’t know whether we got it okay yeah if you see we got the data so which has the coaching option expert name topic name perfect now with the help of this information obviously this information we already have now right but uh from this information we uh or from the expert name we need to get the information so if I go to our options right and if I if I passing this John so I need also I want to fetch out right so that information will get it so simply we’ll say constant or let’s do one thing um okay let’s add a constant uh expert is equal to and over here we’ll say discussion room data okay not discussion room but we’ll say options let me see the field name coaching expert actually so from the coaching expert make sure to import dot find and here we’ll say item then item dot name is matches with the discussion room data sorry this data dot uh expert name and that expert we are going to fet I will just make sure and console whether we are getting or not and we’ll save it and if I refresh this so it’s saying the expert name is undefined because it takes some time to fade the data say right so another option is obviously you need to add that inside the use effect okay and then call this only when the discretion room data is available so here I can add a condition if discussion room data is available then only call it and here we’ll pass the inside this use effect okay so whenever the discuss room data is updated it will execute this line of code and then that expert information need to save so we’ll say constant expert comma set expert is equal to use state so make sure it’s a use State and then we’ll set the expert as a expert perfect and then save it now if I go back and refresh the screen you will see now we got the data with outar and the name now let’s go over here let’s add h2 tag and I want to give the name from the description room data so here we say discussion room data dot um is a coaching option right so that’s what we gave the name let me check and if you see the lecture on topic let’s apply some font to this one so here we say style oh sorry not style the class name and here we say text large font bow then we’ll add a du inside the D we’ll add two more du and we’ll give a class name margin top to five and in this first du we’re going to show um let me show you the mockup so this particular section and on the right the chart section okay so over here first let’s show the image and that image we will f it from the expert do um outar here we’ll say outar only the width let’s add 200 for now height to 200 I will just make sure it’s displaying on the screen so right now we have an error okay so make sure it’s an optional field oh not optional but it’s we will add this uh operator optional operator okay so we have an error expert is not defined obviously because it start with a small e and we have this image beautiful obviously uh I’m going to add a class name we’ll say uh height to 80 pixel and width to 80 pixel and also we’ll make rounded full full okay and uh for the image we’ll say object cover and save it perfect now let’s divide this particular du um this complete de right because we have we need to make two column so here I will add a grid when the screen size is smaller we’ll make grid column two and when the screen size is larger we make grid column uh four okay out of these four column I’m going to assign three column colum to this one so this need to be a column span three and one column to this one only when the screen size is larger and let’s give the Gap so we’ll say Gap to 10 okay and if I go over here obviously you will not see any change but uh later on you will see this then uh for this particular du uh we’ll add some sty uh tail CSS class so over here I will provide some height let’s say 60 pixel uh then I will add a background color to let’s say secondary and also add border we’ll make rounded to 4 4XL and I will make it Flex Flex column item to be in the center and justify in the center and then it’s waiting oh that’s weird this this is not I expected but let’s see why it’s happening okay so this need to be a column span three okay we gave the incorrect name and now we have the width but somehow the height did not okay so instead of 60 pixel we need vertical height 60 vertical height so that’s what we need to mention and boom so this is how it will look like perfect right uh then after that um I’m going to add the text below to this one so we’ll say S2 tag and inside this uh we’ll just add expert. name okay and save it so now we have the name for this one so you will get to know who you are talking with okay and uh let’s add a class name we’ll make text Gray let’s say 500 okay and save it now for this image we can add one animate uh pulse effect okay so you will see once we add the pulse effect it will glow and hide it something like this right it will give you the something like talking calling effect on the right hand side we want to show your uh profile image something like this see so that what we are going to show so simply over here I will add a d and inside this du We’ll add a user button okay and for this du we’ll add a class name uh first I will add a padding let’s add padding to five okay then we’ll add a background gray color let’s add background okay let’s add background gray to 200 okay then we’ll make ping X to 10 and we’ll make rounded large and save it see but we want on the right hand side right so make this as absolute and we will say bottom to 10 and right to 10 and oh so if you see it’s going to this screen right side but we want over here so simply uh for this particular du you can mark it as a relative and then it bounds the boundary kind of thing right and it will be inside this one now perfect next on the right hand side we need to show a chart box so basically similar de I will just copy over here and I’m going to paste something like this okay the height 60 vertical is fine everything is fine and just write a chart section inside the S2 tag and if I go over here okay it’s coming to the bottom that’s the reason is we have this columns span I will remove that that and then on the right hand side we have this chart section as well okay beautiful but it’s quite small right so what you can do you can just change this column span to two and here I will make this three so now this one is quite bigger I think this is much better now now below to this one we are going to add one button which will connect which will have the text called connect Okay so let’s go over here okay I think we need to wrap this in a one de okay something like this and make sure this particular option you’ll add to this particular D so that in another du I can add a button and we’ll just say connect here we’ll give class name margin top to five we’ll make Flex then item to be in the center justify contain in center and then save it and here we have the button okay now obviously this button help us to connect to the server and then you can start the conversation uh over here I’m going to write one message just below the chart section so again same thing I’m going to add over here I will wrap this in another de and then over here we’ll add h2 tag and we’ll simply say uh at the end of your converation we will automatically generate feedback slash on notes from your conversation okay so what we are going to do we are going to generate the feedback note depends on on the user conversation that also we are going to learn okay so in obviously inside the workflow I did not mention that one but this is very important part as well let’s save it and this is how it will look like I will just add some style so here I will add a class name margin top to five I will make text Gray let’s if uh 400 and uh we’ll make text smaller and this how it will look like I think that’s much better also over here we have lot of space so I will also fix this simply uh for this parent de you can add a class name give margin top to let’s say 12 and once you add the margin it will go into the negative margin right and that’s how you need to add inside the telin CSS I think and now if you see the margin is gone I think this is much better so everything will be in the same screen you don’t need to scroll it now it’s time to enable the microphone and this is the first thing that we want to implement I’m going to make your life easier because I’m going to provide this source code uh so that you can enable the microphone and it’s quite straightforward so first let’s copy this from this documentation I will keep the link in the description and when we click connect uh that time we need to call so here we say constant connect to server I will say and the arrow function like this and simply paste this line of code uh obviously there are lot of spaces so I will just remove this all the spaces and then save it now this particular connect to server method we need to call when we user click on this connect button so here we say on click and then call this connect to server also we have to make sure whenever we do the click connect we need to show a disconnect button to disconnect from the microphone as well or from the server as well so I’m going to create one state we’ll say constant enable uh microne I we say enable recording okay so enable mic or we say set enable mic is equal to use State and initially it will be false now whenever the set mic is false then we are going to show this connect button so here will say say uh enable mic if it’s false so I will make this as opposite then show the connect button otherwise we’ll add another button we’ll say disconnect and for this button I’m going to add a variant as destructive so let me get this variant name so this is the destructive I will just paste it here and then close it so obviously uh we’ll call a new method to disconnect here we’ll say uh dis connect okay and this disconnect method I’m going to write over here perfect and uh let’s save this one now over here we use this record RTC from the browser method okay so we have to import this This Record RTC first so from this package uh you can just search on Google record RTC you will find this package copy that and then paste it here so inside the browser I will just add this record RTC oh I need to add with the sud sudo and then once it is installed you can easily import that so now if you see it’s importing from this record RTC uh I will just also comment this one because we don’t have this transcript rber okay but I think other than that we are good uh at the top make sure to define the recorder okay because this is very important and obviously uh we also need to add let’s do one thing let’s add a constant recorder is equal to use reference and initially it will be nuls make sure to import this use reference as well so that uh we can start we can refer that and we saying just start the recording and once it is finished we’ll say stop the recording as well so inside the disconnect it will accept the event and inside that we’ll say e dot prevent default so this need to be a prevent default and then we’ll see recorder do current dot PA recording okay and then we’ll set the recorder. current to null and also we have to make sure set enable mic to be false okay and once you start connecting we’ll say set enable mic to true and then save it now let’s go back to our application I will just refresh this once also one more thing I forgot um you need to mention this slice timeout so I will at the top I will just say let slice sorry silence timeout this is needed uh to check whether user is silent or not right if user pause it means we have to make sure that now ai need to do his work okay because here user will waiting for the ai’s answer right and that’s the reason we added this um I don’t know why we got this internal server error Let me refresh this again we got this internal server error because we added this record RTC and sometime Nick just first run on server and then we’ll check is it a client or not so to fix this I added this line called constant record RTC and then I’m importing dynamically with this import statement and make sure you can say server sign rendering as a false okay and uh uh inside this connect server we already have have this method I just commented to test this out and I think we are good let’s test this out so if I click now connect and right now if you see it’s saying permission denied right and Mac phone is not allowed now I by means by manually I disable this one but once you enable right I will reload our application and then if I click connect you will see that the microphone is enabled right and it’s saying using now it means whatever we are speaking now it’s getting started now to test this out I will just console this buffer so that you will get to know whether we are recording or not now if I click connect you will see it start recording perfect so as soon as I start speaking it will change this value as well when I click disconnect it will just pause the recording and now it will not record anymore okay so that’s how you need to uh connect the microphone and enable it and depends on the requirement you can connect and disconnect the call now the next step is to convert our speech to a text and for that one we are going to use an assembly AI where we are going to stream the speech in a real time to a text so it will be very useful so that whatever the text we are going to get it from this assembly AI we are going to pass to the AI model so simply go to this assembly ai.com or click uh the link in the description so you’ll jump on specific page the assembly is a platform where you can convert speech to text also it provide a product called streaming to spee to text that what we are going to use uh in real time it going to happen so as as soon as you start speaking you will see uh it will display the text on the screen also it provide a lot of other different features which you can taste power frame they have the playground where you can taste these features uh you can try out and definitely asmbly AI is one of my favorite um platform because I already use asmbly a in my one of the previous video now simply create a new account if you don’t have and log to this account on the home screen you will see the code example if you want to do the uh transcribe your first audio file to to the text and there are lot of other model now we want to deal with this transcript live audio stream that’s what we are looking so very first thing we need to do is to install this assembly AI so I will copy this assembly AI statement and inside our terminal I will just make sure to install that once it install uh this is the code that you can use it but we are going to write in a little bit different way which is comp completely comp able to the react and nijs also let me walk through this assembly AI dashboard so whenever you uh make a call to this assembly AI API you will see this usage over here uh along with how much did it cost and everything you will also get $50 of credit uh once you join it okay then you will find all all all of these analytics uh depends on how much you use then inside this account section you’ll you will find all the red part in the building section you have option to add a funds um you’ll see this all the pricing um the most important and most interesting thing that you can set the alert so right now if you see I just set alert to $1 and whenever the $1 reach I I will get notification that okay you are about to reach $1 then we can take an action accordingly inside this API key you’ll find this API key just copy this API key which we want later on in this project and then in the documentation you’ll jump onto this assembly AI API documentation which help us to integrate with any kind of uh application or any kind of platform with an assembly AI now first thing uh I’m going to copy this API key because we want that okay so just copy this go back to your project and inside your do local file I will just paste it here okay so let’s paste assembly API key is equal to and paste this key and simply save it I will close all of this tab for now now once you install the assembly AI let’s go to the discussion room page. jsx file and here I’m going to define the we’ll say real time transcriber is equal to use reference and initially I will set this as a null now inside this connect to server over here we’ll initialize this uh assembly AI first okay now inside this assembly AI we’ll say realtime transcriber do current is equal to new real time transcriber okay and inside this one you need to provide the token now we need to generate the token every time whenever uh you your session is started you have to make sure every time you will generate new token which will help us to avoid unauthenticated uh API call to this uh assembly a okay and then we also need to provide a sample rate now the REM recommendation from the assembly AI the sample rate need to be 16,000 something like this you need to provide and here we need to generate the token okay okay so once you generate the token then it will get initialized automatically now in order to generate this token you need to generate on the server side so for that one inside this app folder I’m going to create a new folder called API and inside this API folder we are going to create a new uh folder again called um let’s say get token okay and then we’ll say route. jsx now this is the end point that API endpoint or API we are going to create called get token and in that one we are going to uh write or we are going to call assembly AI to get the temporary token so it’s quite simple we’ll say export uh con sorry export async function as this is a get request so we’ll say get request and then we’ll say constant token is equal to await here we’ll say uh assembly is okay let me Define this first okay so over here we say constant assembly is equal to say assembly AI uh is equal to new assembly AI make sure to import that one and here inside that you need to provide the API key which we already have from process. EnV and from this environment variable we’ll copy this assembly API key and we’ll paste it here and then once we have this assembly AI we’ll say assembly AI do real time. create temporary token and you can even uh mention the expiration of this temporary token let’s say um 6 Minute 5 6 minutes something like that I think okay and just mention once you get the token you just return that token so we say next response do Json and then pass this token okay and then save it so that’s how you can create the API endpoint now once you have this API endpoint ready uh simply go back to your to this page.js and here we’ll say await oh so over here uh we need to call this HTTP endpoint to get the token so what I will do uh inside our service folder let’s go to the services folder and we’ll create uh one file and we’ll say uh Global Services dot jsx okay we’ll add a default template and we’ll write this method over here to make an uh sorry we don’t need a default but we’ll just add that something like this and uh to make an HTTP call to this particular API endpoint we need an exos exos is the HTTP uh client Library so just install that first so you just need to add npmi exos and it will install the exos for you once it is installed we’ll write a method called export constant get token and arror function over here we’ll say constant result is equal to await exos doget and then give the end point which is API SL uh get token okay and we’ll make this as a sync and once we have the result we’ll say return result. data and inside this result. data we have the token let’s save this one and simply call this so we’ll say get sorry await first await get token and if you see it is importing this get token um from our Global Services okay so that’s how uh you can generate the token and then you can use it now every whenever you start the session it will generate the new token for you now write some uh uh shocket function or from the assembly so it’s like realtime transcriber do current. On and Here the name is so I will just copy this name from here if you see uh uh let’s go to this stream typescript and this is the transcript okay so we’ll copy we’ll paste it here we’ll say async transcript okay and the aror function now inside this one um you will get the transcript so I will just console this transcript for now and we’ll tast this out okay and over here don’t forget to connect that so here we say await realtime transcriber do current do connect so it has a Connect method which will connect to the asembly AI okay and then save it also when you disconnect it it’s very important that you you also disconnect from this assembly AI so we’ll say realtime transcript do current do close something like this okay and then Simply Save it let make this as a sync and save now we’ll test this uh until this point and we’ll check whether we are getting any data from AI uh assembly or assembly AI so let’s refresh uh we’ll connect this and uh let’s talk something okay I’m not sure whether something is happening or not just we are getting this whatever you talk right that buffer we are getting right now we are not getting anything right so what we are missing that whenever you speak right you need to pass that buffer or because whatever we we are getting from the mic to this socket so this is the socket nothing but uh uh this transcript when you pass that it will detect that the change and then it will consolid now obviously first we’ll say if realtime transcriber do current is true or not okay and then uh over here we’ll we need to send this buffer so we’ll simply say realtime transcriber do current do send audio and that audio file we are going to send we’ll say buffer so whatever we have inside the buffer that is nothing but the encoded uh audio okay whatever we speak and that we are passing now let’s save this one and then let’s test this out so I will refresh the screen once go to the inspect panel and console and let’s start now we say connect now once you connected uh we’ll see whether we are getting any data or not and right now if you see we got some data and beautiful right let’s stop it and once we stop obviously it will stop but over here you will find we uh inside the transcript we got different type of data okay obviously over here you will see whatever we talk that coming inside the text but it’s called a partial transcriptor but once you find ize then we’ll also have the message type called final transcript which contain your complete message now partial transcript is helpful when you want to show in a real time and final transcript is helpful when you want a complete uh text once us are pause for few millisecond or second then this final transcript will get execute right now until this point simple thing that we are able to uh get the data inside the transcript only thing that we need to to uh show it on the screen right as soon as we start talking so over here what we can do um let’s say so we’ll write a logic in order to update the real uh state in real time so you can define a uh over here we say let text and curly braces okay and also I’m going to Define constant real time text comma send Real Time text or we can say uh transcribe actually here we say set transcribe is equal to use State okay now inside this transcript we’ll simply get the text first okay so I think it’s name this two let’s make it text now in in order to show the real time right we’ll say text TT inside that we’ll say a transcript dot let me see what we get yeah transcript dot audio start okay obviously this particular field you will find over here see audio start okay and then we are going to show a transcript dot uh text because we are getting that text then we’ll say constant Keys is equal to object do keys and then we’ll pass a text into that one okay after this we’ll say keys do sort and we are just shorting depends on the time right because we have the already saved and then last we’ll save for constant key of keys and arrow function here we say if takes of key if it’s there then we’ll simply say message obviously we’ll Define a message in a moment and then we’ll save in that one okay so we’ll just add text of key okay and obviously uh every time whenever this particular transcript execute right we’ll Define a message over here and once we have all of this message then simply we are going to save in a state so here we have already Define the state called set transcribe and then we’ll add the message to that one okay now for now okay we are going to show the transcript maybe uh after this du we can add let’s add a du again and inside do we can show this transcrip and then save it now Let’s test this out I’m not sure whether it will work or not but now what you need to do let’s connect again and once it connected obviously it will take some time we need to add a loading function for that one and we’ll see whether it’s working or not right now um I think something is missed so we have an error so it’s saying Keys is not defined okay let’s fix that one so maybe somewhere we use incorrect variable name oh okay so over here it need to be a keys okay we gave the incorrect one so let’s connect again uh you will see that as soon as I talk speaking you will see in a real time we are getting the uh text printing on the screen how cool right so that’s how uh this assembly AI give you the speech to text in a um real time so that’s how easy it is right we did not add a lot of code just you need to make sure uh once we get the data from this uh transcript right we need to add it in proper way so that we can just display it on the screen and here we have the result obviously uh over here I’m going to update little bit so we will see um u in proper way but inside the chart section we need to save the final script okay we don’t want a partial script some return something like this so to do that uh inside the transcript over here okay maybe uh we can add after this we’ll say if transcript okay let me first disconnect this because otherwise it will get all my text so I will disconnect this and make sure to refresh now inside the transcript we will say transcript do message type is equal to equal to and if you go okay I just refresh that’s fine it has a um field name called final I me the message type has a two type of script one is the final and one is the uh partial okay we want the final script and then once we have the final script we’ll Define in a or we’ll push it inside this list so we’ll say Conversation Set conversation is equal to use state and it will be the list and once we have the final script we’ll just push that so we’ll say set conversation here we’ll add the previous one and we’ll say dot dot dot previous value along with the new value now here I will add a role as a user because when users speak then we are adding that right and here we add a content with the transcript sorry uh transcript. t text okay so what we are doing whatever the final transcript we are getting we are just pushing it with the role as a user and inside the content we uh add whatever the text we are getting from the assembly AI as simple as that and then save it now we have this conversation right uh State now only thing that we need to do once we get this result we need to display it in the form of chart as simple as that and once we have uh the user conversation then we’ll move to this next thing that to get the answer from the AI prompt now moving to the next section which is uh getting the response from the AI model as we already have the text which uh user speak and we converted to a text by using the assembly Ai and then that text we are going to pass to the AI model now in this case you can use any AI model like Gemini open AI D CLA and any other I’m going to tell you how to get all of this API for free also uh inside our option. jsx where we have this coaching option and we added the name and icon along with that one I added this prompt field now I’m going to share this particular file with you so that you can use this prompt in each of this prompt we pass this user topic right and obviously we are going to replace this user topic string with the actual user topic which user enter I will just rename this fi name okay so I will make sure it’s in the small case and then save it now I will close this all of this file and inside this services in Global Services we are going to create a new um method we say constant uh we’ll say AI model and the arrow function now inside this we’ll write a logic to get the data from the AI model and for that one we are going to use an open router. a open router contains a lot of different AI model which you can use it for free they also have paid um uh API available but it’s up to you which one do you want to use you can even try by going to this chart and you can teste this out completely for free now if I go to this model section here you will find a bunch of different model which you can use it now if you want to use any free model here you will see uh the model for for example this gamma 31b is completely free that we can use it or you can just filter filter this out with this free model and here you will see that we have the dips um the Google Gemini and there are lot of other right so you can use whatever whichever you want now simply uh make sure to sign up with this your account and then select the model which you want to use let’s say for example I want to use this Gemini Pro 2.0 experimental select this model here you will see all the information okay then inside this API section you need to create an API key okay just click on this create API key and you will jump on this API key you have option to create a new API key I already created for uh VI agent so I will just copy this one but you can create that’s completely for free then select the typescript and this is the simple code example that you can use it directly inside your application but if you want to use any third party um hdk that also you can use it so I will click on this framework documentation and it will jump on me to use this open asdk and that’s what we are going to use okay so uh basically what I’m going to do um I will copy first obviously make sure to install this open so let’s copy this uh inside the terminal make sure to install and once it install make sure to import this open a so over here I will import that and then I will just copy everything as it is so let’s copy this open initialization first so we’ll copy this uh I will put just above this so it will initialize we don’t want this default header so I will remove this we want to replace this with an actual API key so I will just copy this environment variable which I kept inside this. loal file and then simply I will say process. EnV and this key once you open is initialized let’s go back to the documentation and this is the simplest code which you can use it okay let’s copy this console log as well to verify that we are getting the data let make this as a a sync and over here you need to provide the model which you want to use now we’ll go back to this previous screen and you will see this model name over here just copy this model name and over here just wanted to show you that this is completely free okay so you don’t need to pay anything you don’t need to add any card detail just uh use it now once you add this gini AI model inside this messages you have option to pass the role okay now to this AI model we are getting we are going to accept two main FS one is the user topic okay whatever the topic user selected and other is the uh I think that we can call it as a instruction we say uh coaching option user selected option okay that option we are going to get it so if user select this one then that option will get it uh I think that’s all we needed for now okay over here here I will just commment this code because from this coaching option we need to get the prompt so here we say constant um here we say option is equal to we say coaching option I don’t know what we call okay coaching options so here we say coaching options. find and here we’ll say item if item dot name is matches with the coaching option name okay so whatever the coaching option name you pass if that matches then we have this option and then once we have that we have this prompt right and uh we can just get that prompt using option. prompt okay now to this one we need to replace this particular keyword called user input and we need to replace with the actual topic so here I will say replace this user uh topic string with an actual topic which user entered okay so this topic we have and then once we have this final prompt I will just uncomment this here I’m going to add one more uh message will say assistant okay or you can add a system we’ll say assistant and then inside the content you can pass this prompt okay so what it will do every time when you send a request it will make sure this is the prompt that you are passing so that uh from next time it will give you the uh answers related to that particular uh promp okay so that that’s the reason we added also we need to accept one more fill call message so whatever the message you just send that message we are going to pass over here and then save it now this is the simplest way that we are doing but later on we are going to update this message field in order to get an uh quite accurate data if you are talking with the AI voice agent for 10 minutes right so obviously we need to pass an all the history so that depends on that one he will send you the relevant data now once you are done with this one let’s save it and then I will save this file as well and go back to your component called discussion page right over here inside this final script once we have the final script we need to call that AI model to get the answer so here we’ll say uh calling AI text model to get response so we’ll say constant result or we’ll say uh AI response is equal to await AI model and make sure to import that one and here we need to pass the three field first is the topic so obviously from our discussion data you’ll get the topic dot topic we have then uh from the discussion room data so we say disc room data dot um the coaching option which we selected and the last the message now the message is nothing but the one which you are getting from this one right so we have this transcript. text something like this okay I will just bring this down and then we’ll say console. log AI response and then save it now in the browser you will see you might get this error called Dangerous allow browser because we use the open AI directly on the client side so basically what you can do either you can create a write the method in on the server side by creating the API or other option is just um over here just pass this dangerous allow to True okay and then save it and now if I refresh you might not get any error also when we click connect right we want to show the loading so that we can just disable the button and we can show that that particular page is get load sorry we are going to connect it so what we can do we can just create a loading state is equal to use State and initially I will make this as a false and when user click on this connect to server we’ll set the loading as a true and once it’s connected successful so after this one we can set the loading as a false and for this button where we have this connect button right over here I’m going to show a loader icon so first I will add loading condition if loading is true then we can add a loader icon and in order to spin it I will add animates pin animation okay and then save it same thing you can do it for the disconnect as well whenever user click on disconnect we’ll set the loading as a false sorry uh true and when it’s disconnected successfully we’ll set the loading as a false and and that also we can show the same thing so I will just copy this and then we’ll paste it here okay but make sure whenever the loading is true you can disable this button okay so we’ll say disable whenever the loading is true so user will not click on this button again and again now let’s test this out I will open the inspect panel and the console we can observe the result now when I click connect you will see it’s showing the loading and button is disabled and now I can able to speak hey bro how are you hey hi there and wow so if you see we have this role and it’s saying some message and we got the response perfect uh I think I’m talk lot so that’s the reason it’s not giving immediately answer but let’s try to disconnect and try it again if you see we got the response as well but obviously when I want to explain then it will be little difficult to get the answer immediately because I’m talking some random things right let’s try it and I will just talk with him him okay just observe hi Jonah how are you can you tell me little more about India and H and its culture now I’m disconnecting this one and if you see we got the response here we have lot of other things see I asked about the Indian culture and it’s saying let’s explore the Fantastic culture of India and there are lot of other things pretty cool right so that’s how we can get it but if you see we have very long response and we have to minimize this response obviously in order to do that you need to update our prompt and that’s very important okay because many guys think about why we are not getting exact response and many other things but to update this particular prompt is very very important so that you can get an exact answer okay so either you can just put it put this in a chat GPT tell him that okay we want to update this prompt in a specific format and then you can up update it but don’t worry I’m going to update it for you and then you can use it directly so boom I updated this prompt but it’s quite similar but here I added that uh the answer need to Wi 12 character only okay now once you mention this one this is very important uh Thing Once you mention it so that from next time it will not give you the big answer and you don’t need to wait for a long time if you see it’s very big answer actually okay here we have see okay and we don’t want this big answer because it’s a conversation between uh the AI assistant and us right so that’s the reason and uh obviously now you can try this and then you will find out obviously you can test our demo of this application I will put the link in the description so you can just just check it out and then you’ll get the idea how it works now once we get the answer we need to save it in our conversation list because we already have this conversation and we are saving the user but now we also want to save the uh AI response okay so simply I’m going to add a set conversation after uh getting this AI response and here we’ll say previous one dot dot dot previous one comma the AI response now I keep I’m just adding this AI response as it is because we are getting the similar structure what we are using so if I go to this this one so we are getting the role as a assistant if it’s from Ai and we are getting the content as well and that’s what we wanted and that’s why I’m directly saving inside this conversation okay and then save it now we need to show this all the conversation inside our chart box so that’s what now we are going to display uh whatever the conversation we are going to make whenever you just speak that uh conver that text also going to display inside the chat section if the AI or assistant give the reply that reply also we are going to show so for uh designing the chat box this is how uh it will look like we have the user added message means whatever user speak that going to add and the the response from the AI as well okay so it’s not that much difficult so let’s go back to our application and we already have this chat box section right so this particular so basically I’m going to create a component inside this discussion room so we add a or maybe let’s create inside this let me go to this room ID and inside that we’ll create underscore components folder inside this we’ll add CH box. jsx file add a default template and then I will just cut everything from here and then we’ll paste it inside this chat box over here I will just import the chart box component and uh I think we need to add a du so let’s wrap this in one de something like this and then save both the things make sure that on the UI side nothing will get changed okay so I will just refresh this once and everything will be as it is beautiful um then to this chart box component we want to send a conversation right so I will pass this conversation state which we have and for now as a default one right just for testing purpose I’m going to add two messages one from the user let’s say AI for example or sorry it should be assistant and then the content we’ll say hi then I will also add another one with the role user and then the content is hello okay now this is I’m just adding so that we can display it and then we can design according to our

requirement so here make sure to accept the conversation and now we need to uh iterate this list of conversation in order to display it so I will add one D inside this du We’ll add a conversation so here we’ll say conversation do map we’ll say item comma index and the Arrow function let’s add a du and inside this du I will add an H2 tag and then we’ll say item do content and save it now if I go to this chat box you will see that we have this High and Hello currently it’s showing in the center of the screen so basically you need to remove this item Center justify Center okay and then save it and if you see now it’s showing on the left side corner if you want you can just uh change this rounded to little bit smaller something like this I think that’s will be good uh also I’m going to add some padding let’s say padding to four and I will just change this style little bit okay now next thing if the message is from AI we want to show it on the left side otherwise we want to show it on the right side so to add that we need to add a condition so inside here we say if item do roll is equal to equal to assistant right then we’ll say let’s add a S2 tag with item. content obviously we need to add a style to this one otherwise let’s add another S2 tag uh if the user is user role is uh sorry the item role is user so it will show this h2 tag now for this AI S2 tag we say class name uh we’ll add padding to one padding X to two we’ll change the background color to primary and then make the text white okay here I will make the uh inline block okay that is important and if you want you can add the rounded uh Corner let’s say medium for now and then save it let’s see how it looks and if you see this is the message will look like beautiful same thing you need to do so I will just copy everything as it is for this S2 tag right but instead of background primary I’m going to add a background gray let’s say 200 and text I will make I will keep it as a black only okay and we want inline block and rounded MD but it’s just showing below to this message but we don’t don’t want that one also we want some margin top to one so for both of them I will give margin top to one and over here I will mark it as a flex and then we’ll say justify end okay I think you don’t need to Mark flex but let’s say justify in and that’s nothing is happen actually so we need to apply that style to this de let’s add a class name and I will add a conditional over here okay so first we’ll make it Flex then in dollar sign We’ll add a condition if item do R is equal to equal to user then I will make this justify end okay so we want on the right hand side so that’s how it looks on hello here we have the high perfect right so that’s how you can add it now obviously once you start entering them or adding the message it will just display over here now if you have more than let’s say 10 message 20 message right you need to have a scroller over here so that user you can able to scroll it properly so basically for this particular du or maybe for this de only okay uh let’s remove this do and just keep the top du and to this du we’ll say overflow Auto okay and then save it and I think that will be okay now once you start speaking you will see the message will appear over here and let’s test this out also uh inside the Global Services we did not return this message so make sure uh from this a model we will return the response okay so that we’ll get it uh on the UI side obviously inside the page. jsx once we have the response we are adding to this set coners so that it will displayed inside our chat box as well and if you see I added some uh questions and some answer and it’s starting adding inside our chart box as well pretty cool right also it’s showing all of this information uh the user obviously the a which one is from a assistant which is from the U and everything cool obviously uh you can add some more styling to this one so if I go to the chat bo uh chart board I will add some more P margin top okay also um I think that’s all we need it if you want you can change the size font size but I will keep as it is that’s I think better one and uh that’s all now another thing if you see this scroll bar right if you want to keep the scroll bar then you can keep it but if you want to hide this scroll bar you can also hide it so for that one you have to say you just search on Google uh tell says no scroll bar in M package now in TSS you cannot hide the scroll bar directly so we have to use this third party Library uh make sure to install this one so I will just add that and with this with the help of this Library first thing um you need to add this TN SC height but the thing is we don’t have that file okay so I don’t know whether this will work or not but let’s directly add okay so if you see we have this t for CSS support that’s pretty cool so I will just um use this scroll bar hide and let’s see whether it’s working or not if it’s not then we will leave it as it is but if I say scroll bar hide I don’t think so it works okay but anyway uh maybe let’s refresh this maybe after refresh it might work okay if not work then you can just leave it it’s not big deal now one last important thing that the thing which we want to do uh to This Global API service we are just passing one single message right but instead of that one we can pass the last two to three message maybe okay or you can pass complete conversation to this particular AI model okay so it’s quite simple inside this page. jsx currently you’re passing this uh text right instead of that one I will pass pass the conversation and let’s try to pass last two messages so what we can do just before this one I will uh just get the last two message so here we say last two uh message I will say is equal to conversation dot slice and we’ll say minus two okay so it will give you the last two result and then once we have that one we can just pass over here okay like this now inside your am model here we have this uh we say last to conversation I will just rename this one okay and I’m going to pass that over here so I will just remove this and we say dot dot sorry dot dot dot and this one so what will it will do it will dest structurize your list and it will be something like this okay it will add to this messages only and then save it so um I made one quick fix uh I paused the video and I made that fix so inside this connect server right we uh just after inside this final script we are making an AI model call right I move this AI model call to the inside the US effect okay so I added this fet data as a one assing function and inside that I’m calling it the reason is um whenever the conversation change I am executing this use effect but I also made make sure the last message is uh and or added by the user and then only I’m making the AI model call okay that is necessary because whenever um the conversation uh State change we need to make sure we are updating the list okay so make sure to uh add this particular fix this is very very important now it’s time to convert our text to speech and for that one we are going going to use AWS Amazon poly as we completed all of these STS one by one and this is one of the last ST which we need to convert the text to speech so simply search on Google Amazon poly and uh it’s free to use so you don’t need to pay any anything for this one just go to that one and here you will find all the details about this Amazon poly it has a real life vies customizable output and there are lot of other feature this Amazon poly will uh provide you now simple sign into your account and then over here or you can search on the search bar let’s say Amazon poly okay now once you are in this Amazon poly uh you can even play around it you can test a different different engines uh if you have standard then make sure to select the specific voice we have a lot of specific voice as well and simply click listen my name is you can test different different uh engines along with the different voices along with the different languages as well pretty cool right now the thing is how to enable this now first thing uh you need uh Amazon poly SDK so here we will say just search on Google Amazon poly SDK or just type npm as well so over here we’ll say oh sorry I think I forgot to add WS poly npm and then open this first npm package which is this aw SDK client poly copy this go back to your project and just execute over here now once you install this inside our global Service we are going to create a new method so over here maybe after this we’ll say constant convert text to speech and the arrow function like this obviously it will accept a text which you want to convert right and here this will be an async then we’ll say constant poly client is equal to new poly Cent and make sure to import this from this AWS hdk client poly then inside this we need to provide a region now which region you want to use that region you can provide so that region name you can find it uh to your Amazon so right now if you see we have this Us East one which I selected but you can select anything let’s say if you want to select Mumbai you have to type AP uh South one okay so like that then after that you need to provide the credentials now inside the credential first we have this access key ID which you want to add and another is uh security access key now both the key we need to generate and get it from the AWS so in order to generate it go to your accounts and click on this SEC security credential inside here you will see the users right now I already have this voice agent created before as well but you can create a new one so click on create user and give the user name so here we’ll say uh AI coaching uh voice agent or we can say whatever you want then click next and make sure to select this attach policy directly over here search for AWS poly so over here if you type poly you will see this Amazon poly access just click on that and click next after this just review all the changes because this is required and then click create user once the user is created then you have the access then simply go to this AI voice agent here you have option called security credentials and you can create this access key okay uh if you scroll down you have multiple option but we need to create an access key so we’ll create access key over here you need to click on this application running outside AWS right because we are running outside AWS click next and then you can just add the tag value whatever you want want it’s not mandatory I believe but you can now create access key and boom if you see now we have this access key that I’m going to use I will copy that go to your environment file and then over here I will paste it so we’ll say next underscore public underscore AWS access key ID is equal to and paste this key then we want one more which is nextore public uh AWS secret key and that will paste it here okay so you can just copy this and then paste it here save it so that uh now once you save it uh just click done okay and you can even download it but make sure that you will copy this otherwise you will not get it get it okay you have to create it everything again uh so once you create that’s all you need to do and then your Amazon PO is now enabled inside the AWS now just use that so here we’ll say process do environment Dot and I will copy this access key ID and the secret key ID as well so we’ll say process. EnV and this key and and then save it okay I will just make sure to export this so we can use it later on now once your poly client is initialize here we say constant command is equal to new and we have synthesis speech command okay it is importing from this hdk client poly make sure to import that and to this one you need to provide a text now whatever the text we are passing to this one this text you need to add then you can provide the output format it has the different output format but we want the MP3 so we’ll select MP3 and then a voice ID now this voice ID we have a lot of other see right but obviously depends on this option because we are already passing that option that option uh like uh the name expert name we give right so I will accept the expert name as as well and then we’ll pass it here after this uh inside the try catch block uh we’ll say constant we will we need to generate the audio stream so we’ll say audio stream is equal to await poly client. send and this particular configuration we need to send to the poly client hdk once we send it we will get the audio stream and that audio stream we need to convert into a buffer so we’ll say constant audio array buffer is equal to await audio stream so we see audio stream so this need to be an capital A actually okay so I will just use this one audio stream dot transform bite to sorry transform to bite array so here we say trans transform to bite array okay something like this and once you done this one convert this into a blob so here we say audio blob is equal to new blob and inside that we’ll say audio array buffer make sure to wrap this and here we’ll say of type in to add audio SL MP3 okay and once we have audio block we’ll make sure to convert into a URL which you can play so here we will add URL do create object sorry create object URL and then pass this audio block then inside the return we’ll say audio URL as simple as that if you get any error so inside the console I will D I will just pass uh console the error okay so that is the complete uh logic in order to generate the text to speech now let’s save this one and inside the page. jsx once you have the response ready we are going to generate that okay so over here we’ll say um constant uh audio we’ll say just URL for now a wait and we’ll paste this not paste but what is the name we give convert text to speech so here we’ll say convert text to speech now whatever the AI response we are getting and from that one we will get the content comma um we also need to pass the name of the experts so that we are getting from the discussion room data so over here we’ll say discuss room data do expert name okay and once we have that I will just console the log with a URL okay now this URL obviously this is audio URL we need to save in one state so here we’ll say audio URL comma set audio URL is equal to use State and at the bottom so inside the use effect we’ll set the audio URL to URL as simple as that and then save it okay now now let’s test this out I will go back to our application I will make sure it’s completely new okay let me go to the existing one also one more thing uh we we have this inside the global Service we added this audio stream this n Tu capital A with the audio with the audio string okay so this is important because we are just whatever the value we are getting from this poly client s we are D structur structur it and we are getting this this audio stream so make sure that uh now I will open the inspect panel inside the console we’ll check whether we are getting the URL or not so let’s connect it and let’s talk hey hi I am tube gurji so right now it look like um the value which we pass right it’s not correct the Sally is not correct let’s pass some other name okay so let’s see because we have couple of name right that we can use it uh let me go back and select the other one so I will go to this previous one let’s go to the dashboard and we’ll create a completely new it look like Sally is not working uh so let’s select this topic based lecture here we’ll say I want to learn react native basic and we’ll select the J okay and click next and let’s connect now and then we’ll speak hi Janna how are you and over here you will see we got this URL perfect right once we get this URL we need to uh play that audio URL inside the audio tag as we are we are already saving that URL inside this audio URL state so simply uh maybe after this image tag after this expert name I’m going to add an audio tag over here we’ll provide a source The Source will be audio URL just close this tag over here I’m also going to provide a type uh I will just say audio MP3 and uh make sure to do the auto play okay so as soon as the audio URL is ready it will play automatically you don’t need to do anything let’s save this and let’s restart again and in this case now you’ll see once we start talking okay it will also give give us the response in a voice and that’s what uh this all about so let’s save this one I will just open the console in case we see any error hi Jonah how are you I’m doing great thanks how about you ready to dive into some react native Basics yes for sure awesome let’s start with what react native is it’s a framework for building mobile apps using JavaScript and react excited yes quite excited great to hear do you have any specific topics in mind like components or navigation can you tell me how to create the react application sure to create a react native app use the commanda set it up no um I have to go okay bye no problem have a great day feel free to out have more questions bye and that’s how cool it is right instantly within a second you are getting the answer from the AI and everything we are going we already connected together all the pieces first we connected the microphone then we convert that speech to text with the help of assembly AI then we C the response from the AI model and then we convert the text to speech and then we are playing that one and again the last step repeat obviously that is already happening how cool right and everything we implemented for free so guys that’s how um it works now you have one task right now if you see as soon as we talk we are showing that over here right either you can style this as depends on your requirement or you can add some text box so that it will get added to that text box and then once you stop it will get sent it’s up to you how you want it okay but uh I will leave up to you okay so until this point if you have any question any doubt let me know in the comment section ask the question on my Discord Channel because there are lot of things that we are going to implement again now it’s time to save the user conversation with an AI into our database if you know that we already have this column conversation inside the discussion room and in that one we want to save all of this conversation so in order to do that we just need to Simply uh write a function and then we need to save it so let’s go back to our convex and inside the convex we already have this discussion room inside that we are going to write a new function to update it so we’ll say export constant update um conversation and is equal to mutation now obviously this is a update so obviously it’s come under mutation and arguments we are going to pass or we are going to get the user record ID okay so here we’ll say ID uh V do ID and then we just want to pass the table name which is discussion room after this we also need to get the conversation whatever the conversation we want to save and which is of type A any so we’ll say V do any then let’s define the Handler and make sure you’ll get this idea and conversation when you are passing now inside the Handler we’ll say async uh CTX comma arguments so args and arrow function over here we can directly Define a wa CTX do db. patch now patch is used in convex to update the record here you need to pass the ID of the record which you want to update so here we say arguments. ID and then the field which you want to update so in this case we’ll say conversation and simply We’ll add argument. conversation and that’s all that’s how easy you can do this update uh the record functionality using the conve now simply go back to our uh discussion room page. jsx and here we’ll Define the mutation so we’ll say constant update conversation is equal to use mutation and give the API endpoint so API do discuss room do update conversation now this update conversation we need to call so let’s go back and whenever user disconnect the uh conversation or then then only we are going to call so here we’ll say await um the update conversation and inside that we need to provide the arguments so ID now ID is nothing but from we can get it from the discussion room data doore ID and then the conversation which we already have the state called conversation and that’s how easy you can do it and that’s all about the updating the conversation now let’s test this out so simply we’ll uh we’ll connect with connect cre and then we’ll uh add some conversation and once we add right and if you see right now I added some of the conversation now I will disconnect it right and as soon as I disconnect it will also save to our database so after disconnecting let’s go to the um discuss u in our convex and inside the convex if you see we have the user conversation if I open you will see the content the role depends on whether it’s a user or assistant all the conversation now we saved to our discussion room conversation column that’s how you can do it guys um if you have any question in it this application will not only help you to convers uh put a conversation between you and air Voice Assistant but it also give you the feedback or notes depends on the choice now once you click on disconnect uh you have option to generate the feedback or notes depends on whether you are you are giving interview question answer or topic based leure okay once you click on the feedback then we are going to send all the conversation to the AI model along with the some prompt and same thing we are going to do for the notes once you send this conversation to the AI model it will get the response and it will generate the feedback and notes and then that feedback and notes we are going to save to our database later on on the dashboard user can access the conversation and the notes or feedback any time how cool right so that’s what we are going to see next so very first thing that we need to do uh let’s go back and inside this option. jsx I added this summary prompt and uh for the topic based lecture uh learn language and meditation added same kind of summary prompt okay it will just say I generate notes depend on the conversation okay but for the mock interview and question answer it will generate the feedback along with the various the Improvement space okay and that’s all obviously if needed we can uh redefine this prompt okay so to get an exact output from the AI model now once we have this summary prompt simply go to the AI model so sorry go to our Global Services and inside that we already have this uh AI model right but uh we can actually use the same model as well okay because uh we need to pass a topic we need to pass a coaching option and from that one once we get the option we can just get the prompt which we want okay but it’s always better uh we can keep this uh separately so I will just copy this and let me paste just below to this one and it will say AI model to generate feedback and notes okay so obviously in this case you can pass the topic if you want uh it’s completely optional okay so the topic is not that much required okay so I will just remove that topic and uh coaching option is required and the conversation so here we’ll say conversation now first obviously we need to get the option okay so depends on the name right we will get the option once we have the option we’ll get the prompt so over here we want summary prompt and you don’t need to pass any topic then uh this will be same as it is uh you need to pass prompt and then uh conversation okay maybe you can just move this something like this and let’s see whether it’s okay or not I’m not sure exactly whether it’s working or not but let’s try this out and then once it is ready let’s go to our page. jsx file and uh once you click disconnect right because uh here we can um set one state let’s say constant enable feedback note comma set enable feedback notes is equal to use State initially it will be false and once it disconnect then we’ll set this enable feedback nodes to True okay now at the bottom over here maybe I think we need to add that inside the chat box that’s where we have uh we need to add the button right so over here I will add that enable feedback notes option we copy this so that we can accept that inside the chat box and we can just hide this uh we will enable this when it’s a false okay and then we will add a button to generate it so over here we’ll say button and close this now inside that we’ll say generate uh feedback SL notes okay and then save it now inside this this actually we can write okay instead of going back so over here we say constant generate feedback notes and inside here uh we need to call this method on the click of this one so here we say on click and simply call this method next uh from our global Service we need to call this method so over here we say constant result is equal to await AI model uh generate feedback and notes and to this one we need to pass the coaching option uh I don’t think so we have this coaching option here we will add add it in a moment and that’s all we need it okay uh so let’s get the coaching option so from here we are passing this coaching option from the discussion room data so I will pass that to the Chart box so over here we say coaching option which US are selected so here we are saving at a coaching option only and inside the chat box make sure to accept that so that we can pass and then we also want to pass a conversation which we already have then let make this as a sync and once we have the result we’ll say result dot uh content okay and then save it now here I’m going to define the state so call loading set loading is equal to use State and initially it will be false but once you start generating we’ll set the loading as a true and after finish we’ll set the loading as a false then when the loading is true we can just show show the loader icon so over here we’ll say if loading is true then we’ll show the loader icon something like this then inside the class name we’ll say animate spin so it will give some animation and also I will make sure this button is disabled when the loading is true okay and then save it now if I go back obviously we don’t have any conversation so I will pause the video we’ll make some conversation and then we’ll see whether it’s working or not now over here I had conversation and after disconnecting if you see we have this button generated right obviously we’ll align this button right now it’s not correctly aligned we need to give some margin top and all but when I click generate feedback and notes if you see it start generating feedback and notes and it will take a some few seconds of time but inside the console we also check whether it’s working or not right now um if if you see it it threw an error on line 41 saying last two conversation is not defined so that’s where so if I go to the global Service we forgot to add this conversation over here and that’s the reason we caught that error um I think we need to start again and now again we will try this and once you click on generate feedback and notes we’ll see boom we got the information pretty cool right so it it contains the uh some star it means it’s a bold one and obviously we will convert that into a um specific type when you want display that but right now if you see we have all the information pretty cool right so that’s how you can generate the feedback and notes so in this case this is a question answer so that’s why it generated the feedback but when you are uh selected the lecture then it will generate the notes for you depends on your conversation now once it generate we need to save this into our database right now we don’t have the column to save it so we need to uh either create a new column or you can create a new table in that one also you can save it but rather we can save in same column We’ll add a new column as well so before that let’s align this um button okay so because right now it’s weird so I will go to the chat box and to this button I will add a class name you margin top to 7 oh sorry margin top up to 7 and also we’ll mark withd to be full okay uh next let’s go to the schema file inside the convex in order to add a new column okay so before that okay you can make it optional so inside the description room I will add a new column called summary only okay so and inside the summary we’ll put this as an optional field and then I will put it is of type any or you can put it as a string as well or text and save it uh let’s make it this as a text if we I don’t think so we have the type text inside this um I will put it any only okay that will be good and then save it now over here you will see the new column get added call summary and currently it is unset now obviously let’s go back to the discuss room. jsx inside the convex and here we need to write a method to update the um summary so I will copy the existing method and here we say update summary inside that everything will be good over here I will accept the field as a summary and over here we’ll also update the summary okay so just make these small changes and that’s all you need to do after this let’s go to the chat box and once the it generated first Define this mutation so we’ll say constant o sorry let’s define a constant then update summary I will say is equal to use mutation API do discon room. update summary and then over here we’ll say a wait update summary dot oh sorry uh we need to pass a field we need to pass an ID so if you don’t have an ID we need to get the ID inside the chat box and uh or you can also get the ID directly from this uh discussion room ID okay so this room ID you can get it something like this room ID is equal to use parents okay the similar way we get it from the page.js and once we have that we’ll pass that room ID after this we need to pass a summary and that is nothing but this result. content okay and then save it you can WRA this everything in try catch block okay so we’ll put it inside the try block so if you get any error then it will not stop your application and over here we’ll set the loading as a false and outside of this one as well or maybe inside this we can set loading false okay and then SA save this one uh I think that’s all we need it for now now one more thing uh whenever you save any information you disconnect it or whatever right we need to show some kind of notification so that you will get to know whether the feedback notes generated or not and like that right but before that let’s test this out and right now we already have the information I will again click on this generate feedback notes and we’ll see whether it’s getting saved into our database or not okay now if you see we I generate this feedback and notes inside discretion room boom We inside the summary we have this summary now beautiful right perfect so that’s what we wanted and it means once we generate the feedback and notes we are able to save it successfully now simple thing that we need to show a notification so from the shadan we have a component called sonar this component act like a toast message see so in order to add it just copy this uh npm command then uh you need to add this toaster inside your layout file so over here I need to add a sudo in my case and then I will go to the layout file you can add it inside the root layout and over here you can add toaster from the component U onar and once once you add that go to the chat box and whenever the content is ready you can show the toast message saying um feedback sln notes saved okay and over here if it’s Error we’ll say internal server error try again okay uh so that’s how you need to do it um I think uh when user connected inside the page.js that Al that time also we can show the toast message so basically on connect to server when we click on the connect right so over here we’ll set the we just show the to message saying uh connected and on disconnect I can show toast message disconnected okay and then save it perfect so that’s how we need to do it I will just try this one more time oh so it refresh everything anyway but once you try it now you will see the toast notification okay so that user will get to know whether the feedback is generated or not it’s time to display all the previous history uh in in which obviously whatever the lecture user attend whatever the mock interview attend everything we are going to display on the dashboard and the along with their feedback notes generated by the AI okay so for that one uh we are going to fet the data from the discussion room but we have to make sure we only F the record which is belong to that particular user but unfortunately we are not saving the user information inside this discussion room we need to add a new column called user ID and in that one we need to save uh which user created this particular record so simply uh I will close this tpe for now and let’s go to this convex and schema inside the schema I’m going to uh add a new column over here and we’ll say user ID here uh right now I have to give it as a optional field and we’ll say v. ID but over here you need to give the table name okay and this automatically connect to our user table like this and then save it now as soon as you save uh you will see new column get added to our convex uh discussion room and over here if you see we have this user ID right but right now it’s empty so what I will do I will just copy this user ID and I will paste it uh so that we can tast out so this need to be a string okay uh I think oh that’s correct so this need to be a string so I will paste something like this I added for a couple of uh Records okay now obviously from next time we have to make sure we will save the user ID so we have to make some changes so inside the uh discussion room right here uh when we create a new room we need to accept the user ID which is of type ID but make sure uh that table name we need to give and then simply I’m going to pass that user ID over here so we’ll say arguments. uid now from next time it will save it but when you click on creating this uh discussion room that time also we need to make sure we will pass the user ID so over here we have this user input dialogue and on the click of next we are creating that so make sure to pass this user ID now in order to get the user information you’ll get it from the hook which you are you already created which is user data is equal to use context and user context and from that one from the user data you’ll get the user ID something like this underscore user ID okay and then save it now whenever you create a new room it will automatically save the user ID for us now in order to display the previous lecture and history right or feedback uh this is how we are going to show now you have two option one you can use this existing icon in order to do display or you can add a new abstract images for each of them so in this case I am going to add this abstract image to show it okay so it will give you some different uh if uh look to your dashboard and then uh the topic name the coaching uh option name and then the time when you did uh you attend last time right and uh inside our option. jsx for each of these field sorry this object I added this abstract fi and this ab1 ab2 PNG I have this file I already added inside our public folder something like this okay and that what we are going to use so let’s go back to our uh dashboard and inside that we already have this history. jsx page correct now inside this we need to fetch all the uh option which is belong to that particular user so we need to fetch all this record from the discussion room so we’ll say constant gate uh discussion rooms and the arrow function now inside the discussion room. jss from the convex right uh just make sure you inser inside the convex here um we already have this gate discussion room but it gives by ID we want all the discussion room right so here you need to write a method or you can just copy this existing one and then I will paste it here but over here we’ll say get all discussion room then inside the argument we need to get the user ID so here I will say U ID and and this need to be a users ID okay and uh over here I will just filter that out so instead of get we’ll say DB do query inside that you need to give the table name from which you want know Fage then we’ll say do filter and here you need to write a logic on which column you want to F so here we’ll say q q do fill and inside this we’ll say Q do equal to uh oh sorry I think uh this need to be a first Q do equal to because we need to compare with the two column so we’ll say q. fill and then give the fill name which is the user ID we want to compare with our arguments user ID and if that is match then simply we’ll say dot collect okay it means select all that uh Records which matches this particular condition and once we have the result we simply going to return that and then save it now let’s go back to this history. jsx here as this is a query and we want to fetch depends on the user ID I’m going to define the convex first and we say use convex hook okay along with that one we need a user ID so that you can get it from the user data is equal to use context and here we’ll say user context now inside the use effect we going to call this particular method and we want to execute this use effect only when the user data is available and here we’ll say that’s the reason we are going to add user data is and and gate discussion room it will call this method only when the user data is available and then inside the gate discussion room here we say result is equal to await convex do query and inside this you need to pass the API so which is this um get all discussion room okay and then you need to pass a parameter which is the user ID we need to pass so that you can get it from the user data doore ID as we use AWA let’s make this as a sync and then once we have the result for now we’ll just consol it and we’ll verify whether we are are getting the result or not inside this history component so let’s go back to our application I will go to the inspect panel and inside the console uh obviously we you uh we use this use effect and so I think we need to make this component on the client side so we’ll say use client and if you see over here we got the for record with this coaching option expert name topic and menu other things now simply we want to save this in one state so inside the history I will create a state called constant discussion room list comma set discussion room list is equal to use State okay and then save it now over here we’ll say set discussion room list with an result now next thing if the discussion room list so over here we say if discussion room list. length is equal to equal to zero then we are going to show this h2 tag with this particular text okay and uh if obviously if discussion room is there then we show the discussion room list so over here we’ll add discussion room list do map here we’ll say item comma index and the arrow function like this oops and inside that we’ll add a d now inside the DU I will add one more de and we’ll add a text oh sorry uh the h2 tag with item dot um I just verify the field name so the field name is I want this topic name so we’ll say topic something like this okay after this uh another H tag with the coaching option so we’ll say item do coaching option and then save it now if I go back and obviously on the screen let’s refresh this once you will see we have this list of all the information but also we have to make sure only lectures means topic based lectures learn language and medication uh list or records we are going to display under this previous lecture for mock interview and question answer we are going to show on the feedback side because uh from the previous lecture we are going to show all the notes and for feedback we are going to show the feedback okay so that’s the reason we have uh differentiating that two things uh also for this one we’ll add key as a index and uh as I say right here we’re going to add a condition so simply we’ll say if item dot uh coaching option okay if item. coaching option is equal to equal to um I will just get the exact option name which is topic based lecture or or okay item do coaching option is equal to equal to let’s say learn language then only we want to allow right and medication as well that you can add it here we’ll add and and operator and let let bring this down okay and then save it now if I go back you will see only two records beautiful now for this h2 tag I will say class name font bold and here we will say class name text Gray 400 something like this uh after this as I told you right we also want an image so I will Define one method called constant get uh abstract images is equal to and here I’m going to pass an uh Arrow function and inside this I’m going to pass an option on depends on that one we want it right so here we say constant uh coaching option here we say coaching option is equal to coaching options doind here we’ll say item then item dot name it matches with the option then we are getting this coaching option and then simply we’ll return the coaching option dot uh abstract okay so that abstract image I’m getting now this particular method I’m going to call so over here I will WRA in another du something like this and then over here we’ll add an image tag with a source and inside the source I’m going to call this method then inside the alt tag I’m going to you can say anything let’s say abstract then inside the width let’s say 70 and height is of 70 or let’s make it 54 now and save now if I go back and here okay so we got an error but not sure okay I think yeah we have the error it’s saying coaching option do abstract is undefined okay so maybe what you can do you can add optional field and over here if it’s not there I’m going to add a slab 1.png okay I think that will be good let’s save it and let’s test this out and right now if you see we have this images okay so both are topic based lecture so that’s the reason it uh it has the same image that’s good now let’s add some Styles so here we’ll add a rounded corner with a full and save it let make this 17 let’s see how it looks also for this du I will add a flex gap of 7 and item to be in the center okay obviously uh we need to give height inside this let’s say 70 pixel width of 70 pixel I think that’s too big right let’s make it 50 only perfect now let’s give some margin from the top oh sorry uh so over here for this D only we’ll add a class name margin top to five then we want to add a border at the bottom side only okay so maybe for this do we’ll add a class name we’ll say a border bottom to let’s say 2 pixel and also padding bottom to let’s say three and save it so what it will do it will add the um border only okay I will make this one pixel and also We’ll add margin bottom to let’s say four perfect okay and that’s what we wanted now another important thing when we hover on this one we want to show a button and that button will call view notes so in order to add an H effect to that one we’ll add first we’ll make this as a group okay now inside this D only I’m going to add a button uh we’ll say view notes to this button I will I’m going to add a class U let’s add a variant only so variant I’m going to add as a outline so you will see this outline button but we want on the right hand side so for this de we’ll make a flex justify between and then item to be in the center so it will be on the right hand side but we only want to show when you hover on any of this particular item so basically inside the class name we’ll say invisible okay but on a group H so here we’ll say group however we want to show it so we’ll say visible now right now if you see it’s invisible but if you h on this one it visible now if i h on any of these items is still visible you don’t need to hover on this button only because we already mark this as a group so this will be a one group and even though on a it’s a group hover right even though you hover on any of this item or on this particular group it will uh show this particular button okay uh also make sure I will add this cursor point enter over here and then save it perfect and now you you see the cursor get changed as well same thing you have to implement for the feedback also we are getting uh the same image the reason is uh we we are not passing the option over here so we need to pass uh coach item. coaching option okay to this method so that you’ll get a different result also um from the discussion room you can order by the creation time and right now we are not showing the time when it get created so I will add another S2 tag and inside that we need to add item dot um let’s get the fill name which is the underscore creation time we’ll say underscore creation time and save it so you will see this time but this time is in the form of time stamp we’ll change that in a moment but I will make this gray 400 only and save it now to make this like um 20 minutes ago 30 minutes ago or 24 hours ago you need to add one Library called moment.js so simply just type npmi moment click enter and then it will add the moment.js library which help us to convert any kind of date in a specific format you can just go to this mj.com and here you will find a different different option now if you type this from now it will calculate like this 303 days ago 9 hours ago 29 minutes ago right how cool so that’s how we want to do it so we already have the uh creation time right simply I will add a moment Library make sure to import this and here we’ll say from now and save it once you add that one you will see it’s saying 21 hours ago a day ago something like that now for the order by right because we want this as a first because the latest one we want to show at the top so inside the discussion room when you f the all the discussion room here we have um I think just before that we’ll say order and then you can add order by let say descending okay and let’s save this one and and then if I refresh this screen now you will see now the latest one is on the top also um I will just change the font size for this time so here will say text small perfect now same thing you have to implement to the feedback okay so what I will do I will just copy everything as it is so everything I want to copy okay and then inside our feedback I’m going to paste something like this okay obviously we need to import the all the statement so it will be better if you copy as it is and then save it now over here once you save it uh it’s also showing on this side but we need to change that now little bit name because we copied so here we say um your previous feedbacks or just we will say feedback here as well we need a feedback and but most important the coaching option that we need to update so obviously the coaching option um only when we want to show the name is mock interview and the question answer prep so over here will say mock interview and this side will say question answer prep pration we don’t need third one so I will remove that and everything will be as it is let’s save this one and right now if you see we only one have one uh option which is this react just which is question answer prep and instead of view notes we’ll say view feedback and then save it okay so when I H on this one you will see this button view feedback perfect and that’s how you need to display your previous or history about your lectures about your interviews and everything which you can uh see later on at this point you already build 80% of application so you learn a lot of things and you know now whatever the new feature you want to add you can add yourself if you build until this point and now we are going to add one more feature where when you click on any of these view notes or view feedback option we are going to navigate to the new screen which you already know how to navigate it and on that particular screen um as per this mockup I don’t have the exact design for that one but at the top we are going to show some basic information similar like this one uh and at the bottom side we are going to show a feedback notes so whatever notes we are already saved that note uh notes or feedback we are going to display and on the right hand side we are also going to to add a chart box where um we can show the conversation history okay obviously you cannot talk just a display purpose only and for this chat box we can use the existing chart box okay so we already have the component for that one just we need to add a new component for the feedback and notes now as I say that you already know a lot of things so simply let’s create a new route so inside the main I will add a new folder here we say view um discussion room or we say you we can say view feedback and notes so we’ll say view or we’ll say simply summary that will be easy and inside that we want a dynamic route so we’ll add a room ID again so this need to be actually folders so make sure is a folder so room ID and then I will add a new page. jsx file let’s add a default template here we’ll say view summary and then save it now inside this view summary first thing we need to get a room ID so we’ll say room ID is equal to uh use params so we’ll get the room ID now we need to get the discussion room information from the room ID so here we say get discussion room data I will say and you already have the uh query for that one so I don’t think so we need this particular method okay I think let’s let’s just call constant uh or let’s copy from our discussion room page. jsx because we already have this discussion room data just copy that as it is and then paste it here because we are just passing this room ID as it is and just for your confirmation I will also print this room discussion room data okay now on the click of view data or sorry view feedback or view notes we want to navigate to this particular page so I will go to the dashboard and inside the history. jsx where we have this button right I will just use a link tag so you can use this link tag in order to navigate it’s similar to our anchor tag inside the HTML CSS but it’s optimized one in for a next J so that’s the reason we are going to use over here we’ll say view summary slash and the ID which is uh the ID is just Item doore ID and then save it now if I go back to our application and if I click for example let’s say reactjs view feedback and uh okay I think let’s refresh this on and when we click view feedback I don’t know why it’s not navigating oh so we did not add it for this feedback we just added for this uh lecture so if I click on this it is navigating but obviously we have error in that page so let’s fix that one as well so inside the page we need to mark this as a use client because we are using this room ID right and uh also inside the feedback. jsx I’m going to wrap inside the link tag H reference here we say slash view summary slash the ID which is the item doore ID and the arrow function something like like this and save it okay and now we can test again so if I click view feedback now I don’t know it did not refresh or what and I will also make sure it’s saved I think it’s saved and now if I click view feedback boom it’s navigating to view summary with this ID and if I go to the inspect panel we’ll just make sure we are getting all the data so inside the console here we have object and inside the object we have this coaching option expert name along with this ID conversation and lot of other information beautiful now let’s go to our page. jsx and as I told you right we need to divide into two screen and at the top we want to show um oh let me go back to our markup we want to show this information so let’s add that quickly so first I will add a de and again I will added one more de over here we’ll say image The Source tag and the arrow function and I will go to this feedback where we have this abstract image right I will just copy this and we’ll paste it here because we want to get the abstract image from the coaching option so similar way I’m going to pass the discussion room data dot coaching option so from that one we’ll get the abstract image here we’ll say Al tag as a abstract then we want to show we we will add a width let’s say 100 height to 100 inside the class name we’ll say width to 70 pixel height to 70 pixel I will make this rounded full and save it and if I go back let’s make sure the image is showing beautiful then inside this du tag similar like this history or whatever right I will just copy everything as it is and I will paste it here okay now over here this need to be a discussion room data. topic uh coaching option and the creation time and save it make sure to import this moment library and is refreshing also make sure to add this question mark for that optional operator and if I go back okay we have an error Let me refresh this again and here we have the data beautiful now let’s apply some styling so for this de we’ll add a class name we’ll make it Flex gap of let’s say seven item to be in the center and as I told you right we want this on the right hand side so basically for this h2 tag I will keep uh let’s keep outside of this one or let’s let’s add let’s do one thing I will put outside of this one and then I will wrap again inside one more d and over here I will just keep this size as it is and now for this D as well we make it Flex I will add justify between and uh item at the end okay something like this see perfect I think this is good for me um just one more uh here we’ll make text larger next thing as I told you we want to divide this into two uh columns so basically we’ll add a d and inside this we have the two option one for the chat box and one for the notes and here we’ll add a class name We’ll add a grid grid column one when the screen size is smaller and when the screen size is larger we’ll make grid column uh four okay out of this four column I’m going to assign three column to this particular do so here we’ll say column span 3 and also I’m going to add a gap to five and save it now as you know that we already have the chart boox component so I’m going to use this chart boox component as it is to this chart boox component we need to set a conversation that conversation you can get it from the discussion room. conversation then we also have the coaching option that coaching option you can get it from the discussion room. coaching option and we don’t have the enable feedback notes so here I will make this as a false and then save it and once you save you will see the chart box as well okay so make sure this you are making this feel optional the reason is initially the discuss room data is empty right so that’s the reason you need to mark this as optional operator field with an optional operator field um also over here we have an error it’s saying cannot re property of undying map so let me get back to our inspect panel and inside the console okay maybe we what we can do we can just make sure we want to show this chat box only when we have the data okay so if chatbox do data we’ll say do conversation if it’s there then only show the chat box component and boom here we have and this is our chart box component perfect somehow it’s coming very small uh the reason is we need to put our grid so this is our grid right and uh I think that’s good I don’t know why it’s showing too small okay so here this need to be a column span three okay so maybe that is the reason and instead of that one let’s make it span two only so this will get little more space and I also Mark this column span two now we I think we are good on this part see perfect so this is the conversation uh simply for this da I will Mark margin top to five so some space um now on the left hand side we can show the notes as well so I also modify this grid little bit I made this five and then 32 okay so three size to this first D and other for two now over here we need to create a component for the nodes so simply inside the view summary I will add underscore components folder and inside this we’ll say uh summary box. jsx add a default template and save it and this summary box I’m going to add over here perfect now to this summary box we need to pass the summary okay so here we say summary as from the discussion room data do summary and save it now inside the summary box make sure to accept that as a summary only and save it now here we’ll say h2 tag and simply you can show the summary as well like this and once you add you will see this summary but obviously you need to format this uh perfectly right now it’s completely unformatted so you need to format this now to format this particular text you need to use this react markdown Library okay so which will convert your unformatted U text to a perfect formatted value so simply copy this npm command and then install this okay once you install this you just need to wrap your summary so here we say react markdown make sure to import this react markdown and inside that you need to provide your text which you want to format it and here after refresh it’s refreshing and boom if you see now some of the text are in bold and it’s well formatted but still if you want to add uh little spacing between this line and all simply We’ll add a class name here we’ll say text Medium sorry text base slash you can provide the how much um size you want for example in this case we mark it as a text base sl8 you will see the line spacing the line height is change okay and that’s good also you can uh make this scroll so you don’t need to scroll the complete page so for this du We’ll add a class name here I will add a height of 60 vertical height which is similar to our chart box and then we’ll say overflow Auto okay and then save it now over here if you see you need to scroll it in order to view beautiful right and you don’t need to uh scroll your complete page this will help us to do that uh also I’m going to make one more change inside this page. jsx I will add a class name we’ll say minus margin top to let’s say 10 so it will be little up okay and I think that’s much better perfect over here um you can give some Valu or let’s say h2 tag and here I will say uh summary of your cont conversation I will add a class name font instead of font we’ll say text large let’s say font bold let’s see how it looks perfect okay and where you can scroll it um you can give margin bottom so here we say margin bottom to let’s say six so some space okay and same thing you can do over here on the right hand side so I will copy the same one just I will paste it inside this D tag and here we will say uh your conversation okay and I think that’s all let’s save it and let’s test this out perfect so here we have this conversation we don’t need this particular text okay so so let’s remove this from the chart box because that is not that much relevant okay so I will just let me do this empty I don’t want to show anything so I will just remove that this particular text okay and I think this is pretty much all for this particular text okay so that’s how guys you need to show this view summary as simple as that you it’s not a rocket science but the most interesting thing about this one user can see what answer he gave and what feedback he received inside this summary it is very important in order to build this size application we need to keep track of all the uh conversation and the tokens because we already giving the user some default token when user create the account and when user makes some usage right when user start conversation we need to update the token obviously we need uh so that user can purchase later on if if he needed now in order to update this token we need to count the length of the uh conversation right so if user talk five words then we need to calculate that five words and then we need to update that so simply uh go to this discussion room page. jsx file and that’s where all our logic are right so inside this I’m going to create a new method called constant update user token and the arrow function now in order to update it first we need to write a method to update the token so inside the users uh con uh convex folder right here uh we’ll write a new method we say export constant update user token is equal to mutation and in that one it will get two arguments one is the ID so this ID is nothing but the user ID right and then uh the credits okay the updated credits that we are going to which we have want to update so that is of type number and then we’ll pass the Handler over here we’ll simply say a wait CTX do db. patch and and then we need to pass which uh record you want to update so we’ll say arguments. ID and then the field which you want to update so in this case we’ll say credits with our arguments do credits perfect something like this okay and that’s how you can update it as simple as that now simply at the top we’ll mention that particular um we will update that so here we say update user token is equal to use mutation and then provide the API so API dot users do update user token now make sure to update this particular method so here we say update user token uh we’ll say method only okay and inside that we’ll say constant result is equal to await update user token and inside this we need to provide two important value one is the user ID so that we can get it from the user data doore ID now if you don’t have this user data Define here you can get it from the use context so over here you can Define user data comma set user data is equal to use context and here we’ll say user context now once you define this user data from the user data you’ll get the user ID here I will make this as a sync and then in order to create the credits obviously you have this user data do credits as well but the problem is we need to calculate that first so simply over here we say constant token count is equal to and now this particular method we need to call inside the use effect because use effect executing whenever the conversation changes right so simply at the bottom you can call this method called update user token method and inside this conversation or instead of this conversation right let’s update uh whenever you you generate the final transcript okay so over here you can update it and you just need to send this text and nothing else something like this okay but also uh here I will make this await if needed but also you need to update on uh whenever the AI generate the response so that logic uh inside this uh use effect right so maybe you can say after this conversation and over here we’ll say update token but we just want a generated message so that we can get it from the AI response do content okay so here we’ll update AI generated token and over here we’ll say update user generated token okay so this two method we update and then inside this update user token we’ll get the text and depends on this particular text we’ll say text. trim and of obviously if it’s uh there we say text. trim then we’ll split this and here we’ll say uh this is the rejects okay that we need to follow and Slash and we’ll say dot length so it will calculate the length otherwise it will give zero if the text token count is empty and then once we have some token right so this will be our token so we’ll just minus the token from this one so if user have the some

credits minus this token now make sure this is a number and I will also make sure this will be also a number okay and then in credits we’ll get the result as a number only and that’s all you need to do also make sure you’ll update our hook so inside the set user data you need to write um let’s say previous and inside this we’ll say all the field from the previous but you need to update the credits field with this value perfect right so make sure to update like this and then save it now what we do from the next time whenever uh you uh start the conversation it will also update your token and that is very very important so here I did some conversation okay and if you see in our database we have this credit updated to 49928 okay depends on how much conversation I did how cool so that’s how you need to do it you can also implement the same thing when you generate the feedback and notes okay so same thing you have to do just call this method when you are disconnecting right we already have this update conversation and uh once you get the result then also you can update it’s up to you so if you have any question any doubt let me know in the comment section you can ask on my Discord Channel as well now it’s time to implement the profile section on the click of profile we are going to show a dialog and on that dialogue we user have option to uh update his account setting usern name as well as he can check the how many credits left and option to upgrade and join the membership as as well through that particular profile section so first thing we going to add the dialogue on the click of this profile so simply we’ll go to the shadan and search for the dialog component as you know that we already installed this component so you don’t need to install it again just copy this import statement also uh we are going to create a new component for that so inside our dashboard component folder I’m going to add profile dialog. jsx we’ll add a default template and then simply whatever the UT statement you copy for the dialogue paste it here same thing I’m going to copy this uh dialogue use case example we’ll paste it here and then save it now we want to open this dialogue on the click of this profile button so simply uh go to the page. jsx that’s where okay so inside this feature assistant uh we have this button right so we’ll just wrap the profile dialogue something like this okay now this will be the children so inside the profile dialogue we’ll accept the children and then we’ll render this children over here make sure to mark this as a child so that you will not get any hydration error now once you save it let’s go back and now on the click of this profile you will see it opens the dialogue pretty cool right so that how it works as simple as that now inside this dialogue description I’m going to create a new component under this component folder under the dashboard called credits. jsx and in that one we are going to show Credit Now this component we are going to just import inside this dialog description so over here we say credits and then save it now if I go back and click profile you will see the text credits only now let’s go to this credits and that’s where we are going to show how many credits left and option to upgrade the credits as well so first I’m going to get the user information so we’ll say user data is equal to use um context andway here we say user context okay and then save it now inside this D first we’ll add uh another div inside this we’ll say image The Source tag and inside the source we want to show a user profile picture so here we will say user dot picture it’s need to be user data actually user data. picture then we’ll give width let’s say 60 and height to 60 now if I save this one make sure the profile picture is displaying on the screen so somehow the profile picture is not f visible I will just make sure the field is correct so right now uh it look like we are not saving the picture so in order to get the user picture you can get it from the uh our authentication hook so which is equal to use user from the stack uh St frame SL stack okay and then you can say user. picture and I will just make sure so we will say user Dot uh profile image URL okay so in order to display the picture you need to add this profile image URL uh now if I go to this profile so right now we are getting this error now this error is stating that you need to add this host name inside your next. config.js file because this is third party URL right and we need to add this host name into that one so simply copy this host name go to the next docon MGS file inside here let’s add images inside the images let’s add a domain and whatever domain you want to Whit list just add this once you add that you need to refresh your application or restart your application and in meantime uh I will also check whether it’s displaying or not and here we have perfect now we’ll just add some styling so over here we’ll add a class name we’ll make rounded full and save it after this uh on the right hand side I want to show user name so over here we’ll say user do um display name then another tag for user. email or primary email now for this S2 tag We’ll add a text larger font bold perfect and let’s bring in one line so um for this one as well I will make a gray color let’s say 500 and uh for this de I will make it Flex gap of five item to be in the center something like this okay then I will put one horizontal line so after this de We’ll add a horizontal line here uh you can add class name margin y to let’s say three so some space then um we’ll add another du tag and it will show the how many token you we we you already use right so um simply uh let’s for now let’s say S2 tag inside that we’ll say token usage and uh I will give a class name font B okay then just below that one we want to show how many token usage let’s say uh 30,000 from the 50,000 you can say anything like this okay and then we want to show a progress bar so right now this is how it look lies but we want to show a progress bar and it will display uh the actual progress so in order to add a progress bar just go to this shadan components and search for this progress component it’s very easy just copy this import statement and make sure to install this uh once you install just use it so over here I will add this progress from the components and to this progress you can Define the value okay so if you see this example you need to Define this value for now let’s say Define a value as 33% completed okay um perfect and save it and if I go back to this profile you will see this one now for this progress bar We’ll add styling We’ll add margin top let’s say margin y to five so some space perfect okay uh next I will just make this four or maybe three and then we want to show the current plan information okay so over here I will add an D tag inside the D we will add h2 tag and inside that we’ll say current Plus plan then we’ll add another h2 tag and we’ll say for example free plan okay and save it right now we are just building UI but we are going to add some condition as well that I’m going to tell you in a moment now over here we’ll say class name font bold then for this do we’ll add a class name we’ll make it Flex then justify between item to be in the center for this S2 tag I’m going to add a class name We’ll add a padding into one then background secondary and also we’ll make rounded corner to let’s say uh large something like this see let’s add padding X2 two perfect uh for this due let’s add margin top to three perfect okay then we want to add one card uh in that one we can show option to upgrade so over here I will add one du inside this du uh let’s add another du with an H2 tag and here we’ll say Pro Plan then we’ll add another h2 tag here we’ll say uh how many tokens you are giving to that Pro Plan so we’ll say 50,000 tokens now over here we’ll make font bold and uh I will make sure to wrap this in One D something like this and then we’ll add another us tag to display the amount okay so here we’ll say $10 per month here I will make this font bold okay now let’s bring everything in one line so here we class name flex and justify bit so this is how it will look like but obviously we need to use some margin top and all so for this one we we will add margin top to five then we’ll add padding to let’s say five and save it perfect let’s add a border as well and we’ll make rounded uh to Excel and then at the bottom we want to add a button so over here uh first We’ll add a horizontal line for this we’ll add margin Y 2 3 and then we’ll add button we’ll say uh upgrade into this button I’m going to add a wallet icon and we’ll say upgrade you can pass the amount as well we say doll10 and then save it and this is how it look likees let’s put the width to be full so for this class um button We’ll add width to full something like this and that’s how our uh token profile uh dialogue is ready okay now the question is how can we show which one is free plan which one is paid and everything if you remember when we create the user information we added this subscription ID if user has a valid subscription ID then we are going to show that user is on a paid um plan and also we are going to show the credits because we already have this credit information as well so from the user data we are going to show the credits how many credits you user left with so over here we’ll just simply going to add a credits sorry user data dot credits and if I save it now you will see the actual user credits so right now it’s not displaying somehow so it need to be a credits with a C Small C and here we have and you can just detect this uh 50,000 from this one okay but before that uh I’m going to now if it’s a free plan then we can show the uh just minimum token right so let’s consider over here we can add a condition if user data dot subscription ID I will just make sure the FI name is correct okay so this is the subscription ID I will just uh okay that’s fine if subscription ID is there right then we can show the text as 50,000 token okay otherwise we can show uh let’s say 5,000 tokens okay and uh after this let’s save this one and then you will see now user only have 5,000 token obviously by default I already have the 50,000 token right but now let’s let add subscription ID let’s say 1 2 3 4 5 as this is a string I will add this and if I refresh it now you will see that token count is to 50,000 good right so that’s how you need to add it uh next thing uh same thing depends on that one we need to calculate the progress so over here I will write a method constant calculate progress I will say and the arrow function now this method I’m going to call over here and it will return a data so first we’ll check if user is free or not so over here we say if user data dot subscription ID if it’s there right then we’ll return the 50,000 minus user data dot uh credits okay so this need to be a number so I will just make sure it’s a number okay and then save it now if I go back and uh I don’t know okay so if you see uh if I refresh this let make sure it’s correct and make sure okay so you have to make sure it you have it need to be between 1 to 100 so you have to divide this by 100 so let’s divide this by 100 so actually here instead of minus let’s do divide this uh number of tokens so we’ll do number of tokens divide by uh maximum token so in this case maximum token will be 50,000 right and then we’ll say into 100 so into 100 let’s say save it and let’s see I think it’s over the our logic I think our logic is incorrect our logic is correct but if you see the percentage is very minimum it’s 99.85% let’s say I will make 40,000 right and enter it then if I refresh this now you will see that change and then you will update this progress to let’s say 80% see okay so this is correct so that’s good and uh obviously once you reach to zero then this progress bar will end to this left side right so nothing you don’t have a token then you need to upgrade it so something like that uh next thing uh over here you need to show paid plan if user already have that subscription ID so over here I can put a logic so you can put this logic I will just copy everything as it is I’ll paste it here and the free plan we can add over here and this will say paid plan okay and if you see oh I think spelling is incorrect so here we say paid plan so you if user is already on paid plan then you will see displayed plan option but if you want to upgrade this plan then after clicking on that one you can navigate to this payment Gateway now for the payment Gateway I already added the Reser pay payment Gateway which is compatible to our Indian currency but you can also add the strappy and for that one you can watch my bill personal AI assistant uh video in that one we already have the dedicated payment uh integration chapter uh you can refer to that one it’s similar uh 99% similar to what we already build it also you can go to the TU guru.com we have this build personal aist application go to that one um you can also get the source code of this one or you can get the source code of this particular application from the tui.com so on that one on the click off upgrade you will navigate to this Reserve pay payment Gateway and then you can easily make a payment I will add the payment integration into this source code so you can get the source code and then you can have the payment integration ready to use now you also need to make sure once you add the payment and you have the subscription ID make sure to update the subscription ID into your user us column as well as you need to update the credits so this two point is very important now let’s consider that you want to show your video on the screen right obviously we need to enable the webcam for that one and that’s what we are going to integrate now now it’s up to you whether you want to display the webcam on this big screen or on this small screen now consider that we want to show this on this smaller screen so first that one the easiest way to do that just uh install this react webcam Library copy this react webcam make sure to install this one and once you install you can simply uh add that so what I will do um right now I’m going to uh commment this out okay for testing purpose and I will add a du inside that we’ll add a webcam like this and then save it now to this webcam I’m going to provide the height and and width so let’s say I provide the height of 1770 width I will give 250 also you can provide the class name and I will make a rounded corner to let’s say 2 XEL and then save it now once we add that let’s go back and here we have we can able to see the webcam cool right now next we want this on the right side corner similar like this one so you can just add the class name we’ll make this absolute the class name to be an absolute then we’ll set a bottom to let’s say uh 10 and right to 10 okay and then save it now it will be on the right hand side at the bottom I think we can decrease this size so I will make this to let’s say 80 and here I will make this 130 some little smaller something like this I think that’s much better okay so that’s how you need to add it uh if you want to add more customization into that one on the click of that you want to see the bigger image that also you can do it it’s up to you how you want to do it okay for now I will keep it simple but uh if you want to know how to do it let me know in the comment section and we can do it in the source code now it’s time to deploy our application to a production so I added this land Landing screen Simple and Clean if you want to get this Landing screen you can access it from the source code it is included in the source code as well also there are some features that are also available in inside the source code if you want it you can access that one now first thing that we are going to do is to push all our code to the GitHub and then we are going to connect GitHub to a worel because worel is the cloud platform to host your site for a free so let’s go to GitHub first and we’ll create a new report here I will give the name as AI coaching voice agent then you can keep the public or private it’s up to you and then create the repo once the repo is created you can set the origin to this repo so I will copy this and simply go to your terminal here I will first initialize the git once it is initialized set the remote origin then run G add command so all your files are get stage then give the commit message we’ll say initial commit and then simply push this change but if you are pushing this first time then make sure to push with this command and then once the code is pushed it will be available to your repo now many user ask me the question why we are not pushing directly to the worel you can also do that but keeping the all your code to the GitHub will help you to update in later on you will not lose your code at any time and it will be very uh easy to share across a multiple uh uh way right so simply once it pushed make sure it is available on the GitHub now go to the versal and over here you have option to click add new click project now you have to connect your GitHub report to this one so I already connected then you will see um the name of your project because we just now pushed so it will it’s saying just now and then click import over here you can give the project name then it automatically select the framework as well now as we are also using the convex so you have to do little bit modification while building the versal project so if I go to this convex documentation here you need to follow couple of Step first thing you need to override this build command with this npx convex deploy and this npm run build so I will copy this go back to your project and over here we have this build output setting just overwrite this and I will paste the one which we copied then I will go back over here and then you need to get the convex deploy key so simply in order to get this conx deploy key go to the dashboard and and inside the dashboard select the project but make sure to select the production mode now inside this production mode obviously uh go to the settings and inside the settings you have this URL deploy key now let’s generate this production deploy key as I’m using the convex Cloud on their own platform so uh you can directly go to the dashboard here I will say production key and then save it once this key is generated just copy this key and you need to add the environment variable with this convo deploy key okay so that’s how easy it is but before that after overriding this command click environment variable and go back to your project open the env. local file and copy all the environment Keys like this and simply paste it here boom right then I will add one more key and then we want to give the name as a convex dep key so I will add that and from the convex production we need to also copy the convex production key and I will paste it here and simply click deploy now if you face any issue while deployment just check the log and just fix the issue or fix the error as simple as that you don’t need to worry about if it’s uh not uh deployed correctly or if you get any error so now we’ll wait to to finish the deployment right now it’s building then it will install all the dependency and then it will deploy our application on the cloud and boom our application is now live and here is the preview if I click to open this application boom we have this now dedicated domain to this one and here you can access our application so guys that’s how easily you can deploy your application on the production mode on the cloud now one more important thing go to the stack.com and here we need to make your application to production mode and it’s quite easy I already Del it so go to the project setting and inside the project setting okay first before that let’s go to the domain because you need to add your domain so click add new domain and you can add overal domain make sure the URL is correct you don’t need to have your own dedicated domain okay I already added so it’s saying domain already exist once you add that one make sure to disable uh this devop setting okay and then you can go to the project setting and here you need to enable this production mode and boom you are good to go okay so that’s how easy you can put this stack o on production mode as well so guys that’s all for this video If you really like this video press like button if you did not subscribe to our Channel please please do subscribe and don’t forget to press notification Bell icon once you press the notification Bell icon you will get all of my update and you will not miss any update from me so guys see you in the next video

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!