Is Cursor's Copilot++ BETTER than Github Copilot? FAST AI Coding Master Class

Summary

本视频展示了AI编程助手Cursor的高级功能，特别是新推出的Co-Pilot Plus+。通过实际演示，视频展示了如何利用AI辅助编写代码，包括自动完成多行代码、根据上下文智能提示以及添加和更新节点和边的功能。同时，还介绍了如何通过引用文档来增强代码编写的效率。整个演示强调了AI助手在提高编程效率和简化代码逻辑管理中的作用，鼓励开发者利用这些工具提升自己的工程能力和决策水平。

Takeaways

• 🚀 介绍了Cursor的AI编程助手新功能Co-pilot Plus+，它能够提供更深层次的代码自动完成和上下文感知。
• 🌟 Co-pilot Plus+可以在不直接位于代码完成位置的情况下，自动完成多行代码。
• 🔧 展示了如何使用Cursor进行多任务操作，如同时运行多个提示来优化代码编写流程。
• 📌 强调了AI编程助手在迭代控制中的重要性，允许用户纠正AI或用户自己的错误。
• 📈 通过实例演示了如何使用Cursor快速创建和管理图形界面中的节点和边缘。
• 🎨 说明了如何利用Co-pilot Plus+自动完成代码，以动态更新UI元素，如按钮和标签。
• 🔗 展示了如何将参考文档添加到Cursor中，以便在编码时快速访问和应用相关文档。
• 📝 讨论了如何通过AI编程助手自动创建和修改函数，以响应代码中的变更。
• 🔄 描述了如何使用AI编程助手进行代码重构，例如交换源和目标节点ID。
• 📊 强调了AI编程助手在提高工程师工作效率和保持相关性方面的作用。
• 🛠️ 提倡将AI编程助手作为提升决策层面、优化代码逻辑和提高工程能力的工具。

Q & A

Cursor是什么？

Cursor是一款优秀的AI编程助手，它最近推出了新功能Co-pilot和Co-pilot Plus+。

Co-pilot Plus+有什么特点？

Co-pilot Plus+类似于内置的代码自动完成功能，但它能感知更多的上下文信息，并且能够在不必要将光标放置在特定位置的情况下，自动完成多行代码。

如何使用Cursor的多行自动完成功能？

在编写代码时，可以启动多个提示（prompts），Cursor会根据上下文自动完成多行代码，例如同时创建添加和删除节点的代码。

Cursor如何处理代码中的错误或不符合预期的部分？

Cursor允许用户通过迭代控制来纠正错误，用户可以提出修正指令，Cursor会根据新的指令进行调整。

如何使用Cursor的参考文档功能？

用户可以将相关的文档添加到Cursor中，之后在编写代码时，可以直接引用这些文档中的信息，例如更新边缘（edges）的类型和颜色。

在脚本中，如何实现节点的自动添加和布局调整？

脚本中通过编写函数`add node`和`remove node`，并利用Cursor的自动完成功能，实现节点的添加和随机删除。同时，通过计算节点的最低y位置来调整新添加节点的位置，确保布局合理。

脚本中提到的`useViewFlow`库有什么作用？

useViewFlow是一个库，它允许用户在Vue.js等前端框架中以编程方式创建有趣的图表和图形。它有针对不同前端框架的版本，如React和Svelte。

如何使用Cursor的`fit to view`功能？

`fit to view`功能可以在添加新节点后自动调整视图，以便所有节点都能被看到。脚本中通过设置一个view watcher，在节点更新时自动调用`fit to view`函数。

脚本中如何更新边缘（edges）的样式？

脚本中通过读取参考文档中的信息，使用`type step`更新边缘为步进样式，并设置边缘颜色为红色，以增强图形的视觉效果。

如何使用Cursor创建新的边缘（edges）？

脚本中通过编写函数`create custom edge`，并指定新创建的节点ID，利用Cursor的自动完成功能生成创建边缘的代码。

脚本中提到的AI编程助手的主要优势是什么？

AI编程助手的主要优势在于提高编程效率，通过自动完成代码、提供高级别的逻辑操作和快速迭代修正，帮助开发者在决策层面上提升自己的能力，从而在工程实践中保持竞争力。

Outlines

00:00

🚀 探索Cursor AI编码助手的新功能

本段介绍了Cursor AI编码助手的新功能——Co-pilot Plus+。这项功能类似于自动驾驶仪，提供实时代码自动完成，但更加智能，能够理解更多上下文信息。视频中展示了如何使用Co-pilot Plus+来自动完成多行代码，而不需要光标位于特定位置。此外，还介绍了如何通过添加和移除节点来操作代码，以及如何利用Cursor的新特性来提高编码效率。

05:03

📊 利用Cursor AI编码助手优化代码结构

这段内容展示了如何使用Cursor AI编码助手的Co-pilot Plus+功能来优化代码结构。通过创建一个视图观察器，可以在节点更新时自动调用'fit to view'功能，从而实现代码的自适应调整。此外，还介绍了如何通过添加注释和标签来编辑代码，以及如何利用参考文档来增强AI助手的功能，使其能够根据文档中的信息自动生成代码。

10:05

🛠️ 应用Cursor AI编码助手解决实际问题

在这一段中，视频作者通过实际操作展示了如何应用Cursor AI编码助手来解决具体的编程问题。包括如何添加新节点和边缘，如何创建随机边缘，以及如何使用Co-pilot Plus+自动完成代码。同时，也讨论了如何通过引用文档和使用'apply diff'功能来改进代码。最后，强调了AI编码助手在提高工程效率和决策层面上的重要性。

Keywords

💡AI编程助手

AI编程助手是一种利用人工智能技术来辅助编程的工具，能够理解编程逻辑并自动生成代码片段，提高开发效率。在视频中，AI编程助手被用来自动完成代码，帮助开发者快速实现功能。

💡Co-Pilot Plus+

Co-Pilot Plus+是Cursor推出的一个高级编程辅助功能，它不仅提供代码自动完成，还能根据上下文理解更多信息，实现更智能的代码生成。

💡节点(Node)

在编程和数据结构中，节点通常指的是图或树结构中的一个元素，它包含数据和指向其他节点的引用。在视频中，节点被用来构建图形界面，并与边(Edge)一起形成图结构。

💡边(Edge)

边是图论中的一个概念，连接两个节点的线称为边。在编程中，边可以表示节点之间的关系。视频中通过添加边和设置边的样式，展示了如何在图结构中定义和视觉化节点间的连接。

💡自动完成

自动完成是指编程助手能够根据已输入的代码片段预测接下来可能的代码，并自动填充，从而提高编码效率。

💡视图流(View Flow)

视图流是一种用于创建和操作图形界面中的图表和数据流的库。在视频中，视图流被用来创建和更新节点和边，以及实现图的动态布局。

💡代码自动生成

代码自动生成是指通过工具或服务自动创建代码的过程，减少手动编写代码的需求，提高开发效率。

💡参考文档

参考文档是指提供给编程助手的额外信息资源，如API文档、库文档等，以帮助助手更准确地理解上下文并生成正确的代码。

💡上下文感知

上下文感知是指AI编程助手能够理解代码的上下文环境，并根据这个环境生成合适的代码。

💡迭代控制

迭代控制是指用户能够对AI编程助手生成的代码进行审查和修改，以纠正错误或根据需求调整代码。

💡代码重构

代码重构是指在不改变程序外部行为的前提下，对代码结构进行调整以提高代码质量和可维护性。

Highlights

AI coding assistants like Cursor's Co-Pilot and Co-Pilot Plus+ are powerful tools for developers, offering features such as inline autocompletion and context-aware coding assistance.

Co-Pilot Plus+ can autocomplete multiple lines of code without the need for the cursor to be directly at the position of completion, providing a more advanced coding experience.

Cursor's Co-Pilot Plus+ offers a next-level experience with its ability to understand more context and complete tasks based on the overall structure of the code, not just the immediate surroundings.

The ability to run multiple prompts simultaneously allows developers to work on different parts of the code at the same time, increasing efficiency and productivity.

Co-Pilot Plus+ can automatically add and remove nodes in a graph, adjusting the code to reflect changes in the structure of the data being manipulated.

The AI assistant can generate code for adding and removing buttons, aligning items, and other UI elements, streamlining the development process.

Developers can leverage Co-Pilot Plus+ to dynamically update the UI based on the state of the application, such as adding nodes and edges in a graph.

Co-Pilot Plus+ is capable of understanding and utilizing external documentation, such as view flow docs, to enhance the coding process and provide more accurate code suggestions.

The AI assistant can update edges and graphs to create smooth step edges and color them based on references from added documentation, demonstrating its ability to integrate new information into the code.

Co-Pilot Plus+ offers iterative control, allowing developers to correct mistakes made by the AI or to refine its suggestions, ensuring that the final code meets the desired specifications.

The AI assistant's ability to autocomplete labels and edges based on the context of the code showcases its advanced understanding of the relationships within the code.

Co-Pilot Plus+ can help developers focus less on writing individual lines of code and more on high-level manipulation of the application's logic, enhancing decision-making at a higher stack level.

The use of AI coding assistants can significantly speed up the development process, allowing developers to create complex systems, like node graphs, in a fraction of the time it would take manually.

AI coding assistance is not just about making assumptions on the next available token but about making changes wherever needed in the code, showcasing a deeper level of understanding.

The integration of AI coding assistants into the development workflow can help developers stay relevant and enhance their engineering abilities in the face of rapid technological advancements.

Using AI coding assistants can lead to a more strategic approach to coding, where developers act more like product managers or UX engineers, while still being in control of the product and making changes in the code.

Transcripts

cursor is one of the best AI coding

assistants they just launched co-pilot

Plus+ a couple weeks ago let's play with

it so one of the cool things that people

don't really realize they can do with AI

coding assistance I'm going to highlight

this position equally below first

element remove comments going to let

that rip let's say you want to run

something at the same time you can be

running multiple prompts you can see

this one's kicking off I'm going to go

ahead and fire off another prompt here

add a new and remove node button okay

let's go ah and accept this great so

this just created nice aligned items for

us we now have our add and remove button

go and accept that let's take a look at

one of cursor's new features co-pilot

Plus+ you can think of co-pilot Plus+

just like get up co-pilot where you have

in line autoc completion helping you out

but it's supposed to be the next level

it's supposed to be aware of more

context and the big highlight for me

here is it's Auto completing multiple

lines without your cursor being necessar

neily right in the position you need to

make the completion like in this example

they're firing off three completions at

the same time we have ADD node remove

node let's go ahead and hop back to our

application here so you can see we got

our add and remove button in the top

right there we'll fix that in a second

so we're just going to start typing

function add node and then we're going

to stop so let's see what it gives us

here pretty decent so we can hit add

node here and it'll just add a new node

at the bottom it looks good and remove

node let's go ahead and get remove node

written now okay and you can see here

remove move random nodes coming in

picking a random node and automatically

selecting that for us so let's get our

script back there great we'll save and

then we'll update this to be remove

random node refresh and there we can see

it's removing completely random nodes we

can add nodes back hit refresh add nodes

back you can see we're adding some new

nodes there let's go ahead and update

this so that we're not just adding this

so going to go ahead and say uh Generate

random nodes not just five we're going

to let that run and at the same time

we're going to come down here and let's

update the button let's say position at

bottom of screen uh bottom let's say 200

picks come back up here we'll accept

this change save see how that looks and

now our ad node is adding a bunch of

random nodes but it's not updating in

the right position so it's just placing

it you know in the same spot so we can

keep hitting it we're getting that node

in the exact same spot every single time

right there let's go ahead and fix that

let's accept this previous chain here

hit

save so this only repositioned our

remove button that's fine we'll just

copy that we'll copy the style hit enter

here and get this fixed here so we have

both of our buttons and I actually want

this to be in the bottom center of the

screen so let me go ahead and just

update this I'll say wrap in div fixed

bottom screen Flex horizontal we'll let

that run while we update this to move

nodes

downward based on the lowest y position

of all nodes so just going to go ahead

and grab the new lowest position and add

500 to that or add 800 to that that

looks great let's make sure that um this

like position actually exists I'm going

to accept this change down here so this

looks good looks like it's just setting

up that styling for us hit save there we

got add and remove at the bottom of the

screen now that looks good you can see

here our ad node is coming in and it's

pushing down

100 pixels that's really great we're

moving really quickly here and we're not

doing a whole lot so I want this to be

in the center I'm going to highlight

this I'm just going to say position

elements in the center okay great it's

got the left it's got the transform save

and there we go so now our buttons our

controls are centered right in the

middle of the screen there at the bottom

that looks great how can I access the Y

position of our nodes here so I'm using

this static elements list here we need

to actually pull the nodes from our node

list so we're using use view flow it's a

great Library it allows you to create

interesting graphs interesting charts

programmatically in vuejs there are

respective versions for spelt and react

whatever your favorite flavor front end

Frameworks are there's a version for you

so let's just keep cooking here I'm

going to go ahead and add nodes to this

and edges great and then we're just

going to come in here and say use um

nodes instead and just hit enter see

what it does there there we go so so

it's using nodes instead of elements

elements is kind of our static list and

you can see here it did pick up on that

position and it's got the node

positioning there so should get the

lowest position and now it's typed out

because it's coming right out of the

library so if we hit add node now you

can see 100 pixels getting pushed down

that's fantastic and let's go ahead and

create another function I don't want to

keep scrolling down as we add nodes I

want it to just resize automatically

that function is being called here fit

to view I'm just going to highlight some

of this and say after adding nodes call

fit to view and what we'll actually do

is I want to do this in a view Watcher

so that we don't have to manually do

this every time so basically if these

nodes update I want us to reactively

call fit to view so what I'm going to do

is kind of do the same thing I'm going

to say instead of just after adding

nodes I'm just going to ask cursor when

nodes change in a watcher call fit view

just going to let that flop

and there we go it deleted the on pane

ready I don't wanted to do that so I'm

just going to add a followup instruction

keep on pain ready one of the most key

components about true AI coning

assistance is that they're iteratively

controllable you need to be able to

correct mistakes that it makes correct

mistakes that you ask it to make so this

looks good I'm going to hit accept here

and I'm not sure we need this nested fit

to view call we'll see I'll refresh hit

add node so that's not working so I need

this fit to view function I'm not sure

where this comes from there we go so

there's a fit view right here and I'm

going to go ahead and alist this I'm

going to say fit view from Hook and then

whenever this gets called I'm just going

to call this method right here so let's

see how that works there we go so now

whenever we're adding new nodes we're

automatically calling that resize

function so we can see our new nodes

right so that looks great let's test out

co-pilot Plus+ some more I want to see

some more of this magical autoc

completion in the works so let's go

ahead and you know do something where

the co-pilot can pick up on what we want

to see happen next we'll start editing

all the labels right so we'll update

these to you know be like little llm

agents so we'll say you know this is a

um llm coder number one and we just want

to keep going down the list exactly so

it picked up on that right away you can

see here on the auto completion to the

right now trying to auto complete it all

four so I'm going to hit Tab and that's

done so right away picked up on that

change a lot of to get a lot done really

quickly let's keep going down the line

I'm going to just highlight this here

and Bam it's Auto completing for us of

course we're just going to hit Tab and

let's go ahead and add some labels here

to our edges kind of following that same

line so I think we can just do label and

let's see what we want to do here so

okay cool so it's looking at this

relationship Source One To Source three

very cool let's go ahead and just keep

that going there you go so autocompletes

are coming in that looks really really

great love that and so you can see here

now we have the edges labeled as well so

if we move these a little bit you can

see here we have 2 3 4 and you know our

edges now have labels so we can see llm

coder 1 going to llm coder 2 and then we

have uh you know four and we have five

so this looks good so let's go ahead and

look at one of cursor's Keystone

features in my mind the ability to add

reference documents so I'm going to hit

command L here open up the chat window

and I'm going to hit at docs click on

this you can see I've already added a

couple view flow docs it's been running

these prompts with information about

nodes and examples I'm going to going to

hit add new Doc here and I want to pull

in the edge documentation so let's look

at the edges so here's the introduction

to nodes I want to pull in the edges so

let's look at edges and you can see here

it has a bunch of information about you

know composing new graph flows using

edges so there's the remove edges

function and Etc right so let's go ahead

and look at how we can set up you know

some of these step edges some of these

smooth step edges but of course we're

going to have our AI coding assistant do

it for us we're going to be using cursor

here so I'm going to grab this URL and

I'm going to go ahead and go back into

docs I'm going to hit add new Doc paste

this in I'm going to update the name

because I want to be able to reference

it in inline command prompts edges hit

confirm that's going to start loading in

they're indexing that and then as soon

as that comes in we can start asking

specific questions related to these docs

so I want to say update our edges and

our graphs make these step edges and

also color the edges so let's just go

ahead and ask how to do that so how can

we update our edges and and then I'm

going to reference the AP view file to

make them step

edges and change the color of our edges

so just going to ask that question let's

see what it comes up with you can see

it's reading both the edges um and the

theme flow and the theming docks so

let's go ahead and just see what it's

saying here pull this out a little bit

so those are all of our nodes and now

it's got the edges so it's saying just

use type so I'm going to highlight this

and and start an inline instruction add

type step to each Edge let that run

great and how do we update the style

this will create red edges for us let's

accept this code change and then let's

go ahead and just drop in this new Edge

color see what that looks like okay nice

that totally worked you can see here

we're using the new Step Edge and you

can see that our Edge colors are indeed

red so it just kind of pulled that from

the docks we then just shove the code in

um it would be great if these coding

assistants you know had clean an insert

functionality I'm not sure how well this

would have worked if I just hit apply

diff let's go ahead and try it so I'm

going to go ahead and remove that and

just hit apply diff yeah so the apply

diff functionality looks like is not

exactly working that's fine we can copy

and paste in some improvements to be

made there but you can see here we added

some documentation and now we can close

the chat interface I don't really like

the whole chat on the side you're not

really operating on your code it's good

when you're in explorative phases

looking through documentation trying to

solve a specific problem but I like to

keep that closed for the most part and

just really focus on the value of the

code so you can see this is looking

pretty good as we add nodes we want our

nodes to create an edge to something

that already exists so I'm going to go

ahead minimize all this and I'm going to

after add nodes just say we'll say

create random Edge and then we're going

to go ahead and pass in the node ID that

was just created and now we're going to

go ahead and hit enter enter and we're

looking for copilot Plus+ to autocreate

this function for us so based on the

context of the file it should be able

able to see what we're looking for here

right we'll say function there we go

create custom Edge and that'll grab a

random node and generate an edge and

then go ID to ID that looks good let's

go ahead and see how that does so we'll

hit add node nice that looks good we'll

hit another add node so this looks

decent but it's a little backward we

have our source node ID is the new node

that we just created so I'm going to go

ahead and just say new node ID so I'm

going to manually change this it's

seeing these errors come in let's go see

if co-pilot can update this for us there

we go so it's seeing that we want to

update these we go ahead and hit tab

just highlight this next one just hit

tab again great and then what I'll do

here is just do a quick highlight I'll

say swap source and Target put enter and

it'll swap those for us really quickly

so we'll hit save and let's go ahead and

look and we'll hit add node add node add

node very good so except for this last

one here it looks like we got all of our

new nodes getting changed to the

previous node which is good there we go

so got the node chain there and that's

looking great so those edges are coming

in so we'll do one more thing here find

new Exposition and we'll go ahead and

just let that auto complete I just want

to kind of fan out and okay so it's

going to find the lowest Exposition and

just kind of increment that's fine we'll

go ahead and use that so this will just

set things off a little bit and we'll

use that for the new Exposition down

here and you can see there copilot plus

plus again helping us out immediately

it's definitely more advanced than the

default built-in G Hub co-pilot that is

you know just kind of making assumptions

on the next available token it really

does look like co-pilot Plus+ for cursor

is going the next step and saying we'll

make the change wherever you need it not

just right in front of your cursor so we

hit add node now you can see we're

branching down and to the right and

that's really great so it's selecting a

random node and it's pushing it into the

new node and you can see we have that

reference coming in and just like that

nice so we have a kind of interesting

node graph system getting built here

we're using co-pilots we're getting this

done really quickly if you were to take

away any couple themes from how to use

AI coding assistants it's really all

about upleveling where you sit on the

stack right it's a lot less about

writing individual lines of code and

it's a lot more about highlevel

manipulation of the logic of your

application right move yourself up the

stack of decision making Focus Less on

the lines of code you're writing and

focus more on the high level

implementation think more like a product

manager or product developer or even

like a UI ux engineer except you're

still in the code you're still making

the changes you're still in full control

of the product the only difference is

now you can run multiple prompts that

write code for you automatically and

give you results back fast if you want

to enhance your engineering ability and

stay relevant with all the crazy layoffs

you need to give yourself an edge that's

what we focus on on this channel we

focus on how can we utilize technology

llms AI coding assistants to create

concrete value for us in our daily lives

as Engineers if that interests you if

you want to see more content like this

hit the sub hit the like I'll see you in

the next

one