Sonny Sangha ：🔴 Let’s build Siri 2.0 with NEXT.JS 14! (Microsoft Azure, OpenAI, Whisper Speech Recognition AI, TS)
❗️ 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
🔴 Looking for the code for my other builds? 🛠️
https://links.papareact.com/github
Join me as I show you how to build a Siri 2.0 clone 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 coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode
🎵 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