YT YouTube2Text

YouTube2Text → Transcripts → Build SaaS with AI | Part 3 | Create Simple UI and Text Repurposing Flow

Build SaaS with AI | Part 3 | Create Simple UI and Text Repurposing Flow — Transcript

by Sabrina Ramonov 🍄 · 5,607 words · 767 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00my name is Sabrina ramov and in this
0:01video we're going to start building our
0:03MVP for AI powered remixing of social
0:07media content and just to recap at a
0:10high level what we're building
0:11eventually the platform will be able to
0:13connect to social media sources and
0:15repurpose or remix the content using
0:17your personal brand personal knowledge
0:20base then publish to social media
0:22Platforms in an automated weekly Q in
0:24the first video in this series we
0:26significantly scoped down the spec to
0:28something that we can actually build for
0:30an MVP and by the way I think that can
0:32vary depending on your technical skill
0:34level and what resources you have access
0:36to so if you're super technical you can
0:39probably build out a lot more features
0:41than what we are going to build out in
0:43this spec V1 if you're not technical
0:45then that's when I really recommend
0:47trimming down the spec as much as
0:48possible rely heavily on your domain
0:50expertise and feedback from your
0:52potential users to figure out what is
0:54the tiny tiny core that you can build in
0:57a short period of time that would
0:58provide value if you're super technical
1:00and you're comfortable bringing in a lot
1:02more features in the MVP then go ahead
1:04and do that just make sure you don't
1:06take too long right the goal is to get
1:09this in the hands of actual users as
1:11quickly as possible in the previous
1:12video we talked about taking the spec
1:15kind of simplifying it with just the one
1:17screen we're going to build out first
1:18the create screen where you remix
1:20content from One Source One text source
1:23to another piece of text and this is the
1:26AI updated version of the spec remember
1:28we fed it through CLA to get feedback on
1:30how to update the spec and here I made
1:33some additional changes as well so
1:35everything in blue is what I've added
1:38and everything in red is what I'm going
1:40to remove when I feed it into cursor AI
1:43to start building out the code and let's
1:45walk through this real quick so in the
1:46past week I've already built multiple
1:48apps using cursor and CLA artifacts and
1:51I noticed that initially there were a
1:54couple things that it would always kind
1:55of trip up on and that are super easy to
1:58fix if you if you just tell it that and
2:00so for future MVPs and stuff like I
2:03always want to specify this we're going
2:05to use nextjs typescript T and CSS and
2:08app router like this is our text stack
2:09we want to make sure we're using App
2:11router when creating new screens uh do
2:14not use a source directory if you
2:15remember from the second video when we
2:18actually set up the repo there were all
2:20these options we just just selected the
2:22default options but we want to make sure
2:24the AI knows that so it has the context
2:27of like what framework we're using what
2:28tools we're using and it should follow
2:31that framework so that everything's
2:32consistent here I also add always show
2:35the proposed directory structure and new
2:37files that must be created this is
2:39really helpful because cursor AI will
2:41just be like create this new file it may
2:44not be super clear where you should
2:45create that file and so I like to be
2:47explicit like show me how the directory
2:50structure is updated as we creates or
2:53edits or delete files and then I even
2:56ask for each step to specify the file
2:57name and path and then here is another
2:59issue is that I noticed again I I've
3:01built multiple MVPs now with cursor and
3:03clot artifacts this past week often
3:05times it would forget to include this
3:07line use clients in a components that
3:10require client side state and so I'm
3:12just including it here just makes it
3:14easier when you spin up a project if it
3:15does that from the get-go so we don't
3:17have to go in there and fix it it's a
3:19super easy fix but it's just one of
3:21those things like why not just include
3:22it in the prompt and then these two
3:24things are more specific to Tailwind so
3:27when we build out just the UI section of
3:30the app I like to include this and just
3:32make sure this just tells the AI very
3:35specifically like our styling config is
3:37located in this file so it knows and
3:40just in general I want to use like a
3:42modern color palette I want to make sure
3:44text is readable I've had this issue for
3:46example forget if it was the vampire
3:48security checkpoint game or whatever but
3:50like sometimes the font would be white
3:52in a text input that is also white so
3:55you couldn't read the text unless you
3:56highlighted it so it's just it's just
3:58one of those things that comes up and we
4:00just want to make it clear from the
4:02beginning to follow this best practice
4:06and then I added this as well just to be
4:07a bit more explicit so the UI screen
4:10consists of the following sections it's
4:12going to be navigation and the create
4:15screen and then we just want to build
4:17the UI P portion first and then we're
4:19going to do the logic later and we're
4:21going to tell it to use the attached
4:22mockup as a guideline uh we kind of had
4:24that before I just rephrased it and then
4:26I also added to make it clear when the
4:28user opens the homepage the create
4:31screen is what they should be looking at
4:33I want to talk a little bit about this
4:34so typically if you're building out an
4:36MVP you typically want to think about
4:38the data model first so like how is your
4:40database going to be structured and then
4:42think about the UI screens and then last
4:45think about the logic and user
4:47interactions since for our V1 we won't
4:49have a database yet we're just going to
4:51build the UI portion first and then
4:54leave todos so this is like it's like a
4:57comment that reminds you to implement
4:59this stuff later after the UI we're
5:01going to build like the logic user
5:02interactions and workflows okay so I
5:04just removed this and just rewarded it
5:07here and then in the navigation I'm just
5:10going to remove these because we don't
5:12we're not implementing that in our V1
5:14anyway I left dashboard so that we have
5:16like one other link as an example in the
5:19sidebar and then I also removed inure
5:21responsive design again really not in
5:23scope for V1 from the crate screen I
5:25removed error handling and input
5:27validation again this is all great just
5:29just really not necessary for V1 so
5:32these two items are the UI screens that
5:34we're going to focus on building first
5:36so I'm going to feed this into cursor
5:38first and then after that we're going to
5:40feed the logic portions of the prompt so
5:43how we generate the content display the
5:45content and allow for editing and again
5:47these items in red I'm removing from the
5:50prompt from the spec remember that
5:52Claude suggested this improved version
5:56of the spec when we asked for it and so
5:58that's why these were included and kind
5:59of added to the spec and it's it's all
6:02definitely best practice that we should
6:04be thinking about but just not necessary
6:06for V1 right now okay and then same here
6:09I didn't even think about the character
6:10count for each platform again Claude is
6:13the one who suggested that which is
6:14great but just not in scope for V1 and
6:17we're not going to be connecting to
6:18social media accounts yet okay and then
6:20before we get started let's go set up
6:22our cursor so make sure you open cursor
6:26you should already have a project called
6:28remix if you do
6:30not so go to wherever you develop stuff
6:34and then run this command npx
6:37create-- apppp at latest and then this
6:40is the name of your app so it could be
6:42test whatever it is that you want to
6:44build and it's going to walk you through
6:46a set of questions and just hit enter
6:49for all of them you're just going to use
6:50the default selection for all of them
6:52once you've done that open the project
6:55you just created in our case it's called
6:56remix okay and then hit command L to
6:59open open the AI chat on this right hand
7:02side so the first thing we're going to
7:03do in cursor is set up some rules so go
7:06to cursor cursor here settings cursor
7:10settings over here and then here where
7:13it says rules for AI these are rules
7:15that gets shown to the AI on all chats
7:17and command K sessions so here are my
7:20rules and I just grabed these from the
7:23cursor Community Forum share your rules
7:25for AI and in this thread people share
7:29kind of like their best practices rules
7:31that they input for the AI and sometimes
7:33it's Project Specific tool specific this
7:37I think is generic enough to include for
7:39like any project so think step by step
7:42first brainstorm first describe your
7:43plan in detail you know prioritize
7:46fixing errors rather than apologizing if
7:48you can't Implement something make sure
7:50you add a to-do comment so we can find
7:53that later that it's a missing
7:54functionality return a completely eded
7:56file and finally review the code make
7:59sure it's complete and satisfies all
8:01requirements so input that here it
8:03should automatically save and then you
8:05can go ahead and close that and I'll
8:06have the copy paste version of this in
8:08the newsletter accompanying this video
8:11so just stay tuned for that okay so now
8:13let's go ahead and take our spec first
8:16let's remove the stuff in Red so we
8:18don't copy paste it copy paste it okay
8:22and we're just going to take this first
8:24section about around building the UI
8:26screens once we're done with that then
8:28we're going to build out the logic
8:30okay so here and ask anything copy paste
8:33everything there I'm just going to add
8:36bullet points here okay that looks good
8:39just double check everything and then
8:41you want to hit command enter to chat
8:43with the entire code base so the default
8:45here in cursor is it feeds in your
8:48current open file as context if you want
8:50to chat with the entire codebase though
8:52like feeding in the entire codebases
8:54context into the prompt then you do
8:56command enter and this works well when
8:58your Co codebase is still like pretty
9:00small again we're starting from scratch
9:02here as the codebase gets larger and
9:04larger and we're adding individual
9:05features we do want to limit the amount
9:08of context that we're sending because
9:09too much context can actually confuse
9:12the AI and here is cursor's response you
9:15can always check what context was fed in
9:17if you expand this over here and it's
9:20still generating the response I believe
9:22but we can start taking a look so here's
9:23the directory structure and then it's
9:26going to tell us like exactly what code
9:28to write in each file so let's go ahead
9:30and just make sure we replicate the same
9:32directory structure so we have another
9:34directory components with these files
9:36another directory create another
9:39directory dashboard and then we should
9:41already have page and layout okay so
9:44let's go ahead and replicate this
9:46structure So within app we're going to
9:49create a folder called components and
9:52then that folder has three files layout.
9:54TSX sidebar. TSX and top bar
10:00okay and then we are going to create
10:04another folder called
10:07create which has a file page.
10:10TSX and then we'll create another folder
10:14called dashboard and dashboard is just a
10:16placeholder for now I just wanted to
10:18have at least like one other Link in the
10:19sidebar Okay cool so let's just double
10:23check everything looks like the
10:25directory structure we got app
10:26components of these files creates
10:28creates and we already have page. CSX
10:31here and layout. CSX okay so now we're
10:34going to implement the components and
10:35Pages step by step so update app layout
10:39click apply here on the right hand side
10:41check you know check the changes so you
10:43can accept or reject individual changes
10:46this case we're going to click accept
10:48Okay then we're going to create the app
10:51components layout. TSX it's over here so
10:54navigate to that file first you can see
10:57here cursor didn't autol link to it
10:59because a file doesn't exist yet so
11:01we're going to click to open the file
11:03and then apply the changes to this file
11:06okay then click accept again make sure
11:07to save the file okay now we're going to
11:10go to sidebar so same thing and then
11:12apply the changes click accept hit save
11:16okay same thing now go to Top Bar apply
11:19the changes click accept hit save okay
11:22here this page already existed before so
11:25we're just going to navigate to it click
11:27accept okay
11:29and then this is a new page app slre
11:32page. TX TSX so go there click play okay
11:36and then app D this is a new page as
11:38well and again this is just a
11:40placeholder and it's nice that there's a
11:42to-do here Implement dashboard content
11:44because one of the things I like to do
11:45is throughout an entire project I can
11:47list out all the to-do items in the
11:50project so go ahead and let's read this
11:52and just in general I recommend being
11:54like a very active participant even
11:56though this is AI driven coding like I'm
11:59I'm holding its hand quite a bit and
12:01it's really important to like check that
12:04it's doing what we want and even if you
12:06don't have a technical background like
12:07you're brand new to all of this I still
12:09recommend reading this because it's
12:11summarizing like what's going on what
12:13it's trying to do so it included a
12:16persistent left sidebar top bar a create
12:18screen with multi-line text input for
12:20the original content then you select the
12:22platform and then a generate content
12:25button placeholder for the dashboard
12:27screen and then it confirms that where
12:29you using Tailwind CSS and a nice color
12:31palettes and then these are the next
12:33steps in the implementation so first
12:36let's how do I run first let's like test
12:41that everything works we should at least
12:42be able to see the UI so here I'm asking
12:45cursor how do I run the app and
12:47basically you open a terminal I really
12:49like warp dodev the AI power terminal
12:51but within cursor I usually use the
12:54built-in terminal so that I don't have
12:55to change screens everything's in one
12:57place so let's just follow follow the
12:59instructions npm install okay start the
13:02development server that's npm runev okay
13:05you can see it here and then you just
13:08click on the link so command click on
13:10Mac okay that's it that's our UI right
13:13so we've got the persistent sidebar
13:15switches to dashboard this changes the
13:17original content will go here and then
13:19we're going to select the platforms here
13:21so again this is just the UI we haven't
13:23implemented any logic or workflows yet
13:26now what we want to do is Implement like
13:28the next part
13:29and I'm going to copy this section
13:31because this is I want to make sure that
13:34cursor like always has the context of
13:36what stack we're using in my experience
13:38so far this past week it's just the
13:39results are much better if I just am
13:41very explicit this is the framework I'm
13:43using uh these are the options within
13:45that framework I'm using this is where
13:46like key things are located and so this
13:49is the part that I will use again in
13:52this prompt to create the logic you
13:54don't really need this stuff because
13:55this is more like the UI facing part
13:58what we want to do is actually take this
14:00stuff oh hang on let me remove the items
14:03in red first so again we're just
14:05reducing the scope even further which I
14:07know is painful but it's it's quite
14:10necessary again the more technical you
14:12are if you're comfortable with adding in
14:14Spec that's totally fine just don't let
14:17it be an excuse for not launching and
14:19getting this in the hands of users okay
14:21so here's the spec let's add some
14:23bullets okay and then let's be really
14:26clear like over here implement the
14:29following logic okay that's good to go
14:33and then we will chat with the entire
14:34code base again since multiple files
14:36here are going to have to be changed
14:38okay so here's the directory structure
14:40and you can see new files that we're
14:41going to have to create so let's go
14:42ahead and just start creating those now
14:45generator TSX okay generated contents.
14:51TSX prompts edit modal oops you can see
14:55here it clearly indicates like what's
14:57new in parentheses here so so we're
14:59going to have to create this new
15:00directory called API on this level and
15:03then we're going to create a new file
15:04called generate content. TS and then
15:08looks like another it's interesting that
15:11it decided to call this utils here is
15:14where our API call to open AI will be
15:17and then we already have these three
15:18files so we don't need to create them
15:20okay cool so now let's Implement
15:22everything step by step so just go here
15:25app components content generator this is
15:27again a brand new file so so it's not
15:29going to autol link to that file this is
15:31one of the things I wish a cursor would
15:33do just like automatically create a file
15:35if it doesn't exist there are other
15:37tools that can do that for example a.
15:39chat and you can even build like a
15:41little emac plugin so you can just have
15:43a separate buffer that's AER but we're
15:45just going to use this for now we're
15:47going to generated content component
15:50click apply now it's making the changes
15:53click accept boom now go to prompt edit
15:57modal Okay click accept make sure to hit
15:59save update the create page so app SLC
16:04create page click accept Okay open the
16:08open AI utility function so util openai
16:12this is what's going to make the API
16:14call to open Ai and you can see here
16:18like there's already some things we'll
16:20want to change we'll need to first of
16:21all set up our open AI API key here it's
16:24using GPT 3.5 turbo which in my opinion
16:27kind of sucks for writing we'll at least
16:29want to switch that to four and then the
16:32prompt itself is it's pretty weak but
16:34again it's fine we just want to get
16:35everything up and running and then we
16:37can update the prompt okay and then
16:39we're going to create the API route for
16:40Generate Das content so open the API
16:43folder here click accept Okay Okay and
16:47then here's a summary of what we've done
16:49try to read through it and like try to
16:52match where it is in the code base a lot
16:54of the variable names and stuff are
16:55pretty readable like generated content
16:58you know content platform you know so
17:01really just try to follow along as best
17:03as you can if you don't have a technical
17:04background if you do have a technical
17:06background then I do recommend like
17:08taking the time to kind of dig in
17:11understand how it structured things um
17:13because it's just going to help you get
17:15faster with it in the future okay so to
17:17complete the implementation you'll need
17:19to install the open AI package so let's
17:21go ahead and do that so I'm going to do
17:23contrl XC in the terminal to exit and
17:28then we're going to do npm install open
17:30AI okay and then we're going to set up
17:32the open AI key can you walk me through
17:36step number two setting up the
17:39open key and here I'm not going to chat
17:43with the entire code base because we
17:45don't need to we could even do no
17:47context but it's fine we'll just hit
17:49enter so that it has the current file as
17:51context okay so if you don't even have
17:54an open AI API key it'll walk you
17:56through it step by step you know you log
17:57in so you create an account log in
18:00navigate to API section create a new API
18:02key once logged in navigate create a new
18:05API key make sure to copy it immediately
18:07because you won't see it again and now
18:09we're going to set up environment
18:10variable so in the root of this project
18:13which is over here like where all these
18:15files are we're going to create a new
18:17file called n.l okay this file is used
18:21for local environment variables and is
18:23automatically ignored by git and then
18:26copy the open then we're going to add
18:28our open API key here like this and then
18:31obviously replace this with the API key
18:34now that you've done that Let's update.
18:36ignore so here's dog ignore and just
18:40make sure you are ignoring it when we
18:42set up the next JS project it already
18:45like created this file so we actually
18:46don't have to do anything which is great
18:48and then we're going to set up the
18:49environment variable in our code so go
18:50to this file and then apply and then
18:53accept Okay Okay and then verify the
18:56setup doesn't tell us we need to do
18:58anything here when it's talking about
19:00here client side usage but we're not
19:02we're going to be calling it from the
19:03server side which is best practice okay
19:05so verify the setup so here we're going
19:07to do in the terminal down here npm
19:09runev okay and then let's just read this
19:12real quick try generating content using
19:14your application if it works without any
19:16authentication errors your API key is
19:18correctly set up okay so let's go let's
19:21open it up first okay cool and then I'm
19:24going to take something from my blog
19:27let's see this one two minute hack to
19:28high quality prompts okay so now we're
19:31going to enter the content here so
19:33here's the here's the stuff that I'm
19:35going to repurpose I'm going to select a
19:37platform like Facebook and also let's
19:39open the console to see if there's any
19:41errors so here it's like right click
19:44then click inspect I like to put mine at
19:46the bottom over here okay cool and then
19:49hit console again and here if there are
19:52errors on the client side you'll see
19:53like red stuff pop up here and my
19:55typical workflow will be like oh there's
19:57an error copy and paste it into cursor
20:01and then ask cursor how to fix the eror
20:03okay so but now let's click generate
20:04content these do look like two separate
20:07errors like one looks like an API route
20:09is not found and then the other one
20:11looks like a parsing issue so let's just
20:14do one at a time I'm going to open up a
20:16new file I'm going to say I see this
20:19error in console log and try to like
20:22read the error especially if you have a
20:25technical background even if you haven't
20:27coded in a while even if you don't code
20:29full-time like I haven't coded regularly
20:33in the past decade but I don't mind like
20:35reading this stuff like this is a post
20:37request to this route and it says it's
20:40not found and like the quickest thing
20:43you could do is just like check if it is
20:45there so like if we go to API folder
20:48there is something called generate Das
20:50content um and that's additional context
20:53that is helpful to feed in so I could
20:55say I see this error in console log even
20:58though
20:59the
21:00file API generate content TS exists in
21:05my project and let's chat with the
21:08entire codebase so it knows to look for
21:09that file okay it seems that the API
21:12route for generating content is not
21:13being recognized let's troubleshoot this
21:16step by step ensure that generate
21:17content. TS file is located in the
21:20correct directory so it actually wants
21:22us to rename this file to Route okay
21:26name slash okay so let's create another
21:29folder here make sure everything matches
21:32TS okay then we're going to move this
21:34into that directory click move always
21:37update the Imports then we're going to
21:39rename this to Route that'ss okay let
21:44click save and then it also says update
21:46the contents of the file so let's go
21:48ahead and okay update the import
21:51statement in content generator okay make
21:54sure that open AI is over here util
21:57which it is very ver ify that we have n
22:00local which we do and then stop the
22:02current server if running and then run
22:04again okay so let's try it again click
22:06this okay I'm going to close the
22:08previous one okay here let's open
22:11console log again and click generate
22:14content okay new error generated content
22:17is not
22:19defined okay so let's say unhand this is
22:23an import error and I do tend to run
22:25into these errors with cursor especially
22:27when starting up a project check I see
22:29this error in console log okay the issue
22:33is a lack of import so let's look at the
22:36relevant part of content generator. TSX
22:39it has used clients however it's not
22:42importing generated content which is
22:44also why the file is red I should have
22:46pointed that out before so click apply
22:49typically when you see like file names
22:51that are red and stuff that means there
22:52is an error in there I just didn't even
22:54notice okay so this changes the import
22:57let's try TR out reloaded let me copy
22:59this again check select Facebook okay
23:02great and so here's the generated
23:04content okay great so everything works
23:07as desired we took a a newsletter post
23:10clicked generate and then it repurposed
23:12it with a prompt now obviously this is
23:14kind of cheesy I don't like that so
23:17let's go to the prompt library and just
23:20like select something else yeah this
23:22this what I use a lot like write a
23:24LinkedIn post with bullet point so what
23:25we're going to do here is just click
23:27copy raw file okay so everything's
23:29copied then go back to cursor and then
23:32we really just want to change the prompt
23:34over here so we're going to click edits
23:37update the prompt to the following and
23:41don't leave anything out let's just use
23:45triple to demarcate okay let's double
23:48check yeah so here it has all the
23:50examples and stuff submit edit here
23:52those are the examples and stuff so
23:54obviously there like I could have just
23:57copy and pasted instead of doing this
23:58but I just wanted to Showcase this is
24:00what it looks like to change only one
24:03section of the code because often times
24:05you don't want to feed in the entire
24:06codebase or even the entire file you
24:08want to change just one function for
24:10example or just one variable or
24:12something and so that's how you do that
24:13you kind of just highlight it and then
24:15press command K and it'll open up Cloud
24:183.5 sonit where you provide instructions
24:21in natural language just describe what
24:23it is that you are trying to do okay all
24:25right now it's done let's click accept
24:28check everything there make sure there's
24:30no errors and I also want to change this
24:32to GPT 40 usually find that works a lot
24:36better for writing compared to 3.5 so
24:39let's go ahead and
24:41refresh copy that original content okay
24:45okay and we got an error so let's open
24:47up console log you see internal server
24:50error let's see if there's anything in
24:51the terminal that could be helpful so
24:54just
24:54scrolling so here is the error and then
24:57scrolling up here seems to be a lot more
24:59information like error generating
25:00content s unexpected token and is not
25:03valid Json okay so what that means is
25:06our code base is expecting valid Jason
25:08from chat GPT but the response was not
25:11valid Jason which actually makes sense
25:13because in this prompt it doesn't ask
25:15for valid Jason so let's select this
25:18prompt again so one approach here is to
25:20just copy paste this error and then ask
25:23ask cursor here I get this error after I
25:29clicked the generate content button so
25:33that's one approach if you have kind of
25:34a technical background you kind of know
25:36what the error is again you could just
25:38feed it just this file or just this
25:40prompt and ask it to update the prompt
25:42asking for a valid Jason's output so
25:45cursor basically explains the error
25:47occurs because the response is not in
25:49the expected Json format let's modify
25:51the function to handle the response is
25:53plain text instead of Json so yeah
25:55that's also definitely a valid thing you
25:57can do I'll hit apply okay okay it
26:01really just remove the Json Parts since
26:03the response is not in Json and by the
26:06way if you don't want to do that like
26:07you want to keep the Json like you can
26:09reply to this by clicking here and being
26:12like no we want to keep the Json like
26:13I'll out update the prompt so that it
26:16outputs a valid Json and so again the
26:19more technical you are like the easier
26:21this will be to kind of like interact
26:23back and forth um and I definitely
26:25recommend thinking through what the
26:27problem could be and then comparing what
26:30your suspicion is with what cursor AI
26:33suggests and that way you can learn
26:35maybe you maybe you're wrong and cursor
26:37is right maybe you're right and cursor
26:39is missing something and that's an
26:41opportunity for you to provide
26:42additional context or update the prompt
26:46okay so here are the key changes now
26:48let's update the post function okay
26:50apply let's click accepts okay and then
26:52these changes should fix the parsing
26:54error okay so let me copy paste this
26:57refresh this refresh this original
27:01content click generates okay cool and
27:05then here is the generate content I
27:06don't see any errors let's expand this
27:08so we can actually read it and now this
27:10looks much better this looks much closer
27:12to the style I like right I like it with
27:14a nice hook questions in the hook and
27:16then bullet points super easy to read
27:18like this and so all we did really is
27:20update the prompt which kind of is the
27:22fun part right like once I have one
27:25place where I can do everything like
27:27most of my time will be spent on
27:29updating prompts updating my rag like my
27:32personal knowledge base and and brand
27:34identity and all that stuff yeah this is
27:36pretty much our V1 so if we go back to
27:38the spec like what did we do so we are
27:41repurposing from one platform to another
27:43we have kind of the basic UI we're
27:45calling the open AI chat GPT API for the
27:48repurposing we display the final
27:50repurposed content so the one thing
27:52we're missing is this edit prompt
27:54functionality to change the prompt which
27:56I'm going to move to V2 so the next set
27:58of features we're going to add will be
28:00the ability to edit each prompt for each
28:03social media platform and then
28:05regenerate the output if you edit the
28:07prompts and this is really useful
28:09because like I don't use the same
28:10prompts for each platform like on
28:12LinkedIn I have a different writing
28:14style and something on Twitter versus a
28:16script for Tik Tok like each one is
28:18going to use a very very different
28:19prompt and I I personally want a just
28:22one place where I can experiments with
28:25each of those prompts easily regenerate
28:28the one that I'm working on and then see
28:31everything kind of in one place like the
28:33prompt and output for LinkedIn versus
28:35Facebook versus Tik Tok versus Twitter
28:37so that'll be V2 the next set of
28:40features we add so yeah hope this was a
28:42helpful walkthrough of building the
28:44version one of our larger Vision an AI
28:47powered remixing repurposing content
28:49platform and just to walk through recap
28:52what we've built out we used cursor AI
28:54to build out the simple UI with a left
28:57side barar top bar the main content
28:59creation interface the create screen
29:02where you can input text content and
29:04then when you hit the button it calls
29:06open AI chat GPT to repurpose that
29:08content in a different format and you
29:10can edit the content in line so if you
29:12want to make a couple tweaks before you
29:14publish it on your social media platform
29:16you can easily do that and in the next
29:18video We'll add different prompts for
29:20each social media platform and being
29:22able to easily edit the prompt and
29:24regenerate the output all in one place
29:26my name is Sabrina ranov hope you are
29:27enjoying this video series building sass
29:30with AI if you like this kind of stuff
29:32hit like hit subscribe drop a comment
29:34below look forward to hearing from you

About this transcript

This page contains the full transcript of Build SaaS with AI | Part 3 | Create Simple UI and Text Repurposing Flow by Sabrina Ramonov 🍄, generated from the public captions YouTube serves with the video. The transcript has 5,607 words across 767 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.