NEW: Cusor AI Chrome Extension YouTube Summarizer App🤖 OpenAI o1 + Claude Sonnet 3.5 (Python API)

What's going on everybody Josh pook here and in today's video we are going to be looking at building out a full-blown Chrome extension using cursor the AI we're going to show you how you can do this from start to finish even if you've never coded a single line of code in your entire life is going to be beginner friendly intermediate friendly and advanced so you're going to get value from this video either way let's dive right into it [Music] okay guys

Just a quick note this is Josh from the Future Okay uh it's currently 2:30 a 2:50 a.m. so I've been recording this video for like 4 hours and um I'm just going to let you know even with editing it's probably going to be a bit of a longer video and there were a lot of mistakes I made at the start and I'm going to leave a lot of these in not all of it I'm going to try to make sure you

Know it's not too too long for you guys but there were a lot of mistakes and learning lessons that I went through with this project and I'm going to leave some them in just so you guys don't make those same mistakes now with that being said there are time stamps here down below so you can see um you know where we are and if you need to skip ahead or if you need to watch on two times or 1.5 times speed

Then go ahead and do so but uh other than that I think that you are going to hopefully get some value from this and I'm excited for you guys to watch and let me know in the comments down below let's go on with the video all right guys so if you're not familiar with cursor go check out some of my other videos I would also recommend checking out this video I did a few days ago the free complete cursor AI in-depth

Guide this is not a basic guide I uh give away certain resources here templates and talk about certain things that I personally haven't seen anyone else talk about when it comes to cursor so it's an in-depth video it's actually about 20 minutes long and then a few Clips at the end so definitely check this out I'll leave a link down below to that that will get you up to speed with all the cursor tips and tricks and tactics on setting that

Up now let's get right into it uh I'm not going to waste any time here so you want to build a Chrome extension there's really I guess a few different ways you can start off with this you could either start off with Claude or incursor now typically when I'm coding in cursor um it's a lot easier I find with cursor if you give it a already um some sort of code already right it's not when it's not building the code right

From scratch for example if I'm coding with nextjs um you know once I already have stuff from v0 if you're not familiar with vz. DAV it's really good for building out UI components the user Shad Cen and whatnot so so yeah it's really good at optimizing already made code and like improving upon it but I find that in terms of like going from scratch it's it's it's okay you can make it work but it's not as good so there's really two

Ways that I would suggest if you're really actually building a chrome exension to start off one is already get some sort of existing code somewhere um so one one you can like say if you like a really good UI you can always screenshot that UI go over to Claude upload that image and then say hey build me a UI that looks like this or build me a Chrome extension interface that looks like this or you know optimize my Chrome extension to

Fit this styling or UI right so that's just one tip and trick I'll give you and we may even do that in this video um we'll see you know I don't have this plan I'm going to show you raw footage of me building this Chrome extension so there may be issues there may be uh you know setbacks whatever we're going to work through it together here and then also to the second way is you can already get existing code or get

Inspiration from existing codes so one example way to do this all right and obviously make sure that if you are doing it this way you know you have the you know it's it's okay whether whatever licensing the code is on on GitHub if it's like a lot you can either uh I would I would say take inspiration from it I wouldn't say just copy it straight for you know word for word but um if you search site github.com and then whatever

Type of project you're building for example in today's video we're going to build a YouTube summary Chrome extension you can see here there's a bunch of different ones that are the exact same thing that I'm trying to build now keep in mind that different for example you know for this Chrome extension um it's going to most likely need to you know interact with the YouTube uh you know interface and a few different components within YouTube so different sites can always change

Their code around their elements and this and that so if you're you know doing stuff with a repo that maybe a bit older then you may run into some issues if you're referencing certain things in within how that Chrome extension is built all right so I'm just letting you know so it's uh you may have to update it or just build it from scratch okay so anyways let's dive into it um here we got a YouTube summary with chat GPT so

Um this one looks pretty basic npm install Okay so this is pretty much probably like similar to what we want okay so this one is MIT license so permission is here by granted free of charge for any person uh obtaining a copy of the software Associated files to deal blah blah blah blah blah okay so just from looking at this code here this is actually probably like I actually did not expect to um find something I mean I haven't I haven't

Ran this yet to test it out but this looks pretty good um it's has a lot of different features well not a crazy amount but it does have some pretty good features here so we may actually reference this when we're building it out um okay so I think that this actually so I get cloned this repo here and I'm going to actually I was planning on just asking Claude or cursor to start like build this from scratch but I actually want

To kind of ask it how this actually works to kind of describe this whole code base just so I get a sense of everything we're going to need for our build all right so to start off I'm just asking cursor at codebase I'm trying to build a similar version of this open source software but better please break down every area of how it works and how it is structured in depth through each and every phase I'm going to say step by

Step okay just very descriptive trying to get the best output and we're going to use clad Sonet 3.5 actually this question would probably be good for 01 I'm going to try it I'm going to use it with 01 so we'll utilize both clad Sonet 3.5 and open ai's new 01 model all right so we're going to use 01 preview here and submit this may take a while okay that's kind of annoying it took like maybe 30 seconds and then just said

This right here so I'm going to say at codebase again look at the entire codebase here okay I actually had to resync the codebase here so it's actually just doing that right now so it's indexing and it's breaking it down so it's called YouTube summary chat GPT so project structure project users webpack for bundling written injs uses manifest V3 for Chrome extensions background script handles extension installation manages communication between content scripts and popup content scripts main entry point for Content Scripts

Handles YouTube specific functionality manages transcript retrieval and processing I don't know if you would consider this kind of cheating but uh it's kind of it's definitely a lot easier if you can find something that is like what you want to build or similar and then you can take inspiration of things that you like always make sure you're doing it ethically of course and you know you have the right licensing or whatever with open source all that good stuff but uh we're

Not going to copy this but I am going to ask cursor here to develop a very in-depth prompt okay so I just realized I actually used Claude Sonet there so now I use uh 01 preview for that same question and definitely looks like we got a bit more indepth of a response in terms of the functionality of this app and how it actually works so it's actually pretty I mean I want to say intricate but there is a lot of steps

And features within it in terms of just fetching the XML transcript and then um then parsing it then displaying the transcript then generating and copying The Prompt and then opening chat okay so this opens chat GPT in a new tab with a reference parameter okay so this is actually probably not how I want to do this so this is good at least we can make this Chrome extension better cuz I was wondering if it was just like I was trying to

Find where the API key is for chat GPT and or if it was using like I was trying to see if it was using like an expressjs server or whatever to send API requests I think that's what we're going to do um because this one looks like it just opens chat GPT and copies and paste that paste that over which is pretty basic so we can take some of the functionality and the inline I think a lot of the stuff in

Terms of getting that transcript we can kind of replicate and then we can in terms of actually the um how we're going to get the summary I think it's going to be a lot better if we can set up like an Express server or something and then um basically get that all within the Chrome extension okay so I'm asking okay so they don't have something like Express server or anything where it sends an opening ey API key request or API request

To get summary just open strp and paste it in is that correct I want to make a Chrome extension similar to this tool in terms of getting the YouTube transcript it will be fairly similar but want to have the extension generate the summary through the open AI API what do you think the best way to do this is set up a server or have an input box where the user can input their API key let me know your opinion and why

Okay and we're still using open AI uh 01 preview for all this okay so pretty interesting cuz I asked uh Claude this kind of question a bit earlier before recording this video cuz I kind of knew what type of tool I wanted and it suggested to create an xjs or Express server did I say nexts here whatever um so yeah no I said Express so either way um yeah now that I'm looking at open AI or 0 one's response here um

Yeah we're going we're going to just have the do the second option so basically to set up a server I I wasn't even thinking about this um it will just be a little bit more maintenance I'll have to get the server up and running or I guess I could do it locally um but yeah I just think it's going to add a little bit more complexity right now and either way I think it's just a little easier and more scalable and

Just to get this going just to have the user input their openai API token into the extension so that's what we're going to do all right so I'm going to do one more 01 preview prompt and then we're going to get into building this um so the prompt is develop a very in-depth prompt I can use to get AI to build a Chrome extension like this but with the feature of inputting the user open AI API key and sending the transcript

To open AI for summary now as I send this guys um we may even do a bit more features or if you know this video gets too long maybe I'll do a second video where we can improve upon this cuz I have some other ideas how we could actually make this even better but uh we'll do this to start off also too guys if you don't have like an extension to mimic or whatever project you're doing to mimic first of all

Usually there is some sort of project even if you don't have the code open source like this where you can at least get some ideas kind of see the functionality like really all this is giving me is like if I want to inut uh like it will it will save me time in terms of getting the transcript part because you know I would just have to probably go do that figure that out myself even though I do have an idea of

How to do like I pretty much know how to do it it would just be a little bit probably a little bit more tedious I'm assuming but so um yeah you don't need this but this is going to shortcut the process of course so 01 gave me a very in-depth prompt here okay so I'm actually just going to pretty much paste this into cursor and see what we get right now okay so again gave me pretty indepth uh instructions here I

Don't think we need all of this I'm actually just going to copy this part right here project overview and I'm going to create this stride tube folder right here and let's go ahead and basically open up a new composer go to a new project we'll call this stride tube boom and I'm going to give it this project overview here so like I said guys if you haven't check like if you don't know kind of the workflow the best workflow for using

Cursor check out that video in the description down below I think it's one of my best videos or most valuable video it's definitely my best video on cursor um so far so definitely check that one out okay so I'm just going to keep it right now for what it actually just 01 gave me we man need to change this once we start building but let's go ahead and get a new composer right now okay so I'm going to use this basic

Prompt to get a start started with something here and then we'll be able to look at it and then of course iterate upon it and improve so put all files in stri tube folder I need to build this Chrome extension that pulls the YouTube transcripts and sends them to open AI based on user API key input and then Returns the summary of the YouTube video read the project overview details in depth and build this for me end to end in depth

Without missing anything make sure the UI is very professional and modern so anybody that looks at it would be extremely impressed and we're going to use 01 preview to start this off off and then I think I'm going to switch to uh Claud Sonet okay and boom we got a pretty good project structure here so we are building stride tube and going to follow our instructions and here's the project structure so we got stride tube Source directory background index.ts index.ts for

Content script popup TSX um index.html UT Tails API storage trans script package.json TS manifest.json okay so it's building out these files and all right so type safety all Cod is written in typescript cool professional UI API key storage through Chrome storage local transcript fetching so using YouTube's caption API areas are handled gracefully let's see I'm curious to see if this works at a box or not so make sure to install dependencies and build the project okay so one thing it did

Not do is okay let's do this mpm install okay so we got an error I'm going to paste this in okay I'm switching off from 01 preview because we no longer need 01 preview to do all this going to use quad son it and it's going to be a lot faster okay so let's see if it's good now boom okay we're good to go it fixed the formatting there so it's installing the dependencies here okay cool so that should fix some

Of these errors here okay I reopened the project with the like in that sub folder specifically just so I didn't make any changes or it was like creating folders in different places I didn't want it great it looks like I lost the project overview here which is kind of annoying never mind I got it back here so I'm going to copy this and paste it here so that's one thing about cursor that I like it keeps your projects um specific for

Your actual project so whatever folder you're opening and will have those projects and composers within that cach and save there which is pretty cool okay so we got our project here okay so I'm getting a few errors here I'm just going to paste this into composer by going to problems right clicking and then pasting this in it's just this type scrap uh types script syntax um so it's updating the TS config cool we're just going to sure you have the necessary

Dependencies so I may need to do this okay so we got most of that now we're getting this error going to paste this change this to Chrome all right so we fixed some of these typescript errors I always find that the AI models tend to always screw up when it comes to being type safety um but uh one thing that you'll you can do is just keep feeding the problems back into it sometimes if it starts hallucinating you may want to

Start a new composer what I did was I even removed our project context from the chat just so it was a blank slate and only gave it the specific problems to fix so that's a few different troubleshooting techniques that I find because it's not perfect at the end of the day sometimes it will start hallucinating over the stupidest little things that you would think it should be able to do easy um so yeah those are a few tips now let's go

Ahead and move on okay so now we're going to do the first test of this Chrome extension now I don't expect it to work right out of the box but let's go ahead and build this up and we get a bunch of Errors so let's go ahead and not read this I'm just going to give it to cursor and cursor can fix it for me okay so updated this install necessary loaders so we're going to go ahead and install this okay

Now we're going to try this again okay it failed again now we're going to give this to cursor okay so we managed to fix all those little errors and let's try this again let's go ahead and do EMP build empm build and one thing to not make sure you save your responses from cursor where you go ahead and try to run the terminal commands such as build so looks like things went well perfect cool okay so now let's go ahead and

Test this bad boy out okay so we're going to open up stride tube here all right so I'm going to load unpacked right here and we're going to select our good old stride tube okay so it's basically needs that icon yeah I'm actually just going to remove the icon cuz we don't need that right now all right now let's try this again was missing a comma in the manifest.json so we're going to fix that and build this again go ahead and

Retry this okay boom so we got it up finally looks like we're getting some errors still so this right here doesn't exist perent exist then reload the extension and basically the last main fix we had to do is I just kept feeding these errors back into cursor and it basically just said that we need to add a uh build script right here in the package.json that will compile the typescript files to JS um so we did that now let's go ahead

And test this out going to upload this again okay we're getting an error again okay guys I'm just simplifying things a lot right now just because just to give you some context I don't know how much I'm going to edit out but everything I was just doing I basically just scra because it was way too complex uh just for the sake of this video it's been about 2 hours already so I'm just doing it completely from scratch and we're just going

To walk through the basics of this so we're just going to keep it very simple I can make it look better in a second but let's go ahead and make this function first okay so it didn't have the button to get the transcript so I just told it that and now it's updating it let's accept all right so I'm saying make the UI look way nicer it should look it should be dark mode uh with white text and the API should

Show uh the API key should show black dots like a password when the user enters it okay so this looks a lot nicer already go ahead and paste our API key here now it's actually um you know like I said like a password if we click summarize it's not okay so I did have the connection before so it looks like it messed up so I'm just going to tell it that copy this okay so this actually okay well first off okay

Let me cancel this because I just realized I selected a 2hour and 30 minute video and I do not want a $50 API call right there so let's go ahead and try something a bit shorter maybe like five minutes all right how about we go to my favorite podcast I played so many clips from this but uh all right let's go chamath yeah this is a good one so first off I don't know what I cuz this button wasn't showing up

Here before but now it looks like I got it to work so let's go summarize video okay so in extension context invalidated okay so that's actually good that we got that cuz now we can troubleshoot that I want to see if it's even working right now okay so I let it know okay now it just says summarizing I don't think it's actually summarizing well I don't know if it is or not also when I click the button in the YouTube area

It says error extension contexts invalidated oh my gosh finally okay guys all right so just a quick update I have been working on this kind of embarrassingly for 3 to 4 hours maybe even a little bit longer um and yeah so the reason being is and I'm going to keep some of these big fails in this video just because I got I want you guys to learn um I don't want to just remove it and show you guys the finished product

But I finally got it working and we I'll do a few more uh iterations right now just so we can make it look better but I'm going to tell you exactly what I learned okay so I haven't made like a CRA crap ton of uh Chrome extensions before like I made a few but um so you know there's that you know I it's not that difficult but when you're not doing it you know on a consistent basis it's just you know

A little bit different so also too yeah just cuz I haven't been doing that I didn't fully kind of know exact how I planned on building the project and I didn't do enough research beforehand I honestly just was thinking okay you know cuz lots of the times when I use cursor it's thing with you know projects that I have a little bit more understanding around or do on a a little bit more you know consistent basis you know with certain text

STS and whatnot so with this I just thought all right I'm just going to let cursor do its thing do it this way do it this way try to build it out so what I learned uh and this is something that you know you know already I've known already but this really just proved to me and really drilled that principle home when it comes to AI coding is you really need to Define what the heck you want before you really build

It you really want need to know how you want it to work all right how does this thing going to work cuz uh you know I'll probably have Clips in for the different fails that we went through first I tried doing it you know I don't even you'll see them you'll see them but uh basically the way I ended up doing it just to break it down for you guys is this is literally all it took okay so basically I actually

Started one you know I'll tell you what I did behind the scenes I started because I kept running into issues running into issues I thought okay how can I make this work so I started you know doing some research talking to chat GPT literally like going on my phone and being like okay this is how I want to do it what's the different options Etc just so I get like you know you can obviously type to it but um just trying

To actually figure things out beforehand get a really good idea of how I want to build this thing and then once I kind of figured out okay this is how I'm going to do it then I crafted a very indepth prompt okay I didn't just say hey I want a Chrome extension that can summarize and this and that because there's so many different ways it could go about it right it could then it start hallucinating and start whatever I told it

Exactly what I needed and this is what the prompt is so I want to create a Chrome extension that uses open AI API to summarize YouTube video transcripts I need you to generate me a folder for the Chrome extension and a python file for my external API server the Chrome extension will make API calls to the flask server that I will host locally the python file should use YouTube transcript API for the transcript and then use open AI for summary there

Should be a button inside the YouTube window that says summarize as well as one within the actual Chrome extension when they are clicked they should send the API request to the flask server to get the transcript the Chrome extension should have a nice modern UI that is in dark mode with white text it should have one tab that shows the transcript and one tab that shows the summary returned from the API at the top of the Chrome extension it should say

Stride tube in Gold letters the user should be able to input their open AI AP I key that will be sent to the flask server for uh for the openai API call to summarize when the API key is entered it should show black dots in the Chrome extension like a password create all the files and code for this project entirely and give me the exact instructions on how to run it the Chrome extension should be in a subfolder called stride tube

And the python file should be outside the folder okay you see how descriptive I am and I'm literally telling it exactly what to do and then boom it's going to define the produ project structure here and actually build everything out going to tell me hey this is what you're going to need to do pip install flask flas cores YouTube transcript API open API uh open Ai and then python app.py to run the flask server and then I encountered one issue here

And it basic basically just I've just fed it into the um composer and it fixed this issue and then I was getting another issue which basically it add actually it was the same issue I believe it just added some more in-depth Lo uh logging um fun um capabilities here so once it did that we got the log that basically said that we were using the old um open AI uh chat completion right so this is the issue I've mentioned many times

With llms they're reading off of they've been trained on Old documentation or old API docs whatever so anytime you can give it new updated ones it's always best but anyways we got that and and we updated it right here so once it did that it updated the API call and then it's good so let's go ahead and test this bad boy so here's a YouTube video this is uh David saxs how did the PayPal Mafia come together all right I'm just

Going to reload it and if you don't know how to set up a Chrome extension by the way you just go to extensions right here in your um Chrome or wherever and you just click on load unpacked uh you're going to need to turn developer mode on up here and then load unpacked and then select that folder of the Chrome extension okay once you do that uh we're in our YouTube video right here and I'm clicking on extensions all right here

We have stride tube and you can see I have the summary button summarize button here too and you'll see we have stride tube right here doesn't look too pretty I can make it look a little bit nicer I'll maybe do that in just a second and we have a tab for transcript and a tab for summarize now if I go ahead and click summarize first things first if I go open up our uh this is our comp uh cursor right here

You can see this is our flask server running so we can see those API requests to get the transcript and summarize it uh okay so that's one annoying thing if I click away it closes let's see if I still have it okay so let me do that again and boom here we got the transcript as you can see for this 7 or six minute video all right boom boom boom boom boom and then summary the video transcript discusses the success and

Impact of the early team at PayPal known as the PayPal Mafia who went on to create multiple successful companies the success of the team was attributed to three main factors the caliber of people they hired through friendship networks the timing of leaving PayPal after the eBay acquisition and the knowledge and experience gained at PayPal including strategies for product management and viral marketing the PayPal mafia members leverage their learnings and entrepreneurial Spirit to start their own Venture post so anyways you get

The point when what I learned from this is like this is actually I mean it's such a kind of simple solution I I don't know why it took me so long to actually think about this um or actually come to this conclusion um but yeah you you'll see in this at the start you know I will leave some of the fails in this video just so you get a full uncut raw uh vision of you know this actual process um but

You know I tried many different ways and lots of the times too I was kind of just letting cursor take control and then it would start hallucinating and it would you know piss me off and then I would have to go through this Loop and this Loop and try to fix it and then try to see what code it actually wrote Because it already wrote so much bad code so once you actually really get clear and concise with what you want

In your project and then you feed it that Master prompt and I've talked about this guys if you check out my video down below that cursor video I talk about creating a PRD a product requirements document and I give you a free template literally a free template showing like that you can use to create your project for a product uh product requirement Doc and I go through all the pillars of that that you're going to really need to Def be able

To Define your project so I would definitely definitely recommend checking out that video um and there's a full uh document and sop for that so it's a 16 page doc you can download it use it reference it Etc but this is where especially right now you know obviously AI is going to get better and better and you maybe have to do a little bit less it's going to get smarter but as of now you really need to Define what you want

In your project okay and you should kind of have a little bit of technical understanding of how things work at least right but uh yeah so do your research really um you know do your R&D before you really go in and start building these things that's what you know I would recommend that's what I didn't do today this why this video took me four or five hours to actually finish so it took me about 4 hours and then I took a

Bit of hour break okay so um yeah this is going to be a fun one to edit okay so now that we got this I mean I could go ahead and just make it look a little bit nicer maybe I'll do that I mean it's pretty simple to do that you just tell it hey make it nicer I mean the main thing is the functionality so you can make don't spend time just making it look nice right off the bat like

Anyone could go take a screenshot of like a Shaden component or something like this and say Hey give it this UI design whatever the main thing is the functionality so really getting an idea of how the functionality is going to work within your project within your app whether that's by talking to GPT looking at different other competitors um doing your research or looking on YouTube videos or blog posts whatever figure out how this thing is going to work and the best

Way that will optimally work for how you want it to right and for your users I could go ahead and build upon this right I could like now basically have different functions instead of just having like summarized I could like say hey pull out I could do different things and then I could I could like have different options within this like I could have uh you know something to pull out viral you know short form content ideas like and I could

Create my own different prompts and then send like I could have toggle dropdowns that would basically take this transcript and depending on what my user toggles are basically generate me instead of just a summary like I have a summary and then if I I uh click this drop down then it's going to gener me 10 viral short form content ideas or if I do like whatever the case is right the possibilities are really endless but the whole concept is I really

Just set up a flask server and then I have that connected and then I'm using different Python's a lot easier to do this type of stuff the main thing I was running into issue was was like trying to get the YouTube transcript many different methods without using python so this just makes it a lot easier but yeah so I'm not going to spend too much time uh spicing this up this video I'm guessing is going to be really long already even

With editing so other than that guys hope you got some value from this video um hope it's not too long but if for those of you who stuck to the end actually saw this out uh congrats to you guys I really hope you guys got some value cuz I really put a lot of time and a lot of Red Bulls into finishing this so uh other than that guys um if you're new to the channel we upload videos every single day

On AI automation business growth thank you guys so much for the recent 6,000 sub subscribers I think we're at like 6,300 or 400 already and it's only been a few days couple days actually so road to 7K very soon hopefully within this next week and then road to 10K so I'm going to really try to keep pumping up the quality content for you guys if you guys want me to make videos more like this on specific things maybe other Chrome extensors

Or if you guys actually want me to like continue optimizing this stride tube like if you think that this is a good idea and you want me to actually like build it out even lot more like kind of what I would just saying like add those little intricate things whatever so you guys can see how I would actually go about a longer term project cuz so many people just make YouTube videos and like do a little short little thing and then

Maybe do a next little short little thing but you don't get to see the full lifespan of the project so if you want me to do a different thing let me know or if you want me to do continue on this let me know down below and let me know if you have any questions let me know if you guys have been using cursor for Chrome extensions or something similar or something different or maybe um what did you guys like if

You guys saw me doing something wrong which kind of I mean obviously I was doing a lot wrong at the start which we talked about here then let me know I mean uh or if you have any other suggestions of what I came to the conclusion on let me know let the people know so we can all grow together and uh other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course accelerate your stride

Take care