Coding 100% With AI | The Easiest Way to Use Cursor
Summary
TLDRこのビデオスクリプトでは、AIツールを活用してプログラミング知識なしにウェブアプリの開発が可能になる方法が紹介されています。特に注目されるのは、コード生成に特化した「カーソル」と、ウェブサイトの展開を簡単にする「リペット」というツール。スクリプトでは、カーソルを使ってコードを生成し、リペットに接続してリアルタイムにウェブサイトの変更を確認することができる様子が説明されています。さらに、Firebaseとの連携や、AIを使ってカードに画像や説明を自動生成する機能の追加も取り上げられています。
Takeaways
- 🧠 AIツールを使って、コーディング知識がなくてもウェブアプリのアイデアを実現できる。
- 🛠️ Cursorはコード生成のAIツールで、ウェブサイトの外観や機能をタイプするだけで必要なファイルを自動生成する。
- 🌐 Repl.it(Repet)は市場で最も優れているウェブサイトの展開ツールであり、リアルタイムで変更を確認できる。
- 🔄 CursorとRepl.itを組み合わせることで、コードを編集することなくウェブサイトを変更することができる。
- 📝 CursorのComposer機能を使って、ウェブサイトのページをよりカスタマイズして改善することができる。
- 🔑 SSHキーを生成し、Repl.itに接続することで、CursorとRepl.itの同期を設定できる。
- 🔄 FirebaseとRepl.itを接続して、ウェブアプリにユーザー認証やデータ保存機能を追加することができる。
- 🎨 Cursorのプロンプトを使って、Trelloのようなウェブアプリを作成し、カードやリスト、ボードなどの機能を実装できる。
- 🖼️ Fluxを使用してカードに画像を自動生成し、ウェブアプリのビジュアル性を向上させる。
- 📈 CursorとRepl.itの連携により、ウェブアプリの開発プロセスが大幅に簡素化され、開発速度が向上する。
- 📝 ウェブアプリのエラーや問題が発生した場合、Cursorのプロンプトを使って問題を解決することができる。
Q & A
どのようなAIツールを使用してウェブアプリを作成できますか?
-スクリプトでは、CursorというAIツールを使用してウェブアプリを作成しています。これはコード生成に最適で、ウェブサイトの外観や機能を英語で指示するだけで、必要なファイルを自動的に生成してインターネットで実行できるようにします。
Cursorで生成されたコードをどのようにデプロイするのですか?
-Repl.it(Repet)というツールを使用してCursorで生成されたコードをデプロイしています。CursorとRepl.itを接続することで、リアルタイムで変更を加えたり、ウェブアプリをインターネットに展開したりすることができます。
Cursorでウェブサイトの変更を加えるにはどうすればよいですか?
-Cursorでは、ウェブサイトに加えたい変更を指示する文章を入力するだけです。Cursorはその指示に応じてコードを自動的に編集し、ウェブサイトの変更をリアルタイムで確認できます。
Repl.it(Repet)でSSHキーを生成するにはどうすればよいですか?
-Repl.itでSSHキーを生成するには、ターミナルを開いて「generate SSH key for repet」と入力し、指示に従ってSSHキーを作成し、それをRepl.itのSSHキー設定に追加します。
FirebaseとRepl.itを接続するにはどうすればよいですか?
-Firebaseのコンソールでプロジェクトを作成し、必要なトークンを取得します。その後、Repl.itのシークレット設定でこれらのトークンを追加することで、FirebaseとRepl.itを接続できます。
CursorのComposer機能とは何ですか?
-ComposerはCursorの高度な機能の一つで、プロンプトに応じてウェブページのコードを自動的に生成または変更することができます。これはCursor Proのサブスクリプションで利用可能です。
ウェブアプリにTrelloのようなボード、リスト、カードの機能を追加するにはどうすればよいですか?
-CursorのComposer機能を使って、ボード、リスト、カードを作成し、カテゴリーの色分けやユーザーが追加できるようにするプロンプトを入力します。Cursorはこれらの指示に応じて必要なコードを自動的に生成します。
カードに画像やビデオをアップロードできるようにするにはどうすればよいですか?
-Cursorの指示に応じて、画像やビデオのアップロード機能をカードに追加することができます。プロンプトでアップロード機能を要求し、Cursorが自動的にコードを更新してその機能を実装します。
ウェブサイトのデザインをローマ帝国のスタイルに変更するにはどうすればよいですか?
-CursorのComposer機能を使って、デザインを変更するプロンプトを入力します。例えば、「ローマ帝国のスタイルに合わせたウェブサイトの外観を変更してください」という指示を与えることができます。
ウェブアプリにAIを活用してカードの説明やステップを自動生成するにはどうすればよいですか?
-CursorのComposer機能を使って、カードの説明やステップを自動生成するプロンプトを入力します。AIは指示に応じて、カードの内容に合わせた説明やステップを自動的に生成します。
Outlines
🤖 AIツールを使ったウェブアプリ開発
この段落では、AIツールを使ってプログラミング知識なしにウェブアプリを作成する方法が紹介されています。特にCursorというAIツールは、ウェブサイトの外観や機能をテキストで指示することでコードを生成可能で、Repl.it(Repet)というツールと組み合わせることで、リアルタイムにウェブサイトの変更を確認・公開できるという利便性が強調されています。
🔗 SSHキーの生成とRepl.itへの接続
段落2では、Repl.it(Repet)へのSSHキーの生成と接続方法について説明されています。SSHキーを生成し、Repl.itのSSHキー設定に追加することで、ローカルのCursor環境とRepl.itを連携させる手順が詳述されています。
🔄 Firebaseとの連携とデータ管理
この段落では、FirebaseとRepl.itを接続してウェブアプリのデータ管理を行う方法が解説されています。Firebaseコンソールでのプロジェクト作成、ウェブアプリの作成、認証方法の設定、Firestoreデータベースの利用など、ウェブアプリのデータストアとしてFirebaseを活用する手順が紹介されています。
🎨 CursorのComposer機能を使ったデザイン改善
段落4では、CursorのComposer機能を使ってウェブアプリのデザインを改善する方法が説明されています。ComposerはAIによってコードの変更を提案し、ユーザーはそれらの変更をリアルタイムで確認・承認することができるとされています。
🖼️ AIによる画像生成とウェブアプリへの統合
この段落では、AIツールFluxを使ってカードに画像を自動生成し、ウェブアプリに統合する方法が紹介されています。新しいボードの作成やカードの追加など、特定の操作が行われるとAIが画像を生成し、それがウェブアプリに反映されるプロセスが説明されています。
🛠️ ウェブアプリの機能拡張とエラー処理
最後の段落では、ウェブアプリに新機能を追加したり、発生したエラーを処理する方法が解説されています。AIが生成したコードにエラーが含まれていた場合の対処法や、新機能の追加プロセスが詳述されています。
Mindmap
Keywords
💡AIツール
💡コード生成
💡ウェブアプリ
💡デプロイメント
💡リアルタイム
💡テンプレート
💡SSHキー
💡Firebase
💡Composer
💡Flux
Highlights
使用AI工具无需编码经验即可创建完整的Web应用程序。
介绍最佳的AI代码生成工具,通过输入网站的外观、感觉和功能来自动创建所需文件。
讨论部署网站的有效性问题以及目前市场上最佳的网站部署工具Repl.it。
展示使用Cursor和Repl.it实时编辑和部署网站的过程。
通过命令行操作,展示如何在Repl.it上创建SSH密钥并连接到Cursor。
解释如何使用Cursor Pro的Composer功能来增强网站页面。
演示如何通过AI提示在几分钟内创建类似Trello的应用程序。
展示如何将Firebase与Repl.it连接,以便存储数据和用户登录。
介绍如何使用Cursor的AI功能自动同步代码更改到Repl.it。
讨论如何通过AI工具快速添加新功能,例如图像上传和视频上传到卡片。
演示如何使用AI自动生成卡片描述和步骤,以及如何使用Flux自动生成图像。
展示如何将AI生成的内容实时同步到网站前端。
讨论如何通过AI工具改进网站设计,以匹配罗马帝国的风格。
演示AI工具如何快速修复代码中的错误并实时更新网站。
强调使用AI工具进行网站开发的速度和效率,以及对开发者的潜在影响。
总结AI工具在网站开发中的实用性和创新性,以及它们如何简化开发流程。
Transcripts
you can now take your idea for an app
with zero coding experience using Ai and
create a full web app these are the best
two tools for code generation and for
deployment to take your ideas and create
a full web app so this app right here on
the left is by far the best AI tool for
code generation you just type what you
want your website to look like feel like
all the different features how to
organize the data and it adds all the
different files necessary to run the
code so that it can run on the internet
however it's really hard to deploy
websites effectively however the best
tool for deploying websites on the
market right now and that makes it the
easiest is repet so I use cursor to
generate all the code and I connect it
to repet so I can see it in real time if
I were to ask for these changes right
here I can press uh command shift enter
and it will l literally begin to edit
the code right and it says okay now it's
going to look into script editor and
it's looking at my instructions and now
it's saying certainly I'll modify this
and we can watch it I can press this
control panel and we can see what it's
doing so it's making all these different
changes it just finished and here it
says accept all notice how there's been
no change over here now let's hit accept
all save all look at that it completely
changed the website right here on the
right and it actually I think it did a
decent job yes so obviously some of the
formatting isn't great but I can say can
you make the arrows right I don't want
this like Arrow background right here
can you make the arrows have no
background color just put the arrows in
white and now it's going back to town
now we're just going to hit accept
all and look at that right there now we
have these change these changes right
here and this is exactly what I was
asking for right so I can click on this
one right here and I can add some music
here this is an app I'm making for my
team can you have the buttons on the
right
sidebar match the color of the block
instead of being only blue
generating let's see if that works so in
theory if we press this red one it
should match yep and let's try the
purple one
here yep so in this video an is actually
going to explain how to set up cursor to
be fully synced with repet and the
process seems a little weird at first I
will admit but once you get it down it
it takes like 3 or 4 minutes to just
very quickly set up cursor to be fully
synced with repet which allows you to
download the template that we created
last week for free and download it and
so it has all the packages necessary to
deploy on repet so that means if you use
the template and then hook it up with
cursor you can begin just using the
English language to create websites and
there's no copying and pasting involved
just typing on the left window automatic
syncing to edit the entire code base on
repet and then you can deploy it
straight to the internet and hook it up
to whatever domain that you want in this
video we made an AI clone of Trello and
we added multiple AI features and we did
it in about six or seven cursor prompts
which uses Claude 3.5 Sonet it took 20
minutes and I've still have never
written a sing single line of code even
though I've been making apps with code
every single day for the past 48 days
and so I'm really excited for this video
okay so the first step is we are going
to hit template
one now we're going to use this template
cursor number one and we are going to
create a new project with our
template now I will let you take it from
here so we're going to open up cursor
and now what now war in cursor click the
terminal button at the bottom right so
you've got this terminal opened up yep
um and over here you're going to click
command
K and we are going to generate an SSH
key which is Sally a password so what
we're going to tell is generate SSH key
for repet name it repet and copy the
public key to the clipboard
and submit yep
submit and we can click on the
terminals it just entered this likee
here and we just click enter we run
it and it's generating this public key
we can so rally already did this so he
can override it that's totally fine it's
yes is fine yes is fine
um and you can click
enter so when when it says enter a
passphrase I'm just going to press enter
and then enter again right yeah you
don't need to enter passphrase um and
now you should have copied this SSH key
to the clipboard now we it happens
automat it happens
automatically yeah it happens
automatically now we search for ssh in
graet we go to the Keys section in SSH
and we can add a key
um call it whatever you want and paste
what what you just
copied and we paste it in and we're just
going to call this cursor two and now
we're going to add SSH key MH and we're
going to we're going to go to connect um
ah in the SSH Tab and we're going to
copy that shell command yep and now
we're going to go back to
cursor and we're going to click open
with ssh in the middle of the screen mhm
and we're going to paste
the command we just
copied and we're going to click on the
add new SSH host right
there and then we're going to paste the
command
again and click
enter um and you can just click the
first
one click this
yes and now in the bottom right click
connect ah you want to continue
continue
yes nice so if you want to do this for
another repl make sure you create a new
host and paste your command from that
drop l in and H add new host yeah add
new host now we want to make sure we
open the
folder um okay open folder and this
should be cursor number one yeah or the
name of your project if you named it
something else and we hit okay okay yeah
all right nice nice nice let's go so in
theory if we run this template which
should be operational we just need to
add our Firebase Keys which we can do
really quickly so let's just go to
Firebase and uh we're going to go to the
console oh I'm so excited for this um
I'm going to open in split view like
this we're going to do is I'm going to
create a project and we're going to call
this uh cursor
one and continue and we're going to
enable and what we can do while this is
loading is we can open up our secrets
tab in repet which will so we've
connected cursor to repet now we need to
connect repet to the Firebase which
stores all the data and allows people to
sign in that cursor will uh since it can
all the project files it'll know how to
write code so that it stores things in
the right place which is really cool so
we can hit
continue and we are going to create a
web app like this and we are just going
to uh type
in um app
44 doesn't matter what you put there um
and then this will create an app and
this is going to give us the tokens that
we need to place here and so I'm going
to quickly and you want to keep these
secret
and we can go like this and we can
continue to console and we can add all
the secrets and then what we're going to
want to do is copy this Dev
domain and then go through this process
just follow along this will all make
sense in a second so we're going to go
to fir store database and all we need to
do is create a database storage and
authentication if you've been following
along and creating apps with the
template you've probably done this
multiple times already we're creating a
fir store database we need to do
authentication get
started first thing that I do is I'm
just going to go to settings authorize
domains add a domain we're adding this
Dev URL domain so we can actually add we
can sign in in this
uh development environment now uh signin
method we're going to hit Google enable
and then just do the default email
doesn't really
matter then what we're going to do is
last one build
storage get
started start in test mode always test
mode so now that that's loading I'm just
going to go ahead and refresh this go
here okay so we can now open uh cursor
so cursor it's FL graphlet by running on
your own
computer um but it has a lot more
powerful AI features so why don't we
just press command
I command
I Okay cool so this is your composer
which is probably the most powerful
cursor feature you need cursor Pro for
this they can click the settings icon in
the top right corner they can click um
on features or sorry beta beta features
and enable composer change the uh create
new post page and make it look way
cooler
um and um
modern we'll see what happens so and
then you're going to do you hit command
shift enter for this like to to run it
with the full code base right yeah I
think you can do that yeah I usually
give it the exact files but like I feel
like we can just give it the whole code
base yeah when you get started I feel
like it's you should do like I don't
sometimes I don't know which files it
needs to change exactly just give it the
whole code base it'll figure it out it
actually doesn't upload all the files
it's really smart and first it checks
which files it needs to upload from the
codebase based on your prompt And So It
Goes one by one in all the files sees
which files it needs to upload and then
only uses those and now wow we have we
have something done um yeah and so here
we can see that it it only changed the
ad post right am I reading this right so
it changed the adpost oh and I need to
hit accept and so these are the ones
that's going to change right here yes um
and we can hit accept and I can hit
accept and there you go you see it just
changed it didn't change super
drastically but like it's a lot cleaner
like and we can just open this up full
screen too I I want to I want this to be
a
Trello clone I want to create an app
that is
exactly like
Trello that has
boards lists and cards and
categories which should be
colored um
dropdown
and the
default ones should be project and idea
the
user should be able to create
more
okay and then that should that be good
you think yeah I think that should be
good so we can actually click click on
card and we can see what it's doing so
it's creating a new file called card it
already did that now it's going to
create or a file called list it just
created that now it's creating board.
TSX it hasn't been saved how do you tell
when it's done you go back to the the
first tab in the composer where it says
composer and it should like be done in
terms of like you know um okay so it's
done so we're going to accept all should
I refresh this or should I just leave it
yeah just accept and Save and it should
refresh automatic
also save all it's telling us to to do
couple more things in the chat so let's
follow its instructions okay yeah just
say keep going and
then um it'll make the changes and while
we're making the changes anytime it says
to install something the composer
doesn't have access to the terminal or
to install any packages so that's a a
little um tricky part right so we want
to make sure we can install things so
whenever it says oh install this package
um we want to go back to ret go to the
Shell and ret so we're going to go to
Shell and we're going to paste this in
yeah do n um we have to do npm space i
space this we're just trying to install
this uh uh okay
npm I this yeah
okay so on normally it says to do mpm
did it have it there or or no it didn't
but we didn't tell the composer that we
were working in uplet if we had probably
tell us to do that yeah because I mean
it is Claude and Claude always does that
too so accept
all oh wow create a new board so this is
our board and so each board has a list
let's say videos we can create Cod
projects and then within coding projects
we can do Trello right the app that
we're working on right now Trello app at
a card nice looks good um Trello app um
maybe we want to make a notion app maybe
want to make a real time chatbot
app oh it's like super responsive I like
it um so let's click on this let's see
what happens wow we can add a
description um
description color we can change it to
Blue let's see what that looks like
category is an idea save
changes okay so now we see that the
Trello app is now blue and I don't see
anything on the front so let's Okay so
let's go ahead drag and drop too into
videos oh no way wait uh maybe add a
card in videos oh yeah yeah it doesn't
stay so now let's just tell it
everything that's that went wrong so
board is looking
good but can't drag the cards to a new
location also can you add due
dates in the card card details here it's
done and we're going to hit accept and
save okay so we're going to create a new
board interesting okay did you save did
you save
files oh so if you click save while
you're in a current file it only saved
the card file so click on composer and
click on oh I didn't hit accept all okay
we're learning how to use it okay I need
to press accept all and there it did it
changed it right in front of us um and
so now we can actually go back to our
original board which is Riley and an
Board of greatness there we go we see
idea right there listed and now we can
actually select a due date I want to add
image uploads I want to add image
uploads to the card display as a
thumb nail for the
card if you
upload many images choose the first one
uploaded um
you
should also be able to upload videos all
right let's
see this is insane this is going to
change my life dude this is this is trip
three times as fast
probably um once I really get it once I
get it down yeah yeah I mean it's
changing the code directly so I ones yep
and I think we are set now let's hit
accept all save all okay look at this
now in real time right here it's just
done
tasks cursor front
end AI features which we should just add
pretty soon right now actually because
I'm feeling hyped about it design I
don't know this is just an example so
now in theory based on my instructions
it should fill out this bar and so I
should press this nice nice nice save
changes let's go like this save changes
and it has it right here listed on the
front and it should also have the
ability to add an image so we are two
for two let's add this
screenshot of the Tropic Avi key let's
save the
changes and we have it right here listed
just like this look at that and so we
can go realtime chatbot app and it only
makes sense that we add the uh flux to
this this is awesome dude um oh I'm
fired up and so let's just let's do it
so we're going to open up another
repet which is this one right here and
I'm going to Fork it this is one we've
already set up so we're going to go to
we're going to go to deployments we're
going to grab this link right
here and I'm just going to go ahead and
paste this into cursor I think a better
way to do this would be to make a file
and the reason why is because the
composer is not very good at outputting
like text right so let's just copy all
this code and we can put it into a file
add file okay and then put uh backend.
py yeah
sure and then paste in this code right
here yeah so we're going to paste in
this back end right here cool and that
file oh where how so just press command
s to save and you can actually reference
the file so you can click at like put
the at sign and type the name of the
file nice nice nice okay so this it's
called backend py this is
mirroring the uh backend on a repet
project you can just say it's deployed
on the Ur like
URL okay it's deployed on the URL I want
to be able to use
flux to generate images within cards oh
no no no no I want to use flux to
generate an image
automatically every time I and I change
the card
or name a new card oh no no no I I every
time I create a card in the in a
list uh called
images nice I like it when
ever a new uh board is created this
should be uh a default list um that
starts out
on every board okay that starts out on
every board
um so when a card is
created within this list use
flux to generate an image and upload it
uh to card
details which will then be the
um thumbnail so I'll just okay run it Y
is that one deployed currently yes it is
okay it is done already it is done and
so then we would need to go to the
backend py and copy this and paste it
into the back end right well it didn't
make any changes to the back end py
because we can oh it didn't make any
yeah because our backend template
already has a flux endpoint like we set
it up with flux endpoint an open AI
endpoint and a few other endpoints for
most use cases the back end actually
won't need any changes it'll just need
the URL and hopefully it works Let's
test it out all right all right accept
save oh it added the images um that's
awesome that's awesome right so now we
can hit add a
card oh we need to hit to add a title
okay that's good um we can say um work
on art project let's see so now it
should be something related to art
project
oh I don't even know if I specified
based on the title um let's see but that
it can be all right so work on art
projects oh
wow nice and it is it's based on the uh
on the thing right like um play
basketball throw the
football off of a cliff
I want you to
completely uh
revamp uh the look of the site to match
the Roman
Empire
and oh wow it updated five six different
pages here now it's
done all right so now we're going to hit
accept all
we
have and it just does this right here
that's so cool
um hello o nice font um I wonder if the
tasks uses Roman
numerals oh oh no but it's a check box
never mind yeah and when I create a card
within that list it should use AI to
generate a description and the steps and
use flocks to generate an image yeah
sure oh you did chat with code base yeah
comeand shift enter I think I did yeah
okay okay good it's on
each okay
so that's fine let's test it let's test
it it's fine let's see um add a card um
create a Trello clone on
uh using repet and
Claud so we got a syntax
error that's good yeah we should put
this whole thing
into we got this
error this is so much faster faster this
is actually crazy how much faster this
is um I'm going to refresh this all
right so let's paste that in add
card oh my look it even added this
Trello board oh it added the image it's
not getting the maybe the anthropic will
probably take longer
so we'll
see yeah I think what makes me feel like
that's not going to work oh it did work
oh it worked let's go
that's crazy there is still an error um
warning each child in I'm not I don't
even care let's just throw it in like
that's easy okay all all features
worked all features worked but we just
got this error and I'll paste that in
add a new card here so create a uh
iPhone app and so we're going to add
this card and within three seconds it
should add an iPhone there we go and
that's freaking awesome
um and there you go you see that how it
switched from Blue to White that tells
me that it's in there uncategorized and
now let's test it see it works properly
subscribing to this channel will be the
best decision you've ever made do it now
5.0 / 5 (0 votes)