Cursor + V0 + Groq: Next.js Transcription App in 4 Minutes

--- type: transcript date: 2024-09-04 youtube_id: zGwwVX06s00 --- # Transcript: Cursor + V0 + Groq: Next.js Transcription App in 4 Minutes in this video I'm going to show you an example with VZ cursor as well as Gro to quickly build out a transcription application I'm first going to go over to VZ I'm going to say I want a UI component that accepts a audio file then once it's submitted to be transcribed the transcription will show on the right hand side with the ability to download we'll send that through and here we see it generating we have this really beautiful UI component that's really where v0 shines is it has this really great implementation of how to build out these react components with shad cnii what we're going to do here is we're going to copy this command from v0 and I'm going to bun X create next app we're going to create a brand new nextjs project and then what we're going to do here is I'm going to paste in the command that we got from v0 then we're going to install that component from v0 we see this audio transcription component what I'm going to do here is I'm just going to add in our audio transcription component that is a nice feature with cursor where you can see how quickly we had that auto completion here we see the audio transcription but I do see that it's interfering with a lot of the classes from the nextjs template there okay so there we go we have our starting point now what I'm going to do is I'm going to command shift I and open up our composer View now I'm going to say I want to leverage this logic to send audio files to grock to be processed now the other cool thing with cursor is you can add docs so I added a doc for whisper on cursor and you can just simply add new docs and then add in the link of the doc and it will index that for you so I'm going to pass in the context of the whisper documentation from grock and I'm going to say a couple other things I want to use Apper I want to use the open AI SDK and the Croc base URL and I want to console log everything now on the back end in case there are any errors and I can see what's happening Also let's create a EnV I'm going to submit that and then what it will do it's going to grab that information from the grock docs we see that it's creating the EnV for us where we're going to be able to plug in the base URL as well as the Croc API key we're going to see the edits to the audio transcription component then the cool thing with composer is it can create net new files for you the EnV in this case as well as the route and the particular directory that it's going to go within we just take a quick look at this we see it's using the open AI SDK it's using the base URL like we saw Within the EnV we see that it's console logging pretty much everything it's correctly using the whisper large endpoint which is a model that is available on grock I'm going to close out the composer view we see that we do have to install open AI so I'm just going to open up a new terminal here and I'm going to bun add open Ai and then the other thing that we're going to need is an API key you can get a free API key from groc right now at least at time of recording and then once you have that you can go on over to your EnV you can just plug in your API key now I'm just going to go over to 11 labs and then what I'm going to do is I'm just going to create a simple audio file so I'm going to say hello world this is developers digust we'll click generate speech we see that voice there we can download it and if we go over to our application here we'll choose that file from 11 Labs we'll click transcribe so there we go that's how simple it is to set up an audio transcription app by leveraging groc as well as V and cursor if you found this video useful please like comment share and subscribe otherwise until the next one