00:00:00
all right so today in this video I'm
00:00:01
going to introduce a cool new AI coding
00:00:04
platform called tempol laabs Ai and for
00:00:06
the past one week I've been playing
00:00:07
around with the platform and to be
00:00:09
honest I'm truly impressed by what it
00:00:11
can offer especially the UI the kind of
00:00:13
UI this platform is able to design for
00:00:15
my apps that I built using AI now today
00:00:17
in this video I'm going to give you a
00:00:19
complete walkthrough of the platform and
00:00:20
we'll also go ahead and build a app from
00:00:22
scratch using tempol laabs Ai and also
00:00:25
explore all the cool features it has to
00:00:26
offer and if that sounds interesting
00:00:28
without a sing further Ado let's jump
00:00:29
straight in all right so this right here
00:00:31
is tempol laabs AI and the first thing
00:00:33
that you got to do is to head over to
00:00:34
the first link in the description below
00:00:36
or head over to tempol laps. a and
00:00:38
you'll be able to access this website
00:00:39
and again one cool thing that I found in
00:00:41
the homepage is that you can actually
00:00:42
click and drag and drop this heading and
00:00:44
tagline around the screen oh even this
00:00:46
one really cool nice touch and again if
00:00:49
you scroll down you'll be able to find a
00:00:50
interface as to how this will look and
00:00:52
you can actually go ahead edit the
00:00:54
visual aspects of the UI and all the
00:00:56
components within your app I'll show
00:00:57
more about that later and if you further
00:00:59
scroll down you'll be able to find a lot
00:01:01
more details about tempol apps and you
00:01:02
can also go ahead and pick hundreds of
00:01:04
components from react components.com and
00:01:06
start using it in your project as well
00:01:08
which again I'll show you in a bit and
00:01:09
the first thing that you going to do is
00:01:10
to click on the login button and log to
00:01:12
your tempol laabs AI account using
00:01:14
GitHub account and once you're there
00:01:15
this is going to be the screen that
00:01:17
you'll be taken to and again to create
00:01:19
your first new project all you got to do
00:01:20
is to click on this create project
00:01:21
option and you'll be taken to a screen
00:01:24
like this and here you have three
00:01:25
options they generate new app connect
00:01:27
GitHub repository and design on blank
00:01:29
canvas now since we are interested in
00:01:30
creating a new app with AI from scratch
00:01:33
I'll go ahead and select this option if
00:01:34
you want to connect to an existing
00:01:35
GitHub repo you can do that or also
00:01:37
design on blank canvas I can click on
00:01:39
next and next up you just want to
00:01:41
describe what kind of app you want to
00:01:42
build and you know give a basic pointers
00:01:45
to the a so in this context let's say I
00:01:47
want to build a AI powered voice not
00:01:49
taking app where I can just go ahead and
00:01:51
speak whatever stuff I want to and the
00:01:53
AI will go ahead and transcribe it and
00:01:54
then summarize it and show it as a note
00:01:56
and we can go ahead and access previous
00:01:58
and past generation from the History
00:01:59
Section so that's the kind of app that
00:02:01
we're trying to build so I'll go ahead
00:02:02
and say nii
00:02:04
powered voice not taking SAS users
00:02:10
should be able to record the audio and
00:02:14
the AI will transcribe
00:02:18
and
00:02:21
summarize and store the
00:02:25
notes for each dates okay so enable
00:02:29
powered voice not taking SAS user should
00:02:31
be able to record the audio and the a
00:02:33
will transcribe and summarize and store
00:02:35
the notes for each dates so that's
00:02:37
basically the initial prompt or the you
00:02:39
know that's how I will describe the app
00:02:40
that I want to build oops we have a typo
00:02:42
in here so that's for it and again if
00:02:44
you have any inspiration for design or
00:02:46
anything you can go ahead and upload
00:02:47
that image in here and in this context
00:02:49
let's say I want to include a screenshot
00:02:51
so I can click on this image option
00:02:52
click on select and that should be
00:02:54
pretty much it so if you have any design
00:02:56
Mo up or inspiration you can go ahead
00:02:57
and upload it here and click on the
00:02:59
generate button
00:03:02
and now the AI will go ahead and start
00:03:04
building the app and it will first start
00:03:06
with the PRD so here you'll be able to
00:03:08
find the title of the app and all the
00:03:10
basic functionalities and how what are
00:03:12
the features that you can expect out of
00:03:13
the app and then the a will go ahead and
00:03:15
create a user flow diagram basically a
00:03:17
memory diagram and you can view the code
00:03:18
for the same in here as well okay so if
00:03:20
you want you can zoom in and
00:03:22
oops if you want to you can zoom in and
00:03:25
you know open it in full screen and find
00:03:28
all the options and components and
00:03:29
modules Within your app and now if I
00:03:31
move over to the design tab this is
00:03:32
where the magic happens now the AI
00:03:34
within Tempo Labs will go through the
00:03:35
PRD and start designing all the pages
00:03:38
the components and everything else and
00:03:39
you can find a real-time preview of the
00:03:41
same in here so first it will go ahead
00:03:43
and create a wireframe with a Tre like
00:03:45
structure so here we have the main page
00:03:47
then all the individual components that
00:03:49
are supposed to go inside of this main
00:03:50
page and again each individual
00:03:52
components inside of this particular
00:03:53
component so basically it forms a tree
00:03:55
like structure basically like a domm
00:03:57
tree and again we'll wait for it to
00:03:58
complete coding the same and now as you
00:04:00
can see it has created the wireframe and
00:04:02
it has also created the routes and it is
00:04:04
now creating all these individual
00:04:05
components or cards as you can see they
00:04:07
are creating a waveform visualizer note
00:04:09
card recording interface not list and
00:04:12
blah blah blah stuff so now let's just
00:04:13
go ahead and wait for the a to complete
00:04:14
coding the same all right so seems like
00:04:17
it's done and if you want to view let's
00:04:18
say the full screen preview all you got
00:04:20
to do is to click on this uh play button
00:04:22
so okay we have one more to complete so
00:04:25
generating Home Route so let's wait okay
00:04:27
so it seems like the entire uh
00:04:29
generation process is done and if I
00:04:31
click on this play button we should be
00:04:33
able to view the preview of the app and
00:04:35
this is what it has generated for now
00:04:37
okay not bad right and again if you're
00:04:39
not satisfied with the design and if you
00:04:40
want to change the UI you can just go
00:04:42
ahead and say something like I don't
00:04:45
really like the design of the app for
00:04:49
now can you change and redesign the
00:04:54
entire
00:04:56
UI and incorporate let's say
00:05:00
some Modern
00:05:03
design and make the site visually
00:05:07
appealing okay so you can go ahead and
00:05:09
give exact pointers as to how you want
00:05:11
to redesign the app and hit enter and
00:05:13
now the a will go ahead and redesign the
00:05:14
entire homepage and we'll show you an
00:05:16
updated version so let me wait for it to
00:05:18
complete coding the same all right so I
00:05:20
went ahead and asked the AI to redesign
00:05:22
the app from scratch and this is how the
00:05:24
UI offer app looks for now we have a
00:05:26
record button in here the transcription
00:05:28
AI summary times stamp and also a
00:05:31
section to access recent recordings and
00:05:33
if I click on this click to start
00:05:34
recording it is now simulating how
00:05:36
exactly things will look like if I make
00:05:38
this app functional and if I stop
00:05:40
recording it should show the
00:05:41
transcription in here AI summary and
00:05:43
also reason recording card in here now
00:05:45
that we have our basic UI of the app
00:05:47
done and ready the next step is to make
00:05:49
it functional and that is to enable the
00:05:51
actual recording functionality and also
00:05:53
a transcription and summarization using
00:05:55
let's say Ai and that is to use let's
00:05:57
say open AI API so I can go ahead and
00:05:59
say say can you make the app
00:06:04
functional by adding the ability to
00:06:09
record uh audio and transcribe and
00:06:14
summarize it using open AI API so I can
00:06:19
go ahead and hit enter and again the AI
00:06:21
had already asked me if I want to use
00:06:23
open AI SDK add your AP again and all
00:06:25
that now it will go ahead and make all
00:06:27
the required changes and hopefully it
00:06:28
will ask me to go ahead and put my open
00:06:30
E API key to make the whole thing
00:06:32
functional so let's wait all right so it
00:06:34
seems like it has implemented the
00:06:35
recording functionality and also audio
00:06:37
transcription and summarization and the
00:06:40
next thing that I going to do is to
00:06:41
obtain my open a API key and add it in
00:06:43
the EnV file and again if you want to
00:06:46
access all the files within your app all
00:06:48
you got to do is to click on this icon
00:06:49
right here file selector and you should
00:06:51
be able to find all the you know files
00:06:53
within the project and now I got to add
00:06:55
my open AI API key for that I can click
00:06:57
on EnV and here I want to add this open
00:07:00
API key under we open API key so let me
00:07:04
quickly go ahead and grab that so here I
00:07:05
have copied my open API key and I'll go
00:07:08
ahead and paste the same in here
00:07:10
controls maybe yep it's saved and that
00:07:12
should be it right and now that
00:07:13
everything is in place I should be able
00:07:15
to use the app now so let me go ahead
00:07:17
and refresh it once and let me see if
00:07:19
actual functionality of the app is
00:07:20
working so I can go ahead and click on
00:07:22
start recording hey there I'm Astro I'm
00:07:25
recording a content for tempol laps AI
00:07:27
which is like a cording platform where
00:07:29
use users with no cording knowledge can
00:07:31
create stunning look apps using AI so
00:07:33
yeah that's it I can stop and it says
00:07:35
processing your recording so let's see
00:07:38
it okay so it works so here we have the
00:07:40
transcription here we have the summary
00:07:43
and here we have the recording card as
00:07:45
well so recorded content for tempol
00:07:47
laabs AI ACC cording platform allow
00:07:49
users with no cording knowledge to
00:07:50
create apps using
00:07:52
AI all right so here we have the AI
00:07:55
summary the transcription and if I go
00:07:57
ahead and create a new one this is is
00:07:59
yet another recording that I'm doing to
00:08:02
test the functionality of the app that
00:08:03
I'm building that is voice not a
00:08:05
assistant and I hope I hope it works so
00:08:07
let's
00:08:10
see so I went ahead and created another
00:08:12
one here we have the real transcription
00:08:14
the AI summary and also the recording
00:08:17
history as well and if you want you can
00:08:19
edit it and delete it as well okay so
00:08:21
the core functionality of our app is
00:08:23
actually working now and if I head back
00:08:25
to Tempo okay let me give you a walk
00:08:27
through of the UI of tempol laabs a so
00:08:30
towards the left side you will find a
00:08:31
area where you can converse with the AI
00:08:33
where you can go ahead and give or any
00:08:34
suggestions or make any changes or add
00:08:36
new features and all that you can just
00:08:38
go ahead and put it in the uh chat box
00:08:40
and send it you can go ahead and upload
00:08:41
images for inspiration and you can also
00:08:43
use this pick and add context button to
00:08:46
select uh individual elements within the
00:08:48
app and make changes to it for example I
00:08:50
could click on this icon right here and
00:08:52
select any area to add it into the
00:08:55
context like this as you can see browser
00:08:57
router or maybe a different one here
00:08:59
let's see okay this one right here the
00:09:01
storyboard recording interface and now I
00:09:03
can go ahead and give a prompt and the
00:09:05
changes will be focused on this
00:09:06
particular area okay so you can
00:09:08
individually Target all the components
00:09:10
within your page and make changes and
00:09:12
you can go ahead and upload image and
00:09:13
pick context and do all that and again
00:09:15
if you select any particular let's say
00:09:17
element let's say this one right here
00:09:20
okay so this recording button and now
00:09:21
towards the right side you'll be able to
00:09:23
edit the styling properties of that
00:09:25
particular element now in this case I
00:09:27
have selected this uh recording button
00:09:29
with this div and as you can see we can
00:09:31
now visually edit a lot of styling like
00:09:33
position size spacing layout and all
00:09:35
that for example if I want to change the
00:09:37
spacing I could go ahead and edit the
00:09:38
values in here and do that if I want to
00:09:40
change the alignment I can do that like
00:09:42
clicking on this option so if I click on
00:09:44
here as you can see the element has
00:09:45
moved to other side I can click on this
00:09:47
one to make it in center and again if
00:09:49
you want you can just change the
00:09:50
alignment just like this justify Center
00:09:53
next up if I want to I can go ahead and
00:09:54
click on the Styles option and change
00:09:56
the opacity change the fill color like
00:09:58
this if I want to maybe I can just go
00:10:00
ahead and give it a different color
00:10:01
using this Color Picker like this for
00:10:03
now I'll keep it as white and if you
00:10:05
want to you can go ahead and change the
00:10:06
Border radius rotation border and if you
00:10:08
select this text option you'll be able
00:10:10
to change the font weight size alignment
00:10:12
and all that stuff okay so if you want
00:10:14
to you can actually use this like a real
00:10:16
design tool so it almost felt like I'm
00:10:18
using figma to create like a real app so
00:10:20
I can go ahead and Target individual
00:10:22
elements and adjust the styling of it
00:10:24
from the options towards the right side
00:10:26
so that's how you visually customize
00:10:27
your app and again if you move over to
00:10:28
the code section you'll be able to view
00:10:30
the code of the any elements you can
00:10:31
select any components like this and view
00:10:33
the code for the same or if you want to
00:10:35
view the code you can go ahead and click
00:10:36
on this icon right here file selector
00:10:38
view all the files within your project
00:10:40
and view the code for the same as well
00:10:42
so that's how this whole thing works and
00:10:43
again if you click on this option you
00:10:44
can go ahead and push this to GitHub you
00:10:46
have a version History Section you have
00:10:49
a design system and again you can go
00:10:50
ahead and access the Dom tree right here
00:10:52
so the tree like hierarchy of your
00:10:54
components of the app and again you also
00:10:56
have this asset option where you can go
00:10:58
ahead and select C components from react
00:11:00
components.com and add it to your app as
00:11:02
well and again the cool thing that I'm
00:11:04
very interested in is this part right
00:11:06
here that is to connect to superbase now
00:11:07
this right here is does not really have
00:11:09
any database or user authentication or
00:11:11
anything as such and we can use the
00:11:13
super base option right here to
00:11:14
implement all of that basically add
00:11:16
let's say a back end to our app so now
00:11:17
that the basic functionality of our app
00:11:19
is working that is to record and you
00:11:21
know summarize the content the next
00:11:22
thing that I will do is to implement
00:11:23
user authentication and for that all I
00:11:25
got to do is to click on the super base
00:11:26
icon click on connect super base and it
00:11:29
will open a superbase authorization page
00:11:31
and all I got to do is to select my
00:11:33
organization and click on authorize
00:11:35
tempol labs and that should be it now
00:11:37
tempol laabs should connect to superbase
00:11:39
and should have all these you know
00:11:41
projects within my let's say superbase
00:11:43
account in here and again before that if
00:11:45
you click on this figma extension option
00:11:46
you'll be able to convert a figma design
00:11:49
into a Tempo project using this
00:11:50
particular Plugin or extension within
00:11:52
figma I'll create a dedicated video
00:11:54
about it soon so wait for it and again
00:11:56
now coming back to super base I can go
00:11:58
ahead and select the part project that I
00:12:00
want to use and before that I want you
00:12:01
to go to superbase okay I'll go to
00:12:05
superbase log to my account and if you
00:12:07
don't already have an account you can
00:12:08
just go ahead and create one and again
00:12:10
the next thing that you got to do is to
00:12:11
click on this new project option select
00:12:12
the organization and create a new
00:12:14
project now for this video I've already
00:12:16
created a project so where is it okay
00:12:18
new s this right here is the project
00:12:20
that I've created for this video and now
00:12:22
I can head back to Tempo and select that
00:12:24
what is it okay new S I can click on it
00:12:26
and click on the connect options
00:12:30
now the AI will go ahead and connect it
00:12:32
to my superbase account and now I can go
00:12:34
ahead and Implement authentication
00:12:35
databases and you know all that stuff so
00:12:37
let's wait all right so superbase
00:12:39
authentication is successful next up
00:12:41
I'll go ahead and open the AI chat and
00:12:43
I'll go ahead and say Implement user
00:12:46
authentication and I can hit enter now
00:12:49
tempol laabs ai will go ahead and use
00:12:50
superbase authentication to integrate
00:12:52
authentication into our app this way
00:12:54
users can sign up and you know start
00:12:56
using our app and only authenticated
00:12:58
users will be allowed to use our app as
00:12:59
well and now it is giving us the SQL
00:13:02
prompt or SQL queries that we need to
00:13:04
run so we can just go ahead and copy it
00:13:06
from here all right and next up I need
00:13:08
to open let's say super base and go to
00:13:11
this SQL editor section right here paste
00:13:13
the uh thing that we copied from tempol
00:13:16
labs and all I got to do is to click on
00:13:17
this run
00:13:18
option H it says error relation public
00:13:21
recording does not exist so I can go
00:13:23
ahead and let's say copy this one from
00:13:24
here head back to Tempo okay let's just
00:13:27
wait for it to complete this one first
00:13:29
all right so seems like that part is
00:13:30
done so I can go ahead and say when I
00:13:33
run the SQL
00:13:36
query you gave I get the following error
00:13:42
and I can go ahead and give it oops give
00:13:45
and hit enter let's see okay so I'll go
00:13:49
ahead and copy the same where is it oops
00:13:53
copy head back to super base replace the
00:13:56
content and hopefully it works run and I
00:13:58
see you can see it is success and now if
00:14:01
okay before that I'll go to
00:14:03
authentication uh where is it sign in
00:14:07
signup and Au providers select email and
00:14:11
make sure to disable this option that
00:14:12
says confirm email otherwise you'll have
00:14:14
to set up SMTP and all that kind of
00:14:16
stuff so we don't want to get there now
00:14:19
I guess authentication should be working
00:14:21
all right so when you try to access the
00:14:22
app for the first time you'll be taken
00:14:23
to this login page this means the main
00:14:26
functionality of our app is behind uh
00:14:28
you know it's a protected route so only
00:14:30
if you sign up for a new account you'll
00:14:31
be able to use it so I click on sign up
00:14:33
put my email in here password click on
00:14:38
sign up ooh account created so yep and
00:14:41
if I come over to here and click on
00:14:43
users I should be able to find my new
00:14:45
user account oh yes there you have it
00:14:48
provider email my email and yep I have
00:14:51
now successfully implemented uh user
00:14:53
authentication and I played with that
00:14:55
you know uh visual editor and now my UI
00:14:58
is broken so let me go ahead and fix
00:14:59
that real quick so I went ahead and
00:15:01
fixed the same and as you can see it is
00:15:02
now clean and looks good now if I head
00:15:04
over to super base and go to let's say
00:15:06
table editor you will find that we now
00:15:08
have two tables one is for recording and
00:15:10
other one is for profiles and every time
00:15:12
now you create a new recording it will
00:15:14
be saved to database meaning that all of
00:15:16
will be stored in the database and you
00:15:17
should be able to access it even if you
00:15:19
refresh the page right so let me just go
00:15:21
ahead and re try it
00:15:22
out hi there this is a test audio that
00:15:25
I'm recording to test if the
00:15:27
functionality of the app is working as
00:15:28
inex
00:15:29
entered it says processing let's
00:15:33
see oh there you have it so here we have
00:15:35
the transcription AI summary and also
00:15:37
recent recording and if I head back to
00:15:39
super base and click on recording yes
00:15:40
there you have it so we have that entry
00:15:42
in Here and Now pretty much everything
00:15:45
is working right next up let's say I
00:15:47
want to create a landing page for my app
00:15:49
showcasing every cool features it has to
00:15:51
offer and you know couple of explanation
00:15:52
about our app so I can go ahead and say
00:15:54
create a stunning looking landing page
00:15:59
for my app and hit enter so let's give a
00:16:03
open-ended you know prompt and let's see
00:16:05
what AI does for us all right so seems
00:16:07
like it's done and it has created the
00:16:08
landing page for us so if I go ahead and
00:16:10
refresh so this writer is the landing
00:16:12
page that the a has created for us so we
00:16:14
have a couple of cards in here a hero
00:16:16
section we have okay a interactive demo
00:16:20
which does not seem to work and if I
00:16:22
click on the try now button it should
00:16:23
take us to the let's say our app and now
00:16:26
let's say I want to add let's say a
00:16:27
navigation bar so I can you can go ahead
00:16:29
and say add a NF bar to the landing page
00:16:34
and oops page and add a couple of dummy
00:16:40
links and sign up and get access button
00:16:45
so now let's just go ahead and wait for
00:16:46
the a to create the navigation bar and
00:16:48
implement the same on my let's say
00:16:50
landing page so let's wait all right so
00:16:52
the navigation bar is implemented I went
00:16:54
through some errors so I just went ahead
00:16:56
and asked the a to fix it and this is
00:16:58
how the now bar will look like so now we
00:17:00
have some dummy links get access button
00:17:02
sign in button a hero section A couple
00:17:04
of cards and all that stuff and again if
00:17:06
I click on the get started button it
00:17:08
should take me to the app section here
00:17:09
we can go ahead and record the content
00:17:11
See the transcription recent recordings
00:17:12
and all that maybe if you want to add
00:17:14
let's say a sidebar in here or maybe
00:17:16
let's say a uh navigation bar to the top
00:17:18
you can go ahead and do that and this is
00:17:19
how simple it is to create a app using
00:17:21
tempol laabs Ai and if you want to make
00:17:23
any further changes you can go ahead and
00:17:25
give all that instructions in here and
00:17:27
make changes exactly like the way you
00:17:29
want next up I went ahead and asked the
00:17:31
AI to add some gradient colors and all
00:17:33
that to our app and seems like the
00:17:34
changes are live and let's
00:17:37
see so okay so we now have this gradient
00:17:40
text in here and also accent colors to
00:17:42
the behind so yeah that's how you build
00:17:44
a app using tempol laabs AI so as you
00:17:46
saw this is how simple it is to create a
00:17:48
app using tempol laabs AI coding
00:17:50
platform and it's pretty simple all you
00:17:52
got to do is to give all the
00:17:53
requirements that you have and a will go
00:17:55
ahead and write the code for you do all
00:17:56
that stuff and since tempol laabs has
00:17:58
inte ination with superbase you can go
00:18:00
ahead and add a real database
00:18:01
authentication and all kind of backend
00:18:03
functions as well so that's pretty much
00:18:05
all I wanted to show you in this video
00:18:06
and to access tempol apps AI all you got
00:18:08
to do is to click the first link in the
00:18:09
description below and you can head over
00:18:10
to their website login with your GitHub
00:18:12
account and start using the platform and
00:18:13
they also have a generous free tier as
00:18:15
well so if you want to check out you
00:18:16
know the app and how it works and all
00:18:18
that so yeah that's pretty much all I
00:18:19
wanted to show you in this video I hope
00:18:20
you guys found this video useful if yes
00:18:21
make sure to subscribe and I'll see you
00:18:23
in the next one
