🔴 Let’s build Siri Clone with NEXT.JS 14! (Microsoft Azure, OpenAI, Whisper Speech Recognition 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
📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycoding...
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 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
Watch video 🔴 Let’s build Siri Clone with NEXT.JS 14! (Microsoft Azure, OpenAI, Whisper Speech Recognition AI) online without registration, duration hours minute second in high quality. This video was added by user Sonny Sangha 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 21,749 once and liked it 766 people.