Is Cursor's Copilot++ BETTER than Github Copilot? FAST AI Coding Master Class
Summary
TLDR本视频展示了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
🚀 探索Cursor AI编码助手的新功能
本段介绍了Cursor AI编码助手的新功能——Co-pilot Plus+。这项功能类似于自动驾驶仪,提供实时代码自动完成,但更加智能,能够理解更多上下文信息。视频中展示了如何使用Co-pilot Plus+来自动完成多行代码,而不需要光标位于特定位置。此外,还介绍了如何通过添加和移除节点来操作代码,以及如何利用Cursor的新特性来提高编码效率。
📊 利用Cursor AI编码助手优化代码结构
这段内容展示了如何使用Cursor AI编码助手的Co-pilot Plus+功能来优化代码结构。通过创建一个视图观察器,可以在节点更新时自动调用'fit to view'功能,从而实现代码的自适应调整。此外,还介绍了如何通过添加注释和标签来编辑代码,以及如何利用参考文档来增强AI助手的功能,使其能够根据文档中的信息自动生成代码。
🛠️ 应用Cursor AI编码助手解决实际问题
在这一段中,视频作者通过实际操作展示了如何应用Cursor AI编码助手来解决具体的编程问题。包括如何添加新节点和边缘,如何创建随机边缘,以及如何使用Co-pilot Plus+自动完成代码。同时,也讨论了如何通过引用文档和使用'apply diff'功能来改进代码。最后,强调了AI编码助手在提高工程效率和决策层面上的重要性。
Mindmap
Keywords
💡AI编程助手
💡Co-Pilot Plus+
💡节点(Node)
💡边(Edge)
💡自动完成
💡视图流(View Flow)
💡代码自动生成
💡参考文档
💡上下文感知
💡迭代控制
💡代码重构
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
Ver Más Videos Relacionados
GPT-4o AI Agents: Easily Create Medical Research Agents (Praison AI)
Build Anything with Perplexity, Here’s How
Build an AI code generator w/ RAG to write working LangChain
The RIGHT WAY To Build AI Agents with CrewAI (BONUS: 100% Local)
Autogen Agents with RAG - Upgrading Agents with a Knowledge Base
Python Advanced AI Agent Tutorial - LlamaIndex, Ollama and Multi-LLM!
5.0 / 5 (0 votes)