🔴 Let’s build an AI Voice Assistant App with NEXT.JS 14! (Azure, OpenAI, Whisper Speech AI)

❗️ Get the Code for FREE here (Form must be submitted, not skipped!): https://aka.ms/sonnyai 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com 🔴 Looking for the code for my other builds? 🛠️ https://links.papareact.com/github Join me as I show you how to build it from scratch with the newly released Next.js 14. You'll learn the following in this build: 👉 Create a Beautiful UI & UX for our Siri 2.0 clone! 👉 How to use the Azure OpenAI Whisper Speech Recognition Service to convert speech to text! 👉 How to create and leverage the power of Azure OpenAI Service to generate AI Assistant Chat Completions at scale! 👉 How to use the MediaRecorder interface of the MediaStream Recording API to capture user audio! 👉 Use the Web Speech API interface to synthesise an artificial voice to output the AI Assistant replies! 👉 How to build a beautiful UI design with Tailwind CSS! 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 How to deploy the final build on Vercel! 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 00:00 Introduction 01:04 Build Demo 04:26 Build Tech 06:24 Build Plan 10:38 Initialising the Build 15:15 Build Layout 16:02 Building the Header Section (1/2) 18:53 Implementing Shadcn/ui 21:35 Building the Header Section (2/2) 25:13 Building the Form Section 30:08 Building the Messages Section in Form 31:46 Building the Recorder Section in Form 32:53 Creating the Messages Component 35:33 Building the Recorder Component 39:24 Building the Hidden Fields Section in Form 42:15 Implementing Functionality to Capture Audio 48:19 Implementing the MediaRecorder Interface 58:41 Implementing the Start & Stop Recording Functionality 1:15:53 Implementing Next.js 14 Server Actions (1/2) 1:17:20 Setting Up Microsoft Azure OpenAI Service 1:20:44 Implementing Microsoft Azure OpenAI Service 1:24:06 Implementing the Whisper API Model 1:28:15 Implementing Next.js 14 Server Actions (2/2) 1:44:18 Building the Messages Component (1/2) 1:53:02 Implementing a Message Loader 1:55:57 Implementing the Voice Synthesizer Functionality with Web Speech API 2:15:30 Building the Messages Component (2/2) 2:18:50 Deploying to Vercel 2:30:59 Final Build Demo 2:33:36 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Siri, Apple and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #nextjs #nextjs14 #react #siri #voiceassistant #typescript #reactjs #openai #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming #ai #apple #voicerecognition #machinelearning