How I code 159% Faster using AI (Cursor + Sonnet 3.5)

Summary

このビデオでは、Visual Studio Codeに基づいてAI機能を内蔵した新しいコードエディター「カーソル」を紹介しています。カーソルはプログラミングを大幅に高速化できると主張しており、ビデオではカーソルを使用してアプリケーションを構築し、そのプロセスが従来の方法よりも2.5倍高速であることを実証しています。カーソルのAI機能は、コードの自動生成や改良を通じて開発者の生産性を高め、特にプログラミング初心者や経験豊富な開発者双方にとって有益であると示されています。

Takeaways

• 😀 カーソルはVisual Studio Codeに基づいてAI機能を直接組み込んだ新しいコードエディターです。
• 🔍 カーソルを使用することで、既に数年のコーディング経験があるユーザーでもコーディング速度が2.5倍速くなることがわかります。
• 💻 カーソルをダウンロードするにはcursor.comにアクセスし、インストールボタンをクリックします。
• 🆓 無料で使用することも可能ですが、プロプラン（月額20ドル）を利用することで追加機能や優れたモデルの使用が可能になります。
• ⌨️ カーソルでは、コードをハイライトしてCtrl+Kを押すことでAIにコードの変更を指示することができます。
• 🗂️ Ctrl+Lを押すことでチャットウィンドウを呼び出し、プロジェクト全体のファイルや特定のファイルを参照して変更を依頼できます。
• 🛠️ AIによるコードの変更は「適用」ボタンをクリックすることで直接コードに反映させることができます。
• 🖼️ カーソルを利用して、ユーザーが連絡先カードに画像をアップロードできる機能を実装しました。
• 🔄 カーソルには「コンポーザー」機能があり、複数のファイルにわたる変更を並行して迅速に行うことができますが、まだベータ段階です。
• 🔍 カーソルはコードベースをインデックス化するため、特定の変数や関数の設置場所を知るためのインテリジェントな検索が可能です。
• 🎨 カーソルには画像からコードを生成する機能もあり、デザインのスクリーンショットからコードを自動生成することができます。

Q & A

カーソルAはどのようなコードエディターですか？

カーソルAはVisual Studio Codeに基づいて作られたコードエディターで、AI機能が直接組み込まれており、コーディングをはるかに高速化できます。

カーソルAを使用することで、コーディング速度はどのくらい向上するのですか？

ビデオのデモでは、経験豊富な開発者であってもカーソルAを使用することで、コーディング速度が2.5倍向上することが示されています。

カーソルAをダウンロードするにはどうすればいいですか？

カーソルAはcursor.comからダウンロードしてインストールできます。

カーソルAのProプランの月額料金はいくらですか？

カーソルAのProプランは月額20ドルです。

カーソルAのAI機能を使用するにはどうすればいいですか？

カーソルAを開き、コードを書くか、または特定のコードを選択してAIに指示を出して機能を使用できます。

カーソルAでコードを変更するにはどのようなショートカットを使用しますか？

コードを変更するにはControl+K、チャットウィンドウを開くにはControl+Lを使用します。

カーソルAはどのようにしてプロジェクト内のファイルを参照しますか？

カーソルAはプロジェクトを開くと、その中のファイルをインデックス化し、変更を加える際に素早く参照できます。

プロファイル画像を連絡先カードに追加する機能をどのように追加しましたか？

カーソルAのAI機能を利用して、画像アップロード機能を複数ファイルにまたがって追加しました。

カーソルAのオートコンプリート機能はどのように役立ちますか？

カーソルAのオートコンプリート機能は、TailwindやReactなどのフレームワークに精通しており、開発者がコードを入力する際にクラス名や関数を自動的に補完してくれます。

カーソルAでコードベースを検索するにはどうすればいいですか？

カーソルAでは、特定の変数や関数の設定場所を検索するためにサイドバーから指示を出して、コードベース全体をインテリジェントに検索できます。

Outlines

00:00

💻 カーソルコードエディターの紹介

カーソルはVisual Studio CodeをベースにAI機能を内蔵した新しいコードエディターです。AIの助けを借りることでコーディングが大幅に高速化されます。ダウンロードはcursor.comから行えますが、機能をフル活用するには月額20ドルのプロプランを推奨します。カーソルはVS Codeと同様のインターフェースを持ち、プラグインのインポートも可能です。AIはコードを理解し、特定の変更を求められた場合にコードを修正します。また、コードベースをインデックス作成し、変更を加えるファイルを選択することができます。

05:03

🔧 カーソルのAI機能の活用方法

カーソルのAI機能は、コードの特定部分をハイライトしてControl+Kを押すことで呼び出すことができます。AIは指示に基づいてコードを修正し、変更をレビューしてから適用することができます。さらに強力な機能として、Control+Lを押すことでチャットウィンドウを呼び出し、コードベースを理解した状態で変更を要求することができます。この機能により、複数のファイルにまたがる変更や大きな機能追加が簡単に行えます。

10:05

🖼️ 画像アップロード機能の追加

ビデオでは、ユーザーが連絡先カードに画像をアップロードできる機能を追加するプロセスが説明されています。カーソルのAIは、サーバーサイドの変更、ファイルの検証、アップロード処理など、必要な変更を自動的にコードに記述します。また、Google Cloud Storageを使用して画像を保存し、データベースに画像URLを追加する処理も含まれています。

15:05

🛠️ コードのリファクタリングと機能追加

カーソルの「Composer」機能を使用して、コードを複数のファイルに分割し、整理することができます。ただし、この機能はベータ版であり、エラーが発生する可能性があるため注意が必要です。また、カーソルはTailwind CSSやReactなどのフレームワークに精通しており、自動補完機能を通じてコーディングを支援します。

20:08

🖌️ デザインからコード生成

カーソルはスクリーンショットからコードを生成する機能も持ち、デザインの自動変換をサポートしています。これはFigmaなどのデザインツールからのコード出力機能とは異なり、スクリーンショットを元にAIがコードを生成します。この機能により、コーディングプロセスをスピードアップさせることができます。

25:10

🔎 カーソルの高度な検索機能

カーソルはコードベース内をインデックス化し、特定の変数や関数の場所を知るための高度な検索機能を提供しています。また、AIのオートコンプリート機能は、Tailwind CSSのクラス名など、コーディング中に次の入力を予測してタブを押すことでコードを迅速に記述できます。

Keywords

💡カーソルA

カーソルAは、Visual Studio CodeをベースにAI機能を直接組み込んだ新しいコードエディターです。ビデオでは、カーソルAを使用することでコーディング速度が大幅に向上することが示されています。特に、ビデオの作成者が経験豊富なプログラマーであっても、カーソルAを使用することで2.5倍速くコーディングができたと述べています。

💡AI機能

AI機能とは、カーソルAエディターに組み込まれている人工知能の機能を指します。ビデオでは、このAI機能がコードの自動生成や改良を支援し、開発者の作業を効率化する重要な役割を果たしていると説明されています。

💡プログラミング速度向上

プログラミング速度向上とは、開発者がコードを書く速度やプロジェクトを進める速度を高めることを指します。ビデオでは、カーソルAのAI機能が既存の知識やGoogleでの検索とは比べて、開発者のコーディング速度を2.5倍速くすることが証明されています。

💡ダウンロード

ダウンロードとは、ソフトウェアやデータなどのデジタルコンテンツをリモートサーバーからローカルコンピュータに取得する行為を指します。ビデオでは、カーソルAをダウンロードして利用する方法が紹介されており、ダウンロード後、Visual Studio Codeに慣れているユーザーにとって馴染みやすいインターフェースであることが強調されています。

💡プロプラン

プロプランとは、カーソルAの有料版サブスクリプションサービスを指します。ビデオでは、プロプランの月額20ドルのオプションが推奨されており、追加機能や高精度なAIモデルの使用権が含まれていると説明されています。

💡コードベース

コードベースとは、特定のソフトウェアプロジェクトの全コードの集合体を指します。ビデオでは、カーソルAがプロジェクトを開くとコードベースをインデックス化し、AIが迅速に参照できるようにすることで、コードの変更や機能追加が効率化されると述べています。

💡マルチファイル操作

マルチファイル操作とは、複数のファイルに対して同時に操作を行うことを指します。ビデオでは、カーソルAが1つのファイルだけでなく、複数のファイルに対しても変更を加える機能を持っていると紹介されており、大きな機能追加やコードのリファクタリングにおいて非常に役立つとされています。

💡オートコンプリート

オートコンプリートとは、入力を補助してコードの記述を加速させる機能です。ビデオでは、カーソルAがTailwind CSSやReactなどのフレームワークに熟知しているため、開発者がクラス名をタイプする際にオートコンプリートを利用して効率的にコーディングを行うことができると説明されています。

💡コンポーザー

コンポーザーとは、カーソルAの機能の一つで、複数のファイルに対して並行して変更を行うことができます。ビデオでは、コンポーザーが新しいファイルを作成し、コードのリファクタリングを支援する力強いツールであると紹介されていますが、ベータ版であり、完全ではない部分もあると同時に触れています。

💡画像アップロード機能

画像アップロード機能とは、ユーザーがプロファイルやカードに画像を追加できる機能を指します。ビデオでは、カーソルAのAIがこの機能を実装するコードを生成し、ユーザーが連絡先カードに画像をアップロードして共有できるようにする大きな機能追加の例として説明されています。

Highlights

介绍了Cursor A，一个基于Visual Studio Code的新型代码编辑器，内置AI功能，能显著提高编码速度。

与仅使用传统编码知识和Google搜索相比，Cursor A使编码速度提高了2.5倍。

Cursor A可以从cursor.com下载，界面与Visual Studio Code相似，易于上手。

Cursor A提供免费使用，也提供每月20美元的Pro计划，包含更多高级功能。

演示了如何使用Cursor A迭代开发一个通过二维码交换联系信息的应用。

展示了Cursor A的AI功能，如使用Control+K命令来改进代码。

通过Control+L命令，可以召唤聊天窗口，进行更复杂的代码修改请求。

Cursor A能够理解代码库，提供基于当前文件的上下文来优化代码。

展示了如何通过聊天窗口请求Cursor A进行代码更改，包括界面和功能上的改进。

讨论了Cursor A的撤销功能，允许开发者回退到编辑前的状态。

展示了如何使用Cursor A添加新功能，如上传图片到联系卡片。

介绍了Cursor A的Composer功能，用于处理多文件交互和重构代码。

讨论了Composer功能的局限性，以及在实际使用中可能遇到的问题。

展示了如何使用Cursor A的图像识别功能来生成代码。

介绍了Cursor A的自动补全功能，能够预测并补全代码。

展示了如何使用Cursor A搜索整个代码库，以找到特定功能的实现位置。

总结了使用Cursor A可以显著提高编码速度，并鼓励观众提出问题以制作更多相关视频。

Transcripts

today we're taking a look at cursor a

new code editor that is based on Visual

Studio code but has AI features built

directly into it which can help you code

much much faster in fact in my last

video I built the same app Twice first

using cursor and then just using my own

knowledge and what I could find on

Google and I found that cursor actually

made me 2 and a half times faster and

this is as someone who's had many years

of coding experience so it can really

speed you up so let's dive into what's

different about cursor and how you can

actually use it first of all to download

cursor you're going to go to cursor.

comom and there's a button you can

download it install it again it's pretty

much like Visual Studio code with some

additional features so if you've used vs

code you're going to feel right at home

now you can use it for free to some

degree and you can also bring API keys

from other services like open AI or

anthropic but I highly recommend the $20

a month Pro Plan because you get some

additional features and you get pretty

much limited usage of some of the best

models like Claude Sonet 3.5 and you'll

quickly see your return on investment

with that even if you're already using

AI like chat GPT to code because this

really is much faster so when you first

open this up it's going to look pretty

familiar if you've used VSS code before

and you're able to just write code here

you're able to set your different theme

and you can actually import some of the

plugins and other things that you would

have in vs code so they've designed it

to be a pretty smooth transition to

demonstrate how cursor works I'm I'm

going to be iterating on the application

that I built in my last video which is

called quiron or QR contact and it's

essentially a way to exchange contact

information quickly through a QR code

I'm going to be adding a new feature

here which is going to allow us to have

profile pictures that you can associate

with your different contact cards and

we're going to use cursor to help

actually write most of the code for us

now there's a few different ways in

which AI is baked into this and the

first one I'll show is the command or

contrl k where you can highlight some

code and then if you press control K uh

you're going to be able to write some

instructions for the AI to iterate on

that code or to take that code into

account and do something that you want

it to do so in here we can for example

highlight this code which represents

this delete button and let's just say we

want to add some more padding to it add

more padding to this

button okay and it's going to go through

it's going to make some adjustments

right so you can see here that it

removed some code it added some code

coding effectively becomes like

reviewing pull requests from the AI so

we can accept that change and then we

will see that the trash icon has moved

now the cool thing with cursor is we can

actually undo these changes so if I

press contrl Z it's going to go back to

that edited State and I can kind of

review my code again I can just go back

to the code that I previously had and

just ignore the changes that it made so

control K can be a good way to make

these targeted sort of precise little

changes but the most powerful feature

that I like to use most of the time is

control or command L and pressing

control L is going to summon this chat

window that you see on the right and I

like to think of this in many ways like

chat GPT with a lot of additional

benefits the cool thing about cursor is

it already knows your code base when you

open a project in cursor it's going to

index all of the files that you have so

that it can quickly reference them when

you are making changes but you also have

control over which files you want to

reference when you're asking it for

changes that's going to make it so that

it doesn't just search the entire code

base and get confused by having too much

context you can actually hone in on

specific files that you want to change

and the context that you want it to use

when it's doing something that you want

it to do so let me just give an example

of this right when I'm making this

change here by default when when you

open up that chat window it's going to

reference the file that you have opened

and you will see it down here so card

list now let's say we want to make a

change to this card list where we want

the QR code to appear to the left and

then we want the title and the

description to be on the right of that

instead of this kind of vertical thing

so we can go in here and we'll just

describe what changes we actually want

now as I think through the design here

and what I actually want I'm realizing I

don't know where I want this trash icon

to be but let's actually change it for a

menu icon you know like the little three

dots that you can click and then we'll

have a delete item inside of that menu

so let's just go ahead and add it to

this code we can actually request

multiple changes in this chat okay now

when we're ready it's going to again use

the context of this card and we'll go

ahead and ask it for those changes okay

so it's written some code for us I am

using Claude Sonet 3.5 here which I've

found to be the best model for coding as

of right now this is middle of August 24

I'm sure new models will come out but

this has been a real game changer

honestly um so now we have this code

that it's written if you generated

something like this with Chad GPT you

would be spending your time replacing

these existing code portions with the

code that you have so you'd still have

to spend a lot of time taking the

changes that it made and integrating

them in your code but with cursor we

have this apply button which is going to

go ahead and apply all of those changes

directly into our code so this way we

can review the changes that it made and

we can also just go ahead and accept

them and see what this looks like and

honestly that looks pretty good and look

at that uh it's pretty much done exactly

what we want it's replaced the trash

with this little menu and we have the QR

code on the left descriptions so this

looks all good one issue I do see is

that when I click onto this menu and

when I click away the menu doesn't

disappear so we're just going to go back

to cursor and we're going to ask the AI

to iterate on that I usually try to say

something like this looks good so that

it doesn't go and try to change a bunch

of code but then I'll add the additional

code that I want changed so we're just

going to keep it going in this

conversation because the change that we

want is related to the changes that it's

made so I'll just say that looks great

but when I click away from the menu when

it is open it doesn't disappear can you

add some clickaway functionality to make

it close this can be a good way to build

a feature pretty much just in the chat

box where you have an idea in mind you

ask for the initial request you see what

the changes look like and then you just

iterate on that in that same chat until

you pretty much get to a complete

feature sometimes you'll want to start

over in which case you can just close

this chat and open a new one and then

you'll have fresh context it's like

opening a new conversation in chat GPT

okay so it's written some code for us

we'll go ahead and apply those

changes all right it's using a use

effect here for the click

away all right now let's test those

changes now if I click here click away

Perfect all right that's exactly what we

wanted great so we've made some small

changes to this one file but can we go

beyond that how do we change multiple

files or add really big features well

this chat window is capable of a lot

more than just working on one file we

can actually tag different files and ask

it to change those files or just use

them as references so that it knows how

to change the file that you're on so to

demonstrate this let's take a pretty big

feature we're going to want to allow

users to upload images that they can use

as part of their cards so that when they

share this contact information you can

see the picture of the person that's

actually sharing it but that's going to

involve a lot of different pieces right

we're going to need to change the

configuration page we're going to need

to validate the files need to send it to

the server the server is going to have

to upload it to some kind of file

storage bucket and verify that you know

it's an image and it's not too big we're

going to have some security features

there's a lot of different factors that

are at play here but I want to show the

power of cursor and how we can really

quickly make a lot of those changes and

they're not going to be perfect but

they're going to get you like 80 % of

the way there and then if you know how

to code already you're going to be able

to make up that last 20% very quickly

and usually it'll be just by asking

cursor to change some things again so

let's go ahead and make a request to

modify multiple files to add this pretty

big feature all right so let's take a

look at this request that I wrote up we

want to add the ability for users to add

images to their contact card to make

this happen we'll need to add a button

to this page which is the configuration

page page that allows them to select an

image to upload then when the user saves

the card we will send that file to the

server which will save it to a storage

bucket and add the URL of the image to

the card before saving it in the

database actually I'm going to add here

to specify which storage bucket I'm

talking about so that it can write the

code for that as well we will be

using gcp uh

storage okay we'll need to modify

this file to add the upload feature the

communication should happen through the

serom JS file that I have to ensure that

we attach the user token when we're

making that request and we'll also need

to modify the server side of things to

support this new functionality so let's

go ahead and make that request now it's

going to write code for all of these

different files and we'll just go file

by file and be able to apply it let's

take a look at the changes that it made

so first of all we're going to edit this

configuration page okay sure I'll just

apply all the changes I'm just going to

trust it for the time being and if

something goes wrong I'll just roll

forward and we'll make changes from

there so now we'll go over to server com

we'll we'll make changes there okay that

looks

fine and then we're going to go to our

server and we got a bunch of changes in

here as well okay now we're going to use

molter as a new library we're going to

use Google Cloud Storage that sounds

good and here's a bunch of code that it

wrote to actually upload that file and

then use it we'll review all of this

code to make sure it's doing this in a

secure way so it recognizes that we're

going to need these two new libraries so

I can actually just copy this and run it

in my server we're going to install

those two

libraries looks

good

okay so we'll switch over

here let's try adding a new contact

all right now look at that we got a

button here and as soon as I click it

it's letting me select an image so let's

go ahead and I don't know choose this

one okay well it's rendering something

for me in the UI here now that's that's

not necessarily uploaded yet we haven't

tried to save it but you can see that we

already have this functioning kind of

image upload where I can select the file

and uh it's going to display here now

before I click save to upload this I am

actually going to review the code

because I don't want it to just go to

some random bucket I want it to go to a

bucket that I specify and that I have

set up for this so let's take a look at

how that code works okay I'm just going

to press undo real quick so that I can

see the changes and this is going to

highlight for me when that image upload

H happens okay so the relevant changes

are right here in handle submit we're

going to go ahead and make a request

with the card ID and the image and we're

going to get the image URL out of that

and then we'll call the API to save the

card I think that's that's very

reasonable um so again just control

enter you're able to accept all of the

changes or you're able to go line by

line and then make changes as you wish

let's see what bucket it's trying to use

and then we'll make sure that it's

properly set up in Google Cloud okay so

it looks like it's looking for the

bucket that we have specified in our

environmental variables I think that's

perfectly reasonable okay so I'm going

to go ahead and add this to my EnV file

so that we can properly upload to the

bucket that I want okay I've got the

bucket set up as far as I can tell so

let's see what happens when I try to

save this with image let's call it right

saving seems take a little while and

then we got an error okay um take a look

here all right so right now it looks

like it's trying to connect to the

database but it crashes so let's try to

figure out what's going on here now

again I'm going to just iterate on the

thing that happened before so I'm

getting this error and I kind of have a

clue as to what might be happening uh

but let's go ahead and ask the AI to

troubleshoot it for us all right this

seems pretty good but I get this error

uh let's see do we need some additional

changes okay eror suggests DB object is

undefined all right updated version of

index JS let's check it out let's see

what changes it

made okay down here well first of all

it's going to try to catch that error

and then error updating the URL and here

um looks like update image card okay so

this method doesn't look very clean

because we actually have a database file

so let's ask it to just use that instead

I'm going to just press contrl Z to

remove those changes and keep the last

ones and then we're going to ask it to

use our database file and update that as

necessary I see the problem we should

use dbj to handle database interactions

let's change the server and the DB

file all right so we'll go here apply

some changes there we go it added a new

method for us which is going to be to

update the

card and then back to index.js we'll go

ahead and apply these changes as

well here we go now it's going to

actually use database connection

properly all right let's try to save

again there we go it actually saved this

time and if we look at this it logged

our card it says with image and then it

has the image URL that should be in the

database

amazing so if we go back and then we go

to the with image card um we don't yet

see it so let's keep iterating we'll

keep adjusting this so that it actually

shows the image I'm pretty confident

that it saved it it just needs needs to

render it when we first open the card at

this point the chat on the right is

getting a little long and I think I'm

going to be better off just starting a

new conversation with the AI and kind of

explaining some of the context that I

set because I'm just going to want

different set of files to be changed and

I don't need it to get confused by all

these previous changes that it's been

making so we'll start a new chat and

we'll go back to this configure contact

details so here I'm basically saying

what is currently happening and what I

want to happen and I'm allowing it to

sort of figure out what changes it needs

to make so I'm not overprescribing a

solution because I'm not going to spend

too much time thinking about it but if

it struggles with this then I will get

into more details all right here's the

changes we go ahead and

apply and it looks like pretty straight

forward essentially when we load the

card yeah we're just going to use the

image if it's already there and that's

that's

great all right we'll accept the

change now when we go in here we see

clippy perfect all right and it was that

smooth in what 10 15 minutes we added

the ability to upload images retrieve

them as needed and you know that

probably would have taken a lot more

time without the help of AI so now let's

just clean this up a little bit and

we'll show this near the top instead of

kind of in the middle here all right now

it's going to move some things around

for us we'll we'll apply these

changes all right there we go that's

looking a little bit

better we can change profile picture

let's Let's uh let's use something

else all

right save okay it's saved let's see if

it comes up again yep we got our new

picture and if we look over here this is

our storage

bucket we can see those images that got

uploaded so this sidebar is really how I

do a lot of the coding and it's really

the Workhorse for me but there are some

other features which I find really

beneficial as well so now that we've

made all of these Chang this file is

getting a little bit too large and I

want to refactor it into something more

manageable and because I'm going to be

creating new files I'm going to show you

one more feature that cursor has which

is uh one of the more powerful newer

features and that's called the composer

now the composer is really designed for

doing all of these multifile

interactions and sometimes it gets

overwhelming and confusing because you

can't as clearly see the changes and

revert them but in this sort of

situation it can be a really quick way

to create all of these new files and

keep things organized to activate the

composer you might have to go to file

preferences cursor settings and then in

the beta section it is this multic

composer so we'll go ahead and open it

using control shift I and let's ask it

to refactor some things for us the cool

thing about the composer is that it

works on all of these files separately

but in parallel so it's actually faster

than going one by one and changing these

files and it's actually creating new

files for me which is going to be really

useful okay so it's taking out a bunch

of these sections making them into new

files and we can kind of compare the

differences Let's uh let's be bold and

just accept all and see how it goes all

right we'll close

that so now we have all these additional

files so contact d detail item contact

detail form let's go ahead and switch

over and it looks like it left out a lot

of these different dependencies so you

know the composer is still a work in

progress let's uh let's open it back up

and give it some feedback okay looks

like it's applying some changes to those

files well I'll be honest this didn't

work as well as I expected and I feel

like it's going to be pretty difficult

for me to fix that form and know what

context it's working with so while the

composer is a powerful way and I expect

this is going to be the best way to work

with cursor in the future I think right

now it's at a point where it's a little

difficult to tell what it's going to

change and how it's going to change it

like the scope is too large that when it

makes errors like this it's really

difficult to roll things back so um you

know the composer is still in beta we're

going to go ahead and undo

those changes so I went ahead and just

contrl z i undid those changes now we

got some new files I'm going to delete

those I think it's just that the scope

of the changes it tries to make can be

so large that some wires get crossed and

some of the models just don't keep up

with it just yet and that's why it's in

beta I mean they're still developing

this feature so I'm going to go ahead

and ask it to refactor things for me in

the sidebar and we'll keep it to

something a little more manageable let's

just move the image upload stuff in to a

separate file and then we'll reference

it here let's call the file profile

picture instead all right and then

here's how

we okay great so now when we go here it

still works as

expected save the changes okay that all

looks good when I open it it loads the

correct file so that refactor was a

little bit smoother and this is the cool

thing is that you know when you're doing

a refactor man manually you're going to

have to go in and change all these

different values but AI can really

accelerate that so you can actually like

you start off with Messy code because

you have ai write all this but you can

also get AI to refactor it so you can

make things cleaner and much more

organized so at this point we've added

the ability to upload these pictures and

we can see it during this configuration

page but when we go to the preview the

picture is not there and this could use

a little bit more polishing so I want to

show you another cursor feature which I

really like like and that's the ability

to use images you can actually take

screenshots of a design for example and

have cursor build out what it sees in

the image so I have here an outline of

what I want this card to look like and

this is kind of a rough draft and keep

in mind that cursor is not going to be

perfect about this but it can be a

really great way to get started so if

you're working on a project and a

designer sends you you know a figma file

you can take a screenshot and then just

generate code out of that I know figma

has some code exporting features but

they just never seem to work for me so I

found this to be a more effective

approach anyhow the way that I like to

do this is to just take a screenshot of

the

design and then we'll flip over back

into cursor I'm on the contact preview

card here and I'm going to go ahead and

just give it this design and say let's

make I'll just give it a hint of where

that data is located so let's give this

a try all right we got a bunch of

changes we'll flip back

over to the

browser and let's see what the preview

looks like well it looks mostly correct

except that the it's it's full width so

we just need to control the width let's

say I don't know 400

pixels okay and then we kind of want to

center it so let's see if we can MX Auto

look at that this is this is another

powerful feature of course that it auto

suggests and now it's saying okay so

there we go that's looking a lot closer

to what I wanted maybe we can also give

it a Max height let's add a little

border nice and by the way I don't know

if you noticed that but cursor just

autoc completed a lot of that for me so

I just typed in B and automatically it

is suggesting border border gray rounded

large Shadow large so I can autocomplete

that the way that it knows that is

because it's very familiar with Tailwind

it's familiar with react familiar with a

lot of Frameworks so there we go this

card is looking a lot nicer and closer

to what I wanted with one more prompt we

got the blue going halfway down and we

got that nice white border around the

image and you know this looks a lot more

professional you can see again here when

I type in send because I don't remember

the Tailwind class I want the text to be

centered and I type in send and it auto

recommends I do text Center so we'll do

that and boom my name is now centered I

didn't have to go look up what that

class name was actually called so

perfect another cursor feature that I

want to highlight is the autocomplete

Plus Auto tab where cursor can actually

predict where you're going to want to go

next and this can be a really great way

to edit code manually without that

sidebar so looking at this function here

I have an if statement with a bunch of

else ifs um just as an example let's try

to switch this to a switch case

statement instead so let's say I change

this and I type

switch well it immediately knows the

rest of what I want to type on this

line then it predicts how I'm going to

want to change some of the following

lines and I can just press Tab and then

it even knows which next line I want to

go to after that so I'll go over here

and it predicts to switch it to email I

can basically just keep pressing Tab and

uh and there we go and let's just format

that real quick okay and now I've

switched all those ifal statements to

cases I don't know if this is actually

any more readable I think if I refactor

this into some smaller functions then it

might look better so let's go back to

that control K we'll just select that

section of the code and say Vector this

all right it it gave us all those

changes now we have this format value

and some very specific formatting

functions so a pretty quick easy way to

refactor and makes it a lot more

readable oh and I almost forgot one

other feature which is pretty useful at

times especially if you're working in a

really large codebase because cursor

indexes all of the files you can

actually search your codebase more

intelligently so in the sidebar here I

could ask it where in my code base does

the cck on get set and then I can press

controll enter to search the entire code

base and now it's going to go look

through all these different files and

it'll be able to provide me with an

answer so in this case set in the index

HTML file there it goes it points me to

the right place so if you're just lost

in a large codebase this can be a really

great way to find your way around and to

try to understand how some files Rel to

each other once you do have a better

understanding of the code base I would

recommend that you just tag specific

files instead of searching across the

whole code base but if you're totally

lost and you're not sure where something

is it can be an effective way to find

that so hopefully this helps you see how

you can code much faster using cursor

and if you have any questions drop them

down in the comments because I'd love to

make more videos like this showing you

how you can use AI to improve your

coding speed as always thanks for

watching take care