Coding 100% With AI | The Easiest Way to Use Cursor

Riley Brown
23 Aug 202427:20

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

00:00

🤖 AIツールを使ったウェブアプリ開発

この段落では、AIツールを使ってプログラミング知識なしにウェブアプリを作成する方法が紹介されています。特にCursorというAIツールは、ウェブサイトの外観や機能をテキストで指示することでコードを生成可能で、Repl.it(Repet)というツールと組み合わせることで、リアルタイムにウェブサイトの変更を確認・公開できるという利便性が強調されています。

05:05

🔗 SSHキーの生成とRepl.itへの接続

段落2では、Repl.it(Repet)へのSSHキーの生成と接続方法について説明されています。SSHキーを生成し、Repl.itのSSHキー設定に追加することで、ローカルのCursor環境とRepl.itを連携させる手順が詳述されています。

10:06

🔄 Firebaseとの連携とデータ管理

この段落では、FirebaseとRepl.itを接続してウェブアプリのデータ管理を行う方法が解説されています。Firebaseコンソールでのプロジェクト作成、ウェブアプリの作成、認証方法の設定、Firestoreデータベースの利用など、ウェブアプリのデータストアとしてFirebaseを活用する手順が紹介されています。

15:08

🎨 CursorのComposer機能を使ったデザイン改善

段落4では、CursorのComposer機能を使ってウェブアプリのデザインを改善する方法が説明されています。ComposerはAIによってコードの変更を提案し、ユーザーはそれらの変更をリアルタイムで確認・承認することができるとされています。

20:09

🖼️ AIによる画像生成とウェブアプリへの統合

この段落では、AIツールFluxを使ってカードに画像を自動生成し、ウェブアプリに統合する方法が紹介されています。新しいボードの作成やカードの追加など、特定の操作が行われるとAIが画像を生成し、それがウェブアプリに反映されるプロセスが説明されています。

25:09

🛠️ ウェブアプリの機能拡張とエラー処理

最後の段落では、ウェブアプリに新機能を追加したり、発生したエラーを処理する方法が解説されています。AIが生成したコードにエラーが含まれていた場合の対処法や、新機能の追加プロセスが詳述されています。

Mindmap

Keywords

💡AIツール

AIツールとは、人工知能を活用して特定のタスクを自動化するソフトウェアアプリケーションのことを指します。このビデオでは、AIツールを使ってコーディングを知らない人でもウェブアプリを作成することができると紹介されています。例えば、「AI tool for code generation」というフレーズがビデオ内で使用され、ウェブサイトの外観や機能をタイプするだけでコードを生成する機能が強調されています。

💡コード生成

コード生成とは、開発者がプログラムの構造や機能を記述するためのプロセスのことです。ビデオでは、AIがウェブサイトのデザインや機能を理解し、それに対応するコードを自動的に生成するプロセスが説明されています。例えば、「you just type what you want your website to look like feel like」という部分で、AIによるコード生成の利便性が強調されています。

💡ウェブアプリ

ウェブアプリとは、インターネット経由でアクセスし利用できるアプリケーションのことを指します。ビデオでは、AIツールを使ってゼロコーディングでウェブアプリを作成することが可能であると述べられています。ウェブアプリの例として、「this app right here on the left」がビデオ内で触れられています。

💡デプロイメント

デプロイメントとは、ソフトウェアやウェブアプリケーションを開発環境から運用環境に移し、公開するプロセスを指します。ビデオでは「the best tool for deploying websites」と言及され、Repetというツールがウェブサイトの効果的なデプロイメントに役立つと紹介されています。

💡リアルタイム

リアルタイムとは、即時にまたは遅延なく情報を処理または表示することを指します。ビデオでは、AIツールがリアルタイムでコードの変更を反映し、ウェブサイトの変更を即座に確認できると説明されています。例えば、「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」という部分でその機能が強調されています。

💡テンプレート

テンプレートとは、特定の目的や形式に従って事前に設計されたものを指し、これにより開発者は時間を節約できます。ビデオでは、「download the template that we created last week for free」というフレーズで、AIツールと連携して使用できるテンプレートが提供されていることが示されています。

💡SSHキー

SSHキーは、Secure Shell(SSH)で安全に通信するために使用される公開鍵と秘密鍵の組です。ビデオでは、「generate an SSH key」というフレーズでSSHキーの生成が説明されており、これはRepetとCursorを安全に接続するために必要であるとされています。

💡Firebase

Firebaseは、Googleが提供するモバイルアプリやウェブアプリの開発プラットフォームです。ビデオでは、Firebaseを使用してウェブアプリにデータを格納し、ユーザー認証を行う方法が紹介されています。例えば、「we're going to go to Firebase and uh we're going to go to the console」という部分でFirebaseの使用が説明されています。

💡Composer

Composerは、ビデオ内で触れられているAIツールの機能の一つで、開発者がより複雑なコード変更を一連のプロンプトで指示することができる機能です。例えば、「they can click the settings icon in the top right corner they can click on features or sorry beta beta features, and enable composer」という部分でComposerの活用方法が紹介されています。

💡Flux

Fluxは、ビデオ内でAI画像生成ツールとして紹介されています。このツールを使って、カードに関連する画像を自動生成することができます。例えば、「when a card is created within this list use flux to generate an image」というフレーズで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

play00:00

you can now take your idea for an app

play00:02

with zero coding experience using Ai and

play00:06

create a full web app these are the best

play00:09

two tools for code generation and for

play00:12

deployment to take your ideas and create

play00:16

a full web app so this app right here on

play00:18

the left is by far the best AI tool for

play00:21

code generation you just type what you

play00:23

want your website to look like feel like

play00:26

all the different features how to

play00:27

organize the data and it adds all the

play00:29

different files necessary to run the

play00:32

code so that it can run on the internet

play00:34

however it's really hard to deploy

play00:36

websites effectively however the best

play00:39

tool for deploying websites on the

play00:42

market right now and that makes it the

play00:43

easiest is repet so I use cursor to

play00:48

generate all the code and I connect it

play00:51

to repet so I can see it in real time if

play00:54

I were to ask for these changes right

play00:56

here I can press uh command shift enter

play00:59

and it will l literally begin to edit

play01:01

the code right and it says okay now it's

play01:03

going to look into script editor and

play01:05

it's looking at my instructions and now

play01:07

it's saying certainly I'll modify this

play01:09

and we can watch it I can press this

play01:11

control panel and we can see what it's

play01:14

doing so it's making all these different

play01:16

changes it just finished and here it

play01:18

says accept all notice how there's been

play01:21

no change over here now let's hit accept

play01:23

all save all look at that it completely

play01:26

changed the website right here on the

play01:29

right and it actually I think it did a

play01:34

decent job yes so obviously some of the

play01:37

formatting isn't great but I can say can

play01:40

you make the arrows right I don't want

play01:44

this like Arrow background right here

play01:46

can you make the arrows have no

play01:50

background color just put the arrows in

play01:56

white and now it's going back to town

play02:00

now we're just going to hit accept

play02:02

all and look at that right there now we

play02:05

have these change these changes right

play02:07

here and this is exactly what I was

play02:10

asking for right so I can click on this

play02:12

one right here and I can add some music

play02:16

here this is an app I'm making for my

play02:18

team can you have the buttons on the

play02:23

right

play02:25

sidebar match the color of the block

play02:30

instead of being only blue

play02:37

generating let's see if that works so in

play02:40

theory if we press this red one it

play02:41

should match yep and let's try the

play02:45

purple one

play02:46

here yep so in this video an is actually

play02:50

going to explain how to set up cursor to

play02:52

be fully synced with repet and the

play02:56

process seems a little weird at first I

play02:58

will admit but once you get it down it

play03:01

it takes like 3 or 4 minutes to just

play03:03

very quickly set up cursor to be fully

play03:05

synced with repet which allows you to

play03:08

download the template that we created

play03:10

last week for free and download it and

play03:13

so it has all the packages necessary to

play03:16

deploy on repet so that means if you use

play03:20

the template and then hook it up with

play03:21

cursor you can begin just using the

play03:25

English language to create websites and

play03:27

there's no copying and pasting involved

play03:29

just typing on the left window automatic

play03:31

syncing to edit the entire code base on

play03:35

repet and then you can deploy it

play03:36

straight to the internet and hook it up

play03:38

to whatever domain that you want in this

play03:40

video we made an AI clone of Trello and

play03:45

we added multiple AI features and we did

play03:49

it in about six or seven cursor prompts

play03:53

which uses Claude 3.5 Sonet it took 20

play03:56

minutes and I've still have never

play03:58

written a sing single line of code even

play04:01

though I've been making apps with code

play04:03

every single day for the past 48 days

play04:06

and so I'm really excited for this video

play04:08

okay so the first step is we are going

play04:10

to hit template

play04:12

one now we're going to use this template

play04:17

cursor number one and we are going to

play04:20

create a new project with our

play04:23

template now I will let you take it from

play04:25

here so we're going to open up cursor

play04:28

and now what now war in cursor click the

play04:31

terminal button at the bottom right so

play04:34

you've got this terminal opened up yep

play04:38

um and over here you're going to click

play04:39

command

play04:41

K and we are going to generate an SSH

play04:44

key which is Sally a password so what

play04:47

we're going to tell is generate SSH key

play04:50

for repet name it repet and copy the

play04:53

public key to the clipboard

play05:04

and submit yep

play05:09

submit and we can click on the

play05:12

terminals it just entered this likee

play05:15

here and we just click enter we run

play05:17

it and it's generating this public key

play05:21

we can so rally already did this so he

play05:24

can override it that's totally fine it's

play05:27

yes is fine yes is fine

play05:30

um and you can click

play05:32

enter so when when it says enter a

play05:35

passphrase I'm just going to press enter

play05:37

and then enter again right yeah you

play05:39

don't need to enter passphrase um and

play05:42

now you should have copied this SSH key

play05:44

to the clipboard now we it happens

play05:46

automat it happens

play05:48

automatically yeah it happens

play05:50

automatically now we search for ssh in

play05:53

graet we go to the Keys section in SSH

play05:57

and we can add a key

play06:00

um call it whatever you want and paste

play06:02

what what you just

play06:04

copied and we paste it in and we're just

play06:07

going to call this cursor two and now

play06:09

we're going to add SSH key MH and we're

play06:13

going to we're going to go to connect um

play06:16

ah in the SSH Tab and we're going to

play06:18

copy that shell command yep and now

play06:20

we're going to go back to

play06:22

cursor and we're going to click open

play06:24

with ssh in the middle of the screen mhm

play06:28

and we're going to paste

play06:30

the command we just

play06:31

copied and we're going to click on the

play06:34

add new SSH host right

play06:38

there and then we're going to paste the

play06:40

command

play06:41

again and click

play06:44

enter um and you can just click the

play06:47

first

play06:48

one click this

play06:52

yes and now in the bottom right click

play06:56

connect ah you want to continue

play07:00

continue

play07:03

yes nice so if you want to do this for

play07:05

another repl make sure you create a new

play07:08

host and paste your command from that

play07:11

drop l in and H add new host yeah add

play07:14

new host now we want to make sure we

play07:17

open the

play07:19

folder um okay open folder and this

play07:22

should be cursor number one yeah or the

play07:25

name of your project if you named it

play07:27

something else and we hit okay okay yeah

play07:31

all right nice nice nice let's go so in

play07:35

theory if we run this template which

play07:39

should be operational we just need to

play07:41

add our Firebase Keys which we can do

play07:43

really quickly so let's just go to

play07:47

Firebase and uh we're going to go to the

play07:51

console oh I'm so excited for this um

play07:55

I'm going to open in split view like

play07:58

this we're going to do is I'm going to

play08:01

create a project and we're going to call

play08:04

this uh cursor

play08:07

one and continue and we're going to

play08:10

enable and what we can do while this is

play08:13

loading is we can open up our secrets

play08:15

tab in repet which will so we've

play08:19

connected cursor to repet now we need to

play08:21

connect repet to the Firebase which

play08:23

stores all the data and allows people to

play08:25

sign in that cursor will uh since it can

play08:29

all the project files it'll know how to

play08:31

write code so that it stores things in

play08:33

the right place which is really cool so

play08:35

we can hit

play08:36

continue and we are going to create a

play08:39

web app like this and we are just going

play08:43

to uh type

play08:45

in um app

play08:48

44 doesn't matter what you put there um

play08:52

and then this will create an app and

play08:55

this is going to give us the tokens that

play08:56

we need to place here and so I'm going

play08:59

to quickly and you want to keep these

play09:02

secret

play09:08

and we can go like this and we can

play09:12

continue to console and we can add all

play09:17

the secrets and then what we're going to

play09:19

want to do is copy this Dev

play09:22

domain and then go through this process

play09:26

just follow along this will all make

play09:28

sense in a second so we're going to go

play09:29

to fir store database and all we need to

play09:31

do is create a database storage and

play09:34

authentication if you've been following

play09:36

along and creating apps with the

play09:38

template you've probably done this

play09:39

multiple times already we're creating a

play09:41

fir store database we need to do

play09:46

authentication get

play09:47

started first thing that I do is I'm

play09:50

just going to go to settings authorize

play09:51

domains add a domain we're adding this

play09:53

Dev URL domain so we can actually add we

play09:58

can sign in in this

play10:00

uh development environment now uh signin

play10:03

method we're going to hit Google enable

play10:05

and then just do the default email

play10:08

doesn't really

play10:11

matter then what we're going to do is

play10:14

last one build

play10:18

storage get

play10:20

started start in test mode always test

play10:22

mode so now that that's loading I'm just

play10:24

going to go ahead and refresh this go

play10:26

here okay so we can now open uh cursor

play10:31

so cursor it's FL graphlet by running on

play10:34

your own

play10:36

computer um but it has a lot more

play10:39

powerful AI features so why don't we

play10:42

just press command

play10:43

I command

play10:46

I Okay cool so this is your composer

play10:50

which is probably the most powerful

play10:52

cursor feature you need cursor Pro for

play10:54

this they can click the settings icon in

play10:57

the top right corner they can click um

play11:00

on features or sorry beta beta features

play11:04

and enable composer change the uh create

play11:09

new post page and make it look way

play11:17

cooler

play11:19

um and um

play11:23

modern we'll see what happens so and

play11:27

then you're going to do you hit command

play11:28

shift enter for this like to to run it

play11:31

with the full code base right yeah I

play11:34

think you can do that yeah I usually

play11:36

give it the exact files but like I feel

play11:39

like we can just give it the whole code

play11:41

base yeah when you get started I feel

play11:43

like it's you should do like I don't

play11:46

sometimes I don't know which files it

play11:47

needs to change exactly just give it the

play11:49

whole code base it'll figure it out it

play11:51

actually doesn't upload all the files

play11:53

it's really smart and first it checks

play11:55

which files it needs to upload from the

play11:58

codebase based on your prompt And So It

play12:01

Goes one by one in all the files sees

play12:03

which files it needs to upload and then

play12:04

only uses those and now wow we have we

play12:07

have something done um yeah and so here

play12:10

we can see that it it only changed the

play12:12

ad post right am I reading this right so

play12:14

it changed the adpost oh and I need to

play12:17

hit accept and so these are the ones

play12:18

that's going to change right here yes um

play12:21

and we can hit accept and I can hit

play12:24

accept and there you go you see it just

play12:27

changed it didn't change super

play12:28

drastically but like it's a lot cleaner

play12:30

like and we can just open this up full

play12:32

screen too I I want to I want this to be

play12:37

a

play12:38

Trello clone I want to create an app

play12:43

that is

play12:45

exactly like

play12:48

Trello that has

play12:51

boards lists and cards and

play12:56

categories which should be

play12:59

colored um

play13:02

dropdown

play13:04

and the

play13:06

default ones should be project and idea

play13:13

the

play13:14

user should be able to create

play13:19

more

play13:22

okay and then that should that be good

play13:24

you think yeah I think that should be

play13:27

good so we can actually click click on

play13:29

card and we can see what it's doing so

play13:31

it's creating a new file called card it

play13:32

already did that now it's going to

play13:34

create or a file called list it just

play13:37

created that now it's creating board.

play13:41

TSX it hasn't been saved how do you tell

play13:43

when it's done you go back to the the

play13:45

first tab in the composer where it says

play13:47

composer and it should like be done in

play13:50

terms of like you know um okay so it's

play13:53

done so we're going to accept all should

play13:54

I refresh this or should I just leave it

play13:57

yeah just accept and Save and it should

play13:59

refresh automatic

play14:01

also save all it's telling us to to do

play14:06

couple more things in the chat so let's

play14:08

follow its instructions okay yeah just

play14:11

say keep going and

play14:13

then um it'll make the changes and while

play14:16

we're making the changes anytime it says

play14:18

to install something the composer

play14:20

doesn't have access to the terminal or

play14:23

to install any packages so that's a a

play14:26

little um tricky part right so we want

play14:30

to make sure we can install things so

play14:33

whenever it says oh install this package

play14:36

um we want to go back to ret go to the

play14:40

Shell and ret so we're going to go to

play14:42

Shell and we're going to paste this in

play14:45

yeah do n um we have to do npm space i

play14:49

space this we're just trying to install

play14:52

this uh uh okay

play14:56

npm I this yeah

play15:00

okay so on normally it says to do mpm

play15:04

did it have it there or or no it didn't

play15:07

but we didn't tell the composer that we

play15:10

were working in uplet if we had probably

play15:13

tell us to do that yeah because I mean

play15:15

it is Claude and Claude always does that

play15:17

too so accept

play15:20

all oh wow create a new board so this is

play15:23

our board and so each board has a list

play15:26

let's say videos we can create Cod

play15:29

projects and then within coding projects

play15:31

we can do Trello right the app that

play15:34

we're working on right now Trello app at

play15:36

a card nice looks good um Trello app um

play15:42

maybe we want to make a notion app maybe

play15:45

want to make a real time chatbot

play15:49

app oh it's like super responsive I like

play15:53

it um so let's click on this let's see

play15:55

what happens wow we can add a

play15:57

description um

play15:59

description color we can change it to

play16:01

Blue let's see what that looks like

play16:03

category is an idea save

play16:06

changes okay so now we see that the

play16:08

Trello app is now blue and I don't see

play16:11

anything on the front so let's Okay so

play16:14

let's go ahead drag and drop too into

play16:17

videos oh no way wait uh maybe add a

play16:22

card in videos oh yeah yeah it doesn't

play16:26

stay so now let's just tell it

play16:28

everything that's that went wrong so

play16:31

board is looking

play16:33

good but can't drag the cards to a new

play16:39

location also can you add due

play16:44

dates in the card card details here it's

play16:48

done and we're going to hit accept and

play16:51

save okay so we're going to create a new

play16:54

board interesting okay did you save did

play16:57

you save

play16:59

files oh so if you click save while

play17:02

you're in a current file it only saved

play17:06

the card file so click on composer and

play17:08

click on oh I didn't hit accept all okay

play17:11

we're learning how to use it okay I need

play17:13

to press accept all and there it did it

play17:16

changed it right in front of us um and

play17:20

so now we can actually go back to our

play17:23

original board which is Riley and an

play17:26

Board of greatness there we go we see

play17:28

idea right there listed and now we can

play17:30

actually select a due date I want to add

play17:34

image uploads I want to add image

play17:36

uploads to the card display as a

play17:42

thumb nail for the

play17:46

card if you

play17:49

upload many images choose the first one

play17:57

uploaded um

play17:59

you

play18:00

should also be able to upload videos all

play18:05

right let's

play18:06

see this is insane this is going to

play18:09

change my life dude this is this is trip

play18:12

three times as fast

play18:14

probably um once I really get it once I

play18:16

get it down yeah yeah I mean it's

play18:19

changing the code directly so I ones yep

play18:23

and I think we are set now let's hit

play18:26

accept all save all okay look at this

play18:30

now in real time right here it's just

play18:33

done

play18:35

tasks cursor front

play18:39

end AI features which we should just add

play18:43

pretty soon right now actually because

play18:45

I'm feeling hyped about it design I

play18:49

don't know this is just an example so

play18:50

now in theory based on my instructions

play18:53

it should fill out this bar and so I

play18:55

should press this nice nice nice save

play18:59

changes let's go like this save changes

play19:01

and it has it right here listed on the

play19:04

front and it should also have the

play19:06

ability to add an image so we are two

play19:09

for two let's add this

play19:12

screenshot of the Tropic Avi key let's

play19:16

save the

play19:17

changes and we have it right here listed

play19:21

just like this look at that and so we

play19:24

can go realtime chatbot app and it only

play19:26

makes sense that we add the uh flux to

play19:29

this this is awesome dude um oh I'm

play19:34

fired up and so let's just let's do it

play19:37

so we're going to open up another

play19:41

repet which is this one right here and

play19:44

I'm going to Fork it this is one we've

play19:46

already set up so we're going to go to

play19:48

we're going to go to deployments we're

play19:51

going to grab this link right

play19:53

here and I'm just going to go ahead and

play19:55

paste this into cursor I think a better

play19:58

way to do this would be to make a file

play20:01

and the reason why is because the

play20:03

composer is not very good at outputting

play20:06

like text right so let's just copy all

play20:09

this code and we can put it into a file

play20:11

add file okay and then put uh backend.

play20:17

py yeah

play20:19

sure and then paste in this code right

play20:23

here yeah so we're going to paste in

play20:25

this back end right here cool and that

play20:29

file oh where how so just press command

play20:33

s to save and you can actually reference

play20:35

the file so you can click at like put

play20:38

the at sign and type the name of the

play20:42

file nice nice nice okay so this it's

play20:46

called backend py this is

play20:49

mirroring the uh backend on a repet

play20:55

project you can just say it's deployed

play20:58

on the Ur like

play21:00

URL okay it's deployed on the URL I want

play21:06

to be able to use

play21:10

flux to generate images within cards oh

play21:15

no no no no I want to use flux to

play21:19

generate an image

play21:22

automatically every time I and I change

play21:28

the card

play21:30

or name a new card oh no no no I I every

play21:32

time I create a card in the in a

play21:38

list uh called

play21:42

images nice I like it when

play21:45

ever a new uh board is created this

play21:51

should be uh a default list um that

play21:57

starts out

play21:59

on every board okay that starts out on

play22:02

every board

play22:05

um so when a card is

play22:10

created within this list use

play22:15

flux to generate an image and upload it

play22:21

uh to card

play22:24

details which will then be the

play22:29

um thumbnail so I'll just okay run it Y

play22:33

is that one deployed currently yes it is

play22:37

okay it is done already it is done and

play22:40

so then we would need to go to the

play22:42

backend py and copy this and paste it

play22:44

into the back end right well it didn't

play22:47

make any changes to the back end py

play22:48

because we can oh it didn't make any

play22:50

yeah because our backend template

play22:51

already has a flux endpoint like we set

play22:54

it up with flux endpoint an open AI

play22:56

endpoint and a few other endpoints for

play22:58

most use cases the back end actually

play23:00

won't need any changes it'll just need

play23:02

the URL and hopefully it works Let's

play23:05

test it out all right all right accept

play23:08

save oh it added the images um that's

play23:10

awesome that's awesome right so now we

play23:12

can hit add a

play23:17

card oh we need to hit to add a title

play23:20

okay that's good um we can say um work

play23:23

on art project let's see so now it

play23:26

should be something related to art

play23:28

project

play23:29

oh I don't even know if I specified

play23:30

based on the title um let's see but that

play23:34

it can be all right so work on art

play23:37

projects oh

play23:39

wow nice and it is it's based on the uh

play23:43

on the thing right like um play

play23:52

basketball throw the

play23:55

football off of a cliff

play24:06

I want you to

play24:08

completely uh

play24:10

revamp uh the look of the site to match

play24:16

the Roman

play24:18

Empire

play24:20

and oh wow it updated five six different

play24:23

pages here now it's

play24:25

done all right so now we're going to hit

play24:27

accept all

play24:30

we

play24:31

have and it just does this right here

play24:34

that's so cool

play24:37

um hello o nice font um I wonder if the

play24:41

tasks uses Roman

play24:43

numerals oh oh no but it's a check box

play24:46

never mind yeah and when I create a card

play24:50

within that list it should use AI to

play24:56

generate a description and the steps and

play25:02

use flocks to generate an image yeah

play25:09

sure oh you did chat with code base yeah

play25:12

comeand shift enter I think I did yeah

play25:15

okay okay good it's on

play25:18

each okay

play25:21

so that's fine let's test it let's test

play25:24

it it's fine let's see um add a card um

play25:28

create a Trello clone on

play25:33

uh using repet and

play25:40

Claud so we got a syntax

play25:43

error that's good yeah we should put

play25:47

this whole thing

play25:51

into we got this

play25:55

error this is so much faster faster this

play25:58

is actually crazy how much faster this

play26:01

is um I'm going to refresh this all

play26:03

right so let's paste that in add

play26:07

card oh my look it even added this

play26:10

Trello board oh it added the image it's

play26:13

not getting the maybe the anthropic will

play26:15

probably take longer

play26:17

so we'll

play26:20

see yeah I think what makes me feel like

play26:24

that's not going to work oh it did work

play26:26

oh it worked let's go

play26:29

that's crazy there is still an error um

play26:32

warning each child in I'm not I don't

play26:34

even care let's just throw it in like

play26:37

that's easy okay all all features

play26:41

worked all features worked but we just

play26:46

got this error and I'll paste that in

play26:49

add a new card here so create a uh

play26:54

iPhone app and so we're going to add

play26:57

this card and within three seconds it

play26:59

should add an iPhone there we go and

play27:01

that's freaking awesome

play27:04

um and there you go you see that how it

play27:07

switched from Blue to White that tells

play27:09

me that it's in there uncategorized and

play27:12

now let's test it see it works properly

play27:16

subscribing to this channel will be the

play27:17

best decision you've ever made do it now

Rate This

5.0 / 5 (0 votes)

Related Tags
AI開発ウェブアプリコード生成デプロイメントツール比較リアルタイム編集SSHキーFirebase統合TrelloクローンAI機能
Do you need a summary in English?